Docker Rails Vue.js MySQL環境構築

#前提
Docker for macインストール済み

#本題
DockerとRails、Vue.jsの環境構築にかなり時間を割いてしまっったっため記述していきます。
また、様々な記事を参考にするもののbundle installがうまくいかず、エラーが出ておりましたがなんとか構築できたので残しておこうと思いました。

mkdirで新規ファイルを作成。

FROM ruby:2.5.3

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_10.x | bash - 
RUN apt-get install -y nodejs npm && npm install n -g && n 10.17.0

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

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:

Gemfile.

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

#自動でファイルの中身を形成されるため空のファイルを作成
$ touch Gemfile.lock

上記４つのファイルを準備。

その後、ターミナルにて下記コマンドを入力。

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

結構終了するまで時間かかります。
終了したらdatabase.ymlをコンテナと同じように編集します。

config/database.yml

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

続いて、

$docker-compose build

buildが終了したら、

$ docker-compose up -d

$ docker ps

起動しているか確認。

最後にデータベースを作成。（起動したままで）

$ docker-compose exec web rails db:create
Created database 'app_development'
Created database 'app_test'

こんな感じで出てきたら成功。

localhost:3000を接続し起動してたらOK。

#Vue
コンポーネントをjavascriptへコンパイル

$ docker-compose run web bin/webpack

$ docker-compose exec web bash

コンテナの中に入り、コントローラーを作成

# rails g controller Page home

作成したらルーティングを設定

config/routes.rb

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

Viewに下記入力

views/page/home.html.erb

<%=javascript_pack_tag 'hello_vue'%>

localhost:3000をリロードして
Hello Vue!
と出てきたら完了。