GraphQLをRails, Reactで使うための第１歩として、RailsのAPIモードとReactをdocker-composeを使って同時に立ち上げられる環境を構築したのでその手順をメモしておきます

※このやり方で動くことは確認済みですが慣れておらず試行錯誤した部分もあるので効率的でない部分も多いかと思います。もしそのような箇所を発見したら指摘していただけると助かります

Railsをdocker-composeで立ち上げる

まずはAPIモードでRailsを立ち上げます

※筆者はこちらの記事の内容を参考にディレクトリ内にbundle installの内容を残す形で作成しています

Gemfile

source "http://rubygems.org"
gem "rails"

bundle install --path .bundle/
bundle exec rails new rails_test  --api --skip-bundle
mv rails_test/* .
rm -rf rails_test/
bundle install

この時点でrails sをするとRailsを起動することができます

※ちなみに画像にもありますが動作環境はRails 6.0.3, Ruby 2.7.1です

つづいてこのRailsをdockerで立ち上げられるようにします

docker-compose.yml

version: '3'

services:
  rails:
    build:
      context: .
      dockerfile: Docker_rails
    command: /bin/sh -c "cd app && rm -f /app/tmp/pids/server.pid && bundle install && bundle exec rails s -b 0.0.0.0"
    stdin_open: true
    tty: true
    volumes:
      - .:/app
    ports:
      - 3000:3000

Docker_rails

FROM ruby:2.7.1

これでsudo docker-compose up -dを行うとdockerでrails環境が立ち上がります

※docker-composeの実行は最初はsudoが必要です。sudoを外す方法はこちらの記事を参考にしてください

Reactをdocker-composeで立ち上げる

Reactも同じように作っていきます (同じディレクトリ内に作ります)

create-react-app frontend

Reactの一番簡単な構築はこれだけでできます

cd frontend
yarn start

で起動します

これもdocker-composeで起動できるようにします

先程のdocker-compose.ymlに追記します

docker-compose.yml

version: '3'

services:
  rails:
    build:
      context: .
      dockerfile: Docker_rails
    command: /bin/sh -c "cd app && rm -f /app/tmp/pids/server.pid && bundle install && bundle exec rails s -b 0.0.0.0"
    stdin_open: true
    tty: true
    volumes:
      - .:/app
    ports:
      - 3000:3000
    
  react:
    build:
      context: .
      dockerfile: Docker_react
    command: /bin/sh -c "cd frontend && yarn && yarn start"
    stdin_open: true
    tty: true
    volumes:
      - ./frontend:/frontend
    ports:
      - 4000:3000

Docker_react

FROM node:8.16.0-alpine

これでdocker-compose-up -dをすると

http://localhost:3000→Rails

http://localhost:4000→React

というようにRailsとReactを同時に立ち上げることができます

課題点

Railsを立ち上げるのに時間がかかる (毎回bundle installし直すのなんとかしたい)

Dockerfileが余計 (image取ってくる方法があるはず)

この辺は分かり次第追記していこうと思います