DockerでRuby on Rails + Reactを別々にアプリ作成する環境構築手順

#やったこと
Dockerを用いてAPIモードのRails（バックエンド）とReact（フロントエンド）を作成する開発環境の構築を行った。

#1, 各種ファイルの用意
プロジェクト用のフォルダを用意して、Rails側のapiフォルダとReact側のfrontフォルダに分ける。
プロジェクト用フォルダの直下に、docker-compose.ymlを置く。

###docker-compose.ymlの記述
この記事（ https://qiita.com/takano-h/items/84ae73b41eef83602bd9 ）を参考に記述。

docker-compose.yml

version: '3'

services:
  db:
    image: postgres
    volumes:
      - postgres-data:/var/lib/postgresql/data
  api:
    build: 
      context: ./api/
      dockerfile: Dockerfile
    command: /bin/sh -c "rm -f /myapp/tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    image: rails:dev
    volumes:
      - ./api:/myapp
      - ./api/vendor/bundle:/myapp/vendor/bundle
    environment:
      TZ: Asia/Tokyo
      RAILS_ENV: development
    ports:
      - 3000:3000
    depends_on:
      - db
  front:
    build: 
      context: ./front/
      dockerfile: Dockerfile
    volumes:
      - ./front:/usr/src/app
    command: sh -c "cd react-sample && yarn start"
    ports:
      - "8000:3000"
volumes:
  postgres-data:
    driver: local

RailsとReactでDockerfileを別々に用意したので、buildの部分でdockerfileの場所を指定したのがポイント。

docker-compose.yml

  api:
    build: 
      context: ./api/
      dockerfile: Dockerfile

  front:
    build: 
      context: ./front/
      dockerfile: Dockerfile

###Rails用のファイルの用意
docker-compose.ymlの他に必要なファイルは次の4つ。
・ Dockerfile: react_rails_app/api/

FROM ruby:2.5
RUN apt-get update -qq && apt-get install -y nodejs postgresql-client
RUN mkdir /myapp
WORKDIR /myapp
COPY Gemfile /myapp/Gemfile
COPY Gemfile.lock /myapp/Gemfile.lock
RUN bundle install
COPY . /myapp

# Add a script to be executed every time the container starts.
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000

# Start the main process.
CMD ["rails", "server", "-b", "0.0.0.0"]

・ Gemfile

source 'https://rubygems.org'
gem 'rails', '~>5'

・ Gemfile.lock: これは空ファイルを用意。
・ entrypoint.sh

entrypoint.sh

#!/bin/bash
set -e

# Remove a potentially pre-existing server.pid for Rails.
rm -f /myapp/tmp/pids/server.pid

# Then exec the container's main process (what's set as CMD in the Dockerfile).
exec "$@"

###React用のファイルの用意
・Dockerfile

FROM node:8.16.0-alpine  
WORKDIR /usr/src/app

#2, コマンドの実行
Rails: docker公式サイト( https://docs.docker.com/compose/rails/ )の実施手順を参考にした。
React: create-react-appを用いて環境構築（参考記事: https://blog.web.nifty.com/engineer/2714 ）

project-folder $ docker-compose run api rails new . --force --no-deps --database=postgresql --api
project-folder $ docker-compose build
project-folder $ docker-compose run --rm front sh -c "npm install -g create-react-app && create-react-app react-sample"

api/config/database.ymlの書き換え

api/config/database.yml

default: &default
  adapter: postgresql
  encoding: unicode
  host: db
  username: postgres
  password:
  pool: 5

development:
  <<: *default
  database: myapp_development #<-複数環境立ち上げの際は、名前を変えないといけない


test:
  <<: *default
  database: myapp_test  #<-複数環境立ち上げの際は、名前を変えないといけない

project-folder $ docker-compose up
project-folder $ docker-compose run api rake db:create

これで環境構築完了。
###Rails: localhost:3000

###React: localhost:8000

#追記（2020.02.02）
###環境をコピーしたくなったとき
1, プロジェクトのディレクトリごとコピー
2, （api/config/database.yml）databaseの名前を変える
3, コマンド実行

docker-compose build --no-cache
docker-compose run api rake db:create 
docker-compose run api rake db:migrate

#参考記事
https://qiita.com/daichi41/items/dfea6195cbb7b24f3419#docker-composeyml
https://qiita.com/takano-h/items/84ae73b41eef83602bd9