Docker & Rails & webpack & Vue.js #Rails

はじめに

RailsにVue.jsを導入する手順についてのメモ。

1. Railsプロジェクト用のディレクトリを作成

$ mkdir ~/hoge_project
$ cd hoge_project

2. Dockerfile作成

Dockerfile

FROM ruby:2.5
ENV LANG C.UTF-8
RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs

## nodejsとyarnはwebpackをインストールする際に必要
# Node.js
RUN curl -sL https://deb.nodesource.com/setup_7.x | bash - && \
apt-get install nodejs
# yarnパッケージ管理ツール
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

WORKDIR /tmp
COPY Gemfile Gemfile
COPY Gemfile.lock Gemfile.lock
RUN bundle install
ENV APP_HOME /hoge_project
RUN mkdir -p $APP_HOME
WORKDIR $APP_HOME
COPY . /hoge_project

3. Gemfile作成

Gemfile

source 'https://rubygems.org'
gem 'rails', '5.1.4'

4. Gemfile.lock作成

$ touch Gemfile.lock

5. docker-compose.yml作成

docker-compose.yml

version: '3'
services:
  db:
    image: mysql:5.7
    environment:
      MYSQL_USER: root
      MYSQL_ROOT_PASSWORD: password

  webpacker:
    build: .
    command: bundle exec bin/webpack-dev-server
    volumes:
      - .:/hoge_project
    ports:
      - "8080:8080"

  web:
    build: .
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    volumes:
      - .:/hoge_project
    ports:
      - "3000:3000"
    depends_on:
      - db
      - webpacker

上記のように設定しておけば、webpack関連のインストールコマンドを叩く必要がなくなります。
docker-compose run web rails webpacker:install
docker-compose run web rails webpacker:install:vue

6. Dockerコンテナにプロジェクト作成

$ docker-compose run web rails new . --force --database=mysql --webpack=vue --skip-coffee --skip-test

7. 再ビルド

rails newでGemfileにgemが追加されたので再度ビルドが必要。

$ docker-compose build

8. database.yml設定

config/database.yml

default: &default
  adapter: mysql2
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: password
  host: db

9. サービス起動

$ docker-compose up

10. DB作成

$ docker-compose run web rake db:create

11. ルーティング設定

config/routes.rb

Rails.application.routes.draw do
  root 'home#index'
end

12. controllerとview作成

$ docker-compose run web bundle exec rails g controller home index

controllerと一緒にviewを作成すると、以下のテンプレート文が作成されている。

app/views/home/index.html.erb

<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>

13. vueの読み込み設定

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>HogeProject</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
    <!-- ↓追記 -->
    <%= javascript_pack_tag 'hello_vue', 'data-turbolinks-track': 'reload' %>
  </body>
</html>

※'hello_vue'ファイルはrails newの段階でapp/javascript/packs/hello_vue.jsに作成される。

14. アクセス

http://localhost:3000 にアクセス

こんな感じで表示されれば完了。

補足

ページを読み込む度にwebpackerのコンパイルが行われるので、ページの読み込みがかなり遅くなります。

[Webpacker] Compiling…
[Webpacker] Compiled all packs in /vue_practice/public/packs
Completed 200 OK in 76754ms (Views: 76713.0ms)

イライラ防止のため、vueファイルが保存される度に自動コンパイルしてくれるwebpack-dev-serverを起動しておいたほうがいいです。

$ docker-compose exec web bash
root@c5ecea:/hoge_project# bin/webpack-dev-server