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を以下のように編集する

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を以下のように編集

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を編集

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 

database.ymlの編集

次にRailsプロジェクトのdatabase.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

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 するようにしてください

また　この段階で　

↑のようなエラー　
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

ルーティングは以下

routes.rb

Rails.application.routes.draw do
  root to: 'page#home'
end

作成されたビューに<%=javascript_pack_tag 'hello_vue'%>と記述し
問題なく表示されていれば成功です！

app/views/home.html.erb

<%=javascript_pack_tag 'hello_vue'%>

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

お疲れ様でした！

ひがきけいた　
Github
Twitter
ポートフォリオサイト
https://myprofile-7377b.web.app/