1-3.Cloud9上のRails5.2.1でVueを使えるようにする（作業時間５分）

1.プロジェクトの作成

Consoleウィンドウでプロジェクト作成用のコマンドを入力します。

rails new vue_sample --webpack=vue

2.作成したプロジェクトフォルダに移動

cd vue_sample/

3.yarnがインストールされているかの確認

yarn -v

インストールされていない場合はインストールコマンドを入力します。

npm i -g yarn

4.webpackerのインストール

rake webpacker:install

5. Vueのインストール

rake webpacker:install:vue

Vueのインストールに成功すると下記のメッセージが表示されます。

Done in 7.21s.
You need to enable unsafe-eval rule.
This can be done in Rails 5.2+ for development environment in the CSP initializer
config/initializers/content_security_policy.rb with a snippet like this:
if Rails.env.development?
  policy.script_src :self, :https, :unsafe_eval
else
  policy.script_src :self, :https
end
Webpacker now supports Vue.js 

メッセージ通りにconfig/initializers/content_security_policy.rb を編集します。
開発環境で :unsafe_eval を許可することで、eval() 及び同様のメソッドの利用を許可します。

Rails.application.config.content_security_policy do |policy|
#   policy.default_src :self, :https
#   policy.font_src    :self, :https, :data
#   policy.img_src     :self, :https, :data
#   policy.object_src  :none
#   policy.script_src  :self, :https
#   policy.style_src   :self, :https

#   # Specify URI for violation reports
#   # policy.report_uri "/csp-violation-report-endpoint"
    if Rails.env.development?
      policy.script_src :self, :https, :unsafe_eval
    else
      policy.script_src :self, :https
    end
end

コンテンツセキュリティポリシーについての説明はこちら

6.Foremanのインストール

サーバの起動ですが、Rails server と webpack-dev-server の両方を実行する必要があるので面倒です。一つのコマンドで起動させるためにForemanを導入します。
Gemfileに追記しインストールします。

group :development do
...
  gem 'foreman'
end

bundle install

7. Procfileの作成

Foremanのコマンドを実行するために、プロジェクトフォルダ直下にProcfileというファイルを作成し実行したいコマンドを記述します。

rails: bundle exec rails server
webpack: ./bin/webpack-dev-server

8.ControllerとViewの作成

Vueが正しくインストールされているか確認するためにcontorollerとviewを作成します。

rails g controller Home index

config/routes.rbの編集も行います。

root to: 'home#index'

9.Viewの編集

作成された app/views/home/index.html.erb を編集します。

<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>
<%= javascript_pack_tag 'hello_vue' %>

'hello_vue' は vueをインストールしたときに自動で作成されたapp/javascript/packs/hello_vue.js を指しています。

10.Foremanの起動とアプリケーションの確認

Consoleウィンドウでforeman起動のコマンドを実行します。

foreman start 

無事起動がすんだらブラウザで動作確認してみましょう。
ツールバーの「Preview - Preview Running Application」を実行します。

プレビューウィンドウが表示されますので、ブラウザの新しいウィンドウで表示し直します。

画面上に「Hello Vue!」が表示されていれば確認完了です。