Rails 5 x MySQL x Vue.js の環境を Docker で爆速で構築する

# 今日の目標　

Rails アプリケーションをDocker-composeで構築し、さらにVue.jsの導入もやっちゃうぞ

Vue.js導入の際の予想されるエラーに関しての対処も文中に記述しております。


##環境
Ruby  2.5.1
Rails 5.2.4
MySQL 5.7

Railsのプロジェクトを作成するディレクトリを事前に作成しておく

```
$ mkdir todo-target
``` 
作成したディレクトリに移動

```
$ cd todo-target
```
## Docker用のファイルを作成する

Docker構築では　基本的に以下の４ファイルを作成していく

Dockerfile
docker-compose.yml
Gemfile
Gemfile.lock

Dockerfileを作成

```
$ touch Dockerfile
```

作成したDockerfileを以下のように編集する

```Ruby:Dockerfile
FROM ruby:2.5.1

RUN curl -sL https://deb.nodesource.com/setup_10.x | bash - && apt-get update && \
    apt-get install -y nodejs --no-install-recommends && rm -rf /var/lib/apt/lists/*

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

RUN yarn add node-sass

RUN mkdir /app
WORKDIR /app
COPY Gemfile /app/Gemfile
COPY Gemfile.lock /app/Gemfile.lock
RUN bundle install
COPY . /app

```
Dockerfileに書かれる内容は　
#### ベースとなるイメージを指定する
FROM 　ruby:2.5.1

#### コンテナ上のワーキングディレクトリを指定する
WORKDIR 　/app

#### ディレクトリやファイルをコピーする
左側がホストのディレクトリ、右側がコンテナ上のディレクトリ
COPY 　Gemfile /app/Gemfile

#### "docker build"時に実行される処理
RUN curl -sL https:....

とまぁこんな感じ。あとは場数を踏んで慣れるしかありません。


続いてdocker-compose.ymlを作成

```
$ touch docker-compose.yml
```
作成したdocker-compose.ymlを以下のように編集

```yml:docker-compose.yml
version: '3'
services:
  web:
    build: .
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    volumes:
      - .:/app
    ports:
      - 3000:3000
    depends_on:
      - db
    tty: true
    stdin_open: true
  db:
    image: mysql:5.7
    volumes:
      - db-volume:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: password
volumes:
  db-volume:

```
docker-compose.ymlはインデント注意。　
`services:`と`volumes:`が同じ階層　`web:`と`db:`が同じ階層

docker-compose.yml ファイルは上記のようにyaml でDocker コンテナに関する起動オプション(build オプションも含まれることもある)を記述したファイルになります。

このファイルに記載されている内容は基本的にdocker build, docker run コマンド指定することができるオプションになりますが、Docker compose のyaml ファイルとして記述することで複数のコンテナーから成るサービスを俯瞰的に見ることができるようになり、保守性のコストを軽くすることができます。


##Gemfileを作成

```
$ touch Gemfile
```
作成したGemfileを編集

```ruby:Gemfile
source 'https://rubygems.org'
gem 'rails', '5.2.1'
```
空の`Gemfile.lock`を作成

```
$ touch Gemfile.lock
```
Gemfile.lock
はbuildした後に自動的に記述されるので空にしておく。（ファイルは必要）

## Rails プロジェクトの作成

次にRailsのプロジェクトを作成するため次のコマンドを実行
`$ docker-compose run web rails new . --force --database=mysql`
(rails newの . は現在いるディレクトリにそのままプロジェクトを作成するというもの)

```
$ docker-compose run web rails new . --force --database=mysql
```
プロジェクトの作成が終わったら`docker-compose ps`でコンテナが作成されているか確認

```
$ docker-compose ps 
```
[![Image from Gyazo](https://i.gyazo.com/0334cc34e36da038936e16bedd3cfe30.png)](https://gyazo.com/0334cc34e36da038936e16bedd3cfe30)
### database.ymlの編集

次にRailsプロジェクトのdatabase.ymlを編集します。

```yml:database.yml
default: &default
  adapter: mysql2
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: password
  host: db
```
ここでのポイントはpasswordとhostの部分を`docker-compose.yml`の記述と合わせることです。

それではデータベースを立ち上げて

```
$ docker-compose run web rails db:create
```

コンテナを立ち上げ、localhost:3000に接続してみましょう

```
$ docker-compose up
```
localhost:3000

[![Image from Gyazo](https://i.gyazo.com/79ed9aa49eea56a6123fc4f699b9bd9a.png)](https://gyazo.com/79ed9aa49eea56a6123fc4f699b9bd9a)

Railsが歓迎してくれてますね！

ここまででDocker-composewo使ったRailsの基本的な構築は完了です。　このままアプリ制作に入ってもよいのですが　今回は　フロントエンドに　Vue.jsを導入してみたいと思います。

## Vue.jsの導入

vue.jsをRailsで使用できるようにするためにまずはWebpackerを導入していきます。
Gemfileに以下を追記していきます。

```:Gemfile
gem 'webpacker'
```
記述したのち

```
$ docker-compose run web rails webpacker:install
```
コンテナ内でwebpackerのinstallをします。
インストールが完了したらいろいろRailsのプロジェクトにファイルが追加されると思います。

この段階でもし　
`Could not find gem　◯◯　in any of the gem sources listed in your Gemfile.`
`Run bundle install to install missing gems.`
といったエラーが出る場合

```
$ docker-compose run web bundle install
```
でコンテナ内でbundle install するようにしてください

また　この段階で　
[![Image from Gyazo](https://i.gyazo.com/242e9e8da6cf192d59f99bb5a9ffa8cd.png)](https://gyazo.com/242e9e8da6cf192d59f99bb5a9ffa8cd)

↑のようなエラー　
`Your Yarn packages are out of date!
  Please run yarn install --check-files to update.`

が出る場合
ログ通りに

```　
$ yarn install --check-files
```
を実行するとサーバーは起動できるものの
ブラウザでアプリを開いた時にcssライブラリたちが効いていない事象に陥るかもしれません。
そんな時は

```
$ yarn upgrade
```
とすることで一発で解消出来ます。

下準備が出来ましたので　Vueをインストールしていきたいと思います。

### Vueのインストール

```
$ docker-compose run web rails webpacker:install:vue
```
これでVue.jsの導入が完了しました。

### Vue.jsファイルのビルド
次にVue.js関連のコンポーネントをJavascriptにコンパイルするため

```
$ docker-compose run web bin/webpack
```
を実行します。　これで

仮置きのビューを作成して確認してみましょう

### ルーティング、コントローラ、ビューの作成

```
$ rails g controller Page home
```
ルーティングは以下

```ruby:routes.rb
Rails.application.routes.draw do
  root to: 'page#home'
end
```
作成されたビューに`<%=javascript_pack_tag 'hello_vue'%>`と記述し
問題なく表示されていれば成功です！

```erb:app/views/home.html.erb
<%=javascript_pack_tag 'hello_vue'%>
```
[![Image from Gyazo](https://i.gyazo.com/2216f15a6aa596c606e6d6380a7b89ca.png)](https://gyazo.com/2216f15a6aa596c606e6d6380a7b89ca)

ここまでで　Rails x MySQL x Vue.js の　docker-compose による環境構築は完了です。

## お疲れ様でした！

ひがきけいた　
[Github](https://github.com/higakikeita)
[Twitter](https://twitter.com/keitah0322)
ポートフォリオサイト
https://myprofile-7377b.web.app/