はじめに
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