個人開発で使用できそうなRails API + React TypeScript + PostgreSQLのDocker環境の構築

2023年9月21日

こんにちは、鈴木です。

今回は、個人学習や個人開発で使用できそうなDocker環境の構築をしていきたいと思います。

メリット

個人的に考えるDockerの使用メリットを簡単に記載しておきます。

  • 一度テンプレートとして作成しておけば、流用可能
  • フロントエンドとバックエンドの開発を友人と分けたいときにバージョンをPCで設定する必要は基本的にない
  • 理解すればほかの環境を作ることもさほど難しくない
  • バージョンがずれることがない

ディレクトリ構成

構築といっても今回は、テスト的に作成したものを記載するのみなので、間違いがあるかもしれませんが、ご了承いただけると幸いです。今回のDocker環境のディレクトリ構成は下記のようになってます。

workdir
│ docker-compose.yml //手順1
│ install.bat        //手順6 （Windowsの場合）
│ install.command    //省略（macOSの場合）
│ ReadMe.md
│
├─backend            //railsの作業用ディレクトリ
├─docker
│ ├─postgres         //postgres環境構築用
│ │ database.yml     //手順4
│ │
│ ├─rails            //rails環境構築用
│ │ Dockerfile       //手順2
│ │ Gemfile          //手順3
│ │ Gemfile.lock
│ │
│ └─react            //react環境構築用
│ Dockerfile         //手順5
│
└─frontend           //reactの作業用ディレクトリ

手順1. docker-compose.yml

version: '3.8'
services:
  db:
    image: postgres
    volumes:
      - postgres_volume:/var/lib/postgresql/data
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: password
    ports:
      - '5432:5432'
    restart: always

  backend:
    build: ./docker/rails
    command: bundle exec rails s -p 3000 -b '0.0.0.0'
    tty: true
    stdin_open: true
    volumes:
      - ./backend:/backend
    ports:
      - '3000:3000'
    depends_on:
      - db
    restart: always

  frontend:
    build: ./docker/react
    environment:
      - NODE_ENV=development
      - CHOKIDAR_USEPOLLING=true
    volumes:
      - ./:/usr/src/app
    command: sh -c 'cd frontend && yarn start'
    ports:
      - '8000:3000'
    tty: true

volumes:
  postgres_volume:
    external: true

手順2. Rails Dockerfile

FROM ruby:3.1.3
RUN apt-get update -qq && apt-get install -y nodejs postgresql-client
RUN mkdir backend
WORKDIR /backend
ADD Gemfile /backend/Gemfile
ADD Gemfile.lock /backend/Gemfile.lock
RUN bundle install
ADD . /backend

手順3. Rails Gemfile

source 'https://rubygems.org'
gem 'rails', '7.0.4'
gem 'pg', '1.4.5'
gem 'puma', '5.6.5'
gem 'bootsnap','1.15.0'
gem 'msgpack','1.6.0'

Gemfile.lockはファイルを作成するのみで中身は空白です。

手順4.Postgres database.yml

default: &default
  adapter: postgresql
  encoding: unicode
  host: db
  username: postgres
  password: password
  pool: 5

development:
  <<: *default
  database: backend_development

test:
  <<: *default
  database: backend_test

手順5. react Dockerfile

FROM node:14.17.5

ENV LANG=C.UTF-8
ENV TZ=Asia/Tokyo

WORKDIR /usr/src/app

手順6.install.bat

※Mac環境のinstall.commandをまだ作成していないためWindows環境のみとなります。

docker volume create --name postgres_volume
docker-compose run backend rails new . --api --force --no-deps --database=postgresql --skip-bundle
COPY docker\postgres\database.yml backend\config\database.yml
docker-compose build
docker-compose run --rm frontend sh -c "npx create-react-app frontend --template typescript"
docker-compose up -d
docker-compose run backend rails db:create