Docker + React + Rails6 APIの開発環境構築メモ

はじめに

標記の環境構築を初めて実施したので備忘録として記録します。

参考にさせていただいた記事、教材
https://qiita.com/taki_21/items/613f6a00bc432d1c221d
https://qiita.com/asami___t/items/256f76c3c8a9bd5d0732
Dockerを利用した開発環境の構築方法を学ぼう！
Docker公式docs

環境

macOS Monterey 12.3.1
Docker version 20.10.13
docker-compose version 1.29.2

0. ファイル構成

以下の通りディレクトリ、ファイルを作成する。（中身はまだ空）

myapp/
┣ backend/
┃ ┣ Dockerfile
┃ ┣ entrypoint.sh
┃ ┣ Gemfile
┃ ┗ Gemfile.lock
┣ frontend/
┃ ┗ Dockerfile
┗ docker-compose.yml

親ディレクトリ(myapp)をGithubリポジトリと連携させるならこの時点でpushした方が良さそうです。
rails new後にgit addするとbackendフォルダ下に.gitが存在するのでエラー発生しました。
参考：https://qiita.com/kazumawada/items/db5525a503881e692b2c

1. Rails APIの環境構築

1-1. 各ファイルの中身を作成

docker-compose.yml

version: '3.8' # 最新バージョン
volumes:
  mysql-data:

services:
  db:
    image: mysql:8.0.29 # 最新バージョン
    volumes:
      - mysql-data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: password
    ports:
      - '3306:3306'

  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile
    command: bash -c "rm -f /myapp/tmp/pids/server.pid && bundle exec rails s -b '0.0.0.0'"
    volumes:
      - ./backend:/myapp
      - ./backend/vendor/bundle:/myapp/vendor/bundle
    environment:
      TZ: Asia/Tokyo
      RAILS_ENV: development
    ports:
      - '3001:3000'
    depends_on:
      - db

backend/Dockerfile

FROM ruby:3.1.2

RUN apt-get update -qq && \
  apt-get install -y build-essential libpq-dev node.js

RUN mkdir /myapp

ENV APP_ROOT /myapp
WORKDIR $APP_ROOT

COPY Gemfile $APP_ROOT/Gemfile
COPY Gemfile.lock $APP_ROOT/Gemfile.lock

RUN bundle install
COPY . $APP_ROOT

COPY entrypoint.sh /usr/bin
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT [ "entrypoint.sh" ]
EXPOSE 3000

CMD ["rails", "server", "-b", "0.0.0.0"]

ちなみにここの記述はADDよりもCOPYが推奨のようです。
参考：https://qiita.com/momotaro98/items/bf34eef176cc2bdb6892

Gemfile

source 'https://rubygems.org'
gem 'rails', '6.1.6' # Rails6を使用

Gemfile.lock

# 空のまま

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 "$@"

1-2. railsアプリ作成

ターミナル

docker-compose run --no-deps backend rails new . --force -d mysql --api

1-3. docker-compose build実行

データベース作成時にnet-smtpが無いとエラーが発生したので、先にGemfileに追加しておきます。（Rubyのバージョンに寄ると思います）
参考：https://stackoverflow.com/questions/70500220/rails-7-ruby-3-1-loaderror-cannot-load-such-file-net-smtp

Gemfile

gem 'net-smtp', require: false

その後、docker-compose buildを実行します。

ターミナル

docker-compose build

1-4. データベース作成

先にdatabase.ymlファイルを修正します。

backend/config/database.yml

default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: password # ここを修正
  host: db　# ここを修正

その後、データベース作成します。

ターミナル

docker-compose run backend rails db:create

2. Reactの環境構築

2-1. 各ファイルの中身を作成

docker-compose.yml

version: '3.8'
volumes:
  mysql-data:

services:
  db:
    image: mysql:8.0.29
    volumes:
      - mysql-data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: password
    ports:
      - '3306:3306'

  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile
    command: bash -c "rm -f /divwork/tmp/pids/server.pid && bundle exec rails s -b '0.0.0.0'"
    volumes:
      - ./backend:/myapp
      - ./backend/vendor/bundle:/myapp/vendor/bundle
    environment:
      TZ: Asia/Tokyo
      RAILS_ENV: development
    ports:
      - '300１:3000'
    depends_on:
      - db

# 追記
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    command: bash -c "cd app && yarn start"
    volumes:
      - ./frontend:/usr/src/app
    ports:
      - '3000:3000'

frontend/Dockerfile

FROM node:18.7.0-slim
WORKDIR /usr/src/app

※下記記事を参照し、Node imageをslimに変更しました。
参考: https://zenn.dev/jrsyo/articles/e42de409e62f5d

ローカルのポート番号はReact側を3000以外に設定するとWebsocketのエラー
WebSocket connection to 'ws://localhost:3000/ws' failed:
が発生したので、React側を3000、Railsを3001にしました。
参考：https://qiita.com/ryouzi/items/c8c3fa4a5e16e6710d6c

2-2. docker-compose build実行

ターミナル

docker-compose build

2-3. reactアプリ作成

ターミナル

docker-compose run --rm frontend ash -c "yarn create react-app app"

コマンド参考：https://create-react-app.dev/docs/getting-started/

実行するとfrontend/appディレクトリ以下に初期アプリが作成されました。

3. Dockerコンテナ立ち上げ

ターミナル

docker-compose up -d # バックグラウンドで実行

ポートに指定したlocalhost:3000, localhost:3001にアクセスするとRails, Reactの初期ページが無事に表示されました。

以上です。