LoginSignup
6
4

More than 3 years have passed since last update.

RailsとReactをdocker-composeを使って立ち上げる

Last updated at Posted at 2020-05-16

GraphQLをRails, Reactで使うための第1歩として、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起動画面.png

※ちなみに画像にもありますが動作環境は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

で起動します

react起動画面.png

これも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取ってくる方法があるはず)

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

6
4
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
4