【Docker】Rails&React開発環境レシピ

以前、使っていたRails&React用のDocker一式を最新化したので、その開発環境立ち上げ手順を備忘録として残します。

最初にこのDocker一式を作ったのは今年の2月くらいだったと思いますが、最近新しい環境として立ち上げる際に、バージョン非互換とかでエラーが出るようになったので、バージョンを最新化しました。
・Ruby　2.7.5→2.7.6
・(api)Nodeを最新状態で取得するように変更
・(front)Node　16.10.0→18.12.0　※非互換で16.10.0か18以上の警告とエラーが発生したため

前は問題なかったDockerfileでもバージョンを固定化した書き方をしていなかったり、依存関係のあるパッケージ側でサポートしなくなったりするので、適宜改変は必要なんだなぁというのが感想です。

前提

端末：Macbook air M1

仮想環境：
・Ruby on Rails（Ruby 2.7.6、Rails 6）
・PostgreSQL
・React

準備ファイル

フォルダ／ファイル構成

rails-react/
├ docker-compose.yml
├ Dockerfile　　※React
└ api/
　 ├ Dockerfile　　※Ruby on Rails
　 ├ entrypoint.sh
　 ├ Gemfile
　 └ Gemfile.lock

基本仕様

• 端末ローカルにapi、front、dbとフォルダを作り、それぞれにマウントすることで、各ソースファイルやDBファイルは物理的に保持する（永続）
• apiはProt3000で接続可能
• frontはPort3001で接続可能
• DBはPort5432で接続可能

各ファイル

docker-compose.yml

version: '3'
services:
  db:
    image: postgres
    volumes:
      - ./db:/var/lib/postgresql/data
    ports:
      - 5432:5432
    environment:
      POSTGRES_PASSWORD: {password}
  api:
    build:
      context: ./api/
      dockerfile: Dockerfile
    command: bash -c "rm -f /myapp/tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - ./api:/myapp
      - ./api/vendor/bundle:/myapp/vendor/bundle
    environment:
      TZ: Asia/Tokyo
      RAILS_ENV: development
    ports:
      - 3000:3000
    depends_on:
      - db
  front:
    build:
      dockerfile: ./Dockerfile
    volumes:
      - ./front:/src/front
    command: sh -c "PORT=3001 yarn start"
    ports:
      - 3001:3001
    stdin_open: true

Dockerfile　※React

FROM node:18.12.0-alpine
WORKDIR /src/front

Dockerfile　※Ruby on Rails

FROM ruby:2.7.6

#postgresql
RUN apt-get update -qq && apt-get install -y postgresql-client

#nodejs(LTS)
RUN curl -fsSL https://deb.nodesource.com/setup_lts.x | bash - && apt-get install -y nodejs

#yarn
RUN npm install --global yarn

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"]

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

Gemfile

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

Gemfile.lock

空ファイル

手順

１．インストール関係

ターミナルを起動して実施

// 「rails-react」フォルダで以下を実行

// apiディレクトリにRailsを出力
docker-compose run --no-deps api rails new . --force -BCTM --api -d postgresql --skip-active-storage

// イメージ作成（Railsの初回bundle install）
docker-compose build

// React関連の使用するパッケージをインストール（今回はreact + react-router-dom + axios）
docker-compose run --rm front sh -c "npm install -g create-react-app && create-react-app . && yarn add react-router-dom axios axios-case-converter"

２．apiのDB接続情報を記述

VSCode等のエディタを使って実施。
api配下のconfig/database.ymlに、DB接続情報を記述して保存。

// 最低限の記述としては以下の通り
host: db　　← docker-composeのサービス名
username: postgres　　← 今回の例ではデフォルト
password: {password}  ← docker-compose.ymlに合わせる

３．DB作成

まずは上記１のターミナルを継続使用して実行

// コンテナ起動（dbのコンテナを起動する意図）
docker-compose up

上記ターミナルは実行中の状態になるので、別にターミナルを起動して以下を実行

//「rails-react」フォルダで以下を実行
// DB作成（railsを使ってDB作成）
docker-compose run api rake db:create

４．dockerの終了と開始

dockerを終了する際は、Ctrl+Cで処理中を解除して、以下のコマンドを実行

// 「rails-react」フォルダで以下を実行
// コンテナ停止
docker-compose stop

// コンテナ削除
docker-compose down

dockerを開始する際は以下のコマンドを実行

// 「rails-react」フォルダで以下を実行
// コンテナ起動
docker-compose up

５．起動確認

dockerを開始して、それぞれの起動確認。

（１）apiのrailsの起動確認

ブラウザを起動して、http://localhost:3000/に接続して、以下の画面が表示されればOK

（２）frontのreactの起動確認

ブラウザを起動して、http://localhost:3001/に接続して、以下の画面が表示されればOK

最後に

以上で、RailsとReactのプログラミング環境が揃いました。
あとはVSCodeなどで、それぞれのマウントしているフォルダでプログラミングすれば機能を確認しながら効率の良い開発ができると思います。

おわり