1-3.Cloud9上のRails5.2.1でVueを使えるようにする(作業時間5分)
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!」が表示されていれば確認完了です。
この記事が気に入ったらサポートをしてみませんか?