Rails5.2 + Docker環境にVue.js (Webpacker) を導入する

rails docker vuejs

既存のRails + Docker環境にVue.jsを導入しましたので、その手順をメモしておきます。Rails 5.1からはwebpackerを使用することで、Vue.jsやReactなどのモダンなJSフレームワークを組み込むことができるようになりましたので、そちらを使っていきます。

Dockerfileとdocker-compose.ymlの設定

Rubyコンテナを立ち上げる際に必要となるライブラリ(build-essential, libpq-dev, yarn, Node.js)をインストールします。

Dockerfile

続いてdocker-compose.ymlです。

docker-compose.yml

コンテナの起動

webpackerの導入

Gemfile に以下を追加し、bundle します。

Gemfile

これでrails webpackerコマンドが使えるようになりました。

これで以下のWebPack関連ファイルが生成されました。
・.babelrc (babel設定ファイル)
・.postcssrc.yml (PostCSS設定ファイル)
・app/javascript/packs/application.js (エントリーポイントファイル)
・bin/webpack (webpackのビルドスクリプト)
・bin/webpack-dev-server (ビルドサーバーの起動スクリプト)
・config/webpack/development.js (開発環境設定ファイル)
・config/webpack/environment.js (共通環境設定ファイル)
・config/webpack/production.js (プロダクション環境設定ファイル)
・config/webpack/test.js (テスト環境設定ファイル)
・config/webpacker.yml (webpacker設定ファイル)

Vue.jsの導入

このコマンドでは以下のVue.js関連のファイルが生成されました。
・app/javascript/app.vue (Vueコンポーネントファイル)
・app/javascript/packs/hello_vue.js (エントリーポイントファイル)
・config/webpack/loaders/vue.js (Vue.jsの環境設定ファイル)

Vue.jsファイルのビルド

それでは、Vue.js関連のコンポーネントをJavascriptにコンパイルするため、bin/webpackコマンド実行しビルドします。

ここで「Module build failed: Error: Loading PostCSS Plugin failed: Cannot find module ‘postcss-preset-env’」のエラーが出た場合の対象法はこちら。

viewに次の記述をすると、app/javascript/pack以下にあるhello_vueファイルが呼び出されます!

そして railsを起動して、”Hello Vue”が表示されたら成功です!

webpack-dev-server

ただ、今のままだとVue.js用のJSを変更するたびに、毎回bin/webpackを実行してコンパイルしなければいけません。ですので、JSを変更したらすぐに変更が反映されるように、devサーバーを設定しておきます。
まず、ルートディレクトリにProcfile.devというファイルを以下のように作成します。

Procfile.dev

次に、binディレクトリの下にserverという名前のファイルを以下のように作成します。

bin/server

また、serverではforemanを使うので、Gemfileに追加します。foremanはProcfile を読み込み、複数のプロセスを管理できるツールで、rails serverとwebpack-dev-serverを一度に起動できます。

Gemfile

config/environments/development.rbに以下を追加します。

config/environments/development.rb

それらに合わせてdocker-compose.ymlを修正します。

docker-compose.yml

これでjavascriptの変更が、即座にブラウザに反映されるようになりました!

以上です!


投稿者:

Shuji Tenra

「仕事に特化したQ&AサイトJobQuery【ジョブクエリ】」の開発/運営をしています。https://jobquery.jp