LoginSignup
66

More than 3 years have passed since last update.

DockerでRuby on Rails + Reactを別々にアプリ作成する環境構築手順

Last updated at Posted at 2020-01-07

やったこと

Dockerを用いてAPIモードのRails(バックエンド)とReact(フロントエンド)を作成する開発環境の構築を行った。

1, 各種ファイルの用意

プロジェクト用のフォルダを用意して、Rails側のapiフォルダとReact側のfrontフォルダに分ける。
プロジェクト用フォルダの直下に、docker-compose.ymlを置く。
スクリーンショット 2020-01-08 6.30.09.png

docker-compose.ymlの記述

この記事( https://qiita.com/takano-h/items/84ae73b41eef83602bd9 )を参考に記述。

docker-compose.yml
version: '3'

services:
  db:
    image: postgres
    volumes:
      - postgres-data:/var/lib/postgresql/data
  api:
    build: 
      context: ./api/
      dockerfile: Dockerfile
    command: /bin/sh -c "rm -f /myapp/tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    image: rails:dev
    volumes:
      - ./api:/myapp
      - ./api/vendor/bundle:/myapp/vendor/bundle
    environment:
      TZ: Asia/Tokyo
      RAILS_ENV: development
    ports:
      - 3000:3000
    depends_on:
      - db
  front:
    build: 
      context: ./front/
      dockerfile: Dockerfile
    volumes:
      - ./front:/usr/src/app
    command: sh -c "cd react-sample && yarn start"
    ports:
      - "8000:3000"
volumes:
  postgres-data:
    driver: local

RailsとReactでDockerfileを別々に用意したので、buildの部分でdockerfileの場所を指定したのがポイント。

docker-compose.yml
  api:
    build: 
      context: ./api/
      dockerfile: Dockerfile

  front:
    build: 
      context: ./front/
      dockerfile: Dockerfile

Rails用のファイルの用意

docker-compose.ymlの他に必要なファイルは次の4つ。
・ Dockerfile: react_rails_app/api/

FROM ruby:2.5
RUN apt-get update -qq && apt-get install -y nodejs postgresql-client
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"]

・ Gemfile

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

・ Gemfile.lock: これは空ファイルを用意。
・ entrypoint.sh

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

React用のファイルの用意

・Dockerfile

FROM node:8.16.0-alpine  
WORKDIR /usr/src/app

2, コマンドの実行

Rails: docker公式サイト( https://docs.docker.com/compose/rails/ )の実施手順を参考にした。
React: create-react-appを用いて環境構築(参考記事: https://blog.web.nifty.com/engineer/2714

project-folder $ docker-compose run api rails new . --force --no-deps --database=postgresql --api
project-folder $ docker-compose build
project-folder $ docker-compose run --rm front sh -c "npm install -g create-react-app && create-react-app react-sample"

api/config/database.ymlの書き換え

api/config/database.yml
default: &default
  adapter: postgresql
  encoding: unicode
  host: db
  username: postgres
  password:
  pool: 5

development:
  <<: *default
  database: myapp_development #<-複数環境立ち上げの際は、名前を変えないといけない


test:
  <<: *default
  database: myapp_test  #<-複数環境立ち上げの際は、名前を変えないといけない
project-folder $ docker-compose up
project-folder $ docker-compose run api rake db:create

これで環境構築完了。

Rails: localhost:3000

スクリーンショット 2020-01-08 6.58.02.png

React: localhost:8000

スクリーンショット 2020-01-08 6.58.18.png

追記(2020.02.02)

環境をコピーしたくなったとき

1, プロジェクトのディレクトリごとコピー
2, (api/config/database.yml)databaseの名前を変える
3, コマンド実行

docker-compose build --no-cache
docker-compose run api rake db:create 
docker-compose run api rake db:migrate

参考記事

https://qiita.com/daichi41/items/dfea6195cbb7b24f3419#docker-composeyml
https://qiita.com/takano-h/items/84ae73b41eef83602bd9

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
66