既存の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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
FROM ruby:2.5.1 RUN rm /bin/sh && ln -s /bin/bash /bin/sh RUN apt-get update -qq && apt-get install -y build-essential libpq-dev RUN apt-get update && apt-get install -y curl apt-transport-https wget && \ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \ echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \ apt-get update && apt-get install -y yarn RUN curl -sL https://deb.nodesource.com/setup_8.x | bash - && \ apt-get install nodejs ENV APP_HOME /myapp RUN mkdir -p $APP_HOME WORKDIR $APP_HOME ADD Gemfile $APP_HOME/Gemfile ADD Gemfile.lock $APP_HOME/Gemfile.lock RUN bundle install ADD . $APP_HOME |
続いてdocker-compose.ymlです。
docker-compose.yml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
version: '3' services: db: image: postgres:latest web: build: . command: bundle exec rails s -p 4000 -b '0.0.0.0' volumes: - .:/myapp ports: - "4000:4000" depends_on: - db tty: true |
コンテナの起動
1 |
$ docker-compose build |
webpackerの導入
Gemfile に以下を追加し、bundle します。
Gemfile
1 |
gem 'webpacker', github: 'rails/webpacker' |
1 |
$ docker-compose run web bundle install |
これでrails webpackerコマンドが使えるようになりました。
1 |
$ docker-compose run web rails webpacker:install |
これで以下の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の導入
1 |
$ docker-compose run web rails webpacker:install:vue |
このコマンドでは以下の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コマンド実行しビルドします。
1 |
$ docker-compose run web bin/webpack |
ここで「Module build failed: Error: Loading PostCSS Plugin failed: Cannot find module ‘postcss-preset-env’」のエラーが出た場合の対象法はこちら。
viewに次の記述をすると、app/javascript/pack以下にあるhello_vueファイルが呼び出されます!
1 |
<%= javascript_pack_tag 'hello_vue' %> |
そして railsを起動して、”Hello Vue”が表示されたら成功です!
1 |
$ docker-compose up |
webpack-dev-server
ただ、今のままだとVue.js用のJSを変更するたびに、毎回bin/webpackを実行してコンパイルしなければいけません。ですので、JSを変更したらすぐに変更が反映されるように、devサーバーを設定しておきます。
まず、ルートディレクトリにProcfile.devというファイルを以下のように作成します。
Procfile.dev
1 2 3 |
web: bundle exec rails s # watcher: ./bin/webpack-watcher hot: ./bin/webpack-dev-server |
次に、binディレクトリの下にserverという名前のファイルを以下のように作成します。
bin/server
1 2 3 |
#!/bin/bash -i bundle install bundle exec foreman start -f Procfile.dev |
また、serverではforemanを使うので、Gemfileに追加します。foremanはProcfile を読み込み、複数のプロセスを管理できるツールで、rails serverとwebpack-dev-serverを一度に起動できます。
Gemfile
1 2 3 |
group :development do gem 'foreman' end |
config/environments/development.rbに以下を追加します。
config/environments/development.rb
1 |
config.x.webpacker[:dev_server_host] = "http://localhost:8080" |
それらに合わせてdocker-compose.ymlを修正します。
docker-compose.yml
1 2 3 4 5 6 7 8 9 |
build: . - command: bundle exec rails s -p 4000 -b '0.0.0.0' + command: ./bin/server volumes: - .:/myapp ports: - - "4000:4000" + - "8080:8080" depends_on: |
これでjavascriptの変更が、即座にブラウザに反映されるようになりました!
以上です!