DockerでRails API+React+PostgreSQLの環境構築メモ

目的

前回はDocker上でRails API＋PostgreSQLの環境構築を行ったので、今回はその続きでReactでのフロントエンドもdocker-composeに追加しました。

コードはGithubで公開しています。
https://github.com/NorihitoN/rails5-react-docker-boilerplate

環境

Laptop: Windows 10 Pro
Docker: Docker for Windows

方針

• Ruby on Railsではバックエンド用に--apiで構築。localhost:3000で立ち上げる。
• データベースはPostgreSQLを使用。
• フロントエンドはReactを使用し、localhost:8000で立ち上げる。
• これら3つのコンテナを作り、docker-composeでビルドする。

構成

初期のファイル構成です。ローカル環境にprojectappフォルダ、その中にサーバーサイド用のフォルダapiとフロントサイド用のフォルダfrontを作ります。apiについては前回記事の内容が完了しているものとします。

projectapp
|-- docker-compose.yml　<-- 今回
|-- api
|-- front <-- 今回

Reactによるサーバ構築

Reactでフロントエンド側のサーバ構築のためのDockerfileを作ります。
projectappの直下に保存してビルドします。（注：frontに保存しなかった理由は、後にdocker-composeでfrontにフロントエンドサーバをマウントして、create-react-appした際に、Dockerfileがfrontにあるとエラーになりました。create-react-appの後にDockerfileをprojectapp/frontに移動しました。）

FROM node:10-alpine
RUN mkdir /myapp
WORKDIR /myap

Dokerfileをビルドして、コンテナを作成します。

$docker build

次に、docker-compose.ymlにフロントエンドサイドの情報を追加します。

version: '3'
services:
  api:
    build: ./api
    ports:
      - '3000:3000'
    command: /bin/sh -c "rm -f /myapp/tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'" 
    volumes:
      - ./api:/myapp
    depends_on:
      - db
  db:
    image: postgres
    volumes:
      - dbdata:/var/lib/postgresql/data
    ports: 
      - '5432:5432'

  front:
    build: ./front
    command: yarn start
    ports:
      - '8000:3000'
    volumes:
      - ./front:/myapp
    depends_on:
      - api

volumes:
  dbdata:

コンテナにcreate-react-appをインストールして実行します。

docker-compose run front sh -c “npm install -g create-react-app && create-react-app front"

docker-composeでビルドし直します。

# コンテナをビルド
$ docker-compose build

# コンテナの作成＆起動（バックグラウンド）
$ docker-compose up -d

localhost:8000に接続できます。

正常に起動していたら3つのコンテナが動作していることがわかります。

$docker-compose ps

           Name                         Command               State           Ports
--------------------------------------------------------------------------------------------
projectapp_api_1                /bin/sh -c rm -f /myapp/tm ...   Up      0.0.0.0:3000->3000/tcp
projectapp_db_1                 docker-entrypoint.sh postgres    Up      0.0.0.0:5432->5432/tcp
projectapp_front_1              docker-entrypoint.sh yarn  ...   Up      0.0.0.0:8000->3000/tcp

まとめ

最後のフォルダ構成は以下のようになります。
boilerplateをgithubに保存しました。
https://github.com/NorihitoN/rails5-react-docker-boilerplate

projectapp
|-- docker-compose.yml
|-- api
    |-- app
    |-- bin
    |-- config
    |-- db
    |-- lib
    |-- log
    |-- public
    |-- test
    |-- tmp
    |-- vender
    |-- .gitignore
    |-- config.ru
    |-- Gemfile
    |-- Gemfile.lock
    |-- Dockerfile
    |-- Rakefile
    |-- README.md
    |-- Gemfile
    |-- Gemfile.lock
    |-- Dockerfile
|-- front
    |-- node_modules
    |-- public
    |-- src
    |-- .gitgnore
    |-- package-lock.json
    |-- package.json
    |-- Dockerfile
    |-- README.md