Docker & Rails & webpack & Vue.js

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

## 1. Railsプロジェクト用のディレクトリを作成
```
$ mkdir ~/hoge_project
$ cd hoge_project
```

## 2. Dockerfile作成
```bash: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作成

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

## 4. Gemfile.lock作成

```
$ touch Gemfile.lock
```

## 5. docker-compose.yml作成

```yaml: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コンテナにプロジェクト作成

```bash
$ 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. ルーティング設定
```ruby:config/routes.rb
Rails.application.routes.draw do
  root 'home#index'
end
```

## 12. controllerとview作成
```bash
$ docker-compose run web bundle exec rails g controller home index
```
controllerと一緒にviewを作成すると、以下のテンプレート文が作成されている。

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

## 13. vueの読み込み設定
```erb: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 にアクセス
![スクリーンショット 2018-07-10 13.55.40.png](https://qiita-image-store.s3.amazonaws.com/0/239829/f55f481e-a31d-e97b-2285-ed882749e707.png)
こんな感じで表示されれば完了。

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

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

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

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