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

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

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

## 環境
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
```

```Dockerfile: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

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

```ruby: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アプリ作成
```sh:ターミナル
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

```ruby:Gemfile
gem 'net-smtp', require: false
```
その後、docker-compose buildを実行します。
```sh:ターミナル
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　# ここを修正
```
その後、データベース作成します。

```sh:ターミナル
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'
```

```Dockerfile: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実行
```sh:ターミナル
docker-compose build
```

#### 2-3. reactアプリ作成
```sh:ターミナル
docker-compose run --rm frontend ash -c "yarn create react-app app"
```
コマンド参考：https://create-react-app.dev/docs/getting-started/

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

## 3. Dockerコンテナ立ち上げ
```sh:ターミナル
docker-compose up -d # バックグラウンドで実行
```

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

以上です。