RailsとReactのDocker環境を作ってみる

Rails環境を作る

Dockerfile

リポジトリのトップにbackendディレクトリを作成。
backendディレクトリにDockerfileを作成。

Dockerfile

FROM ruby:3.1

WORKDIR /app

dockerをビルド。

docker build .

docker経由でrailsアプリケーションを作成。
Dockerfileがコンフリクト起こすけど、上書きはしない。
{imageId}はビルドしたイメージのID。

docker run -it -v $(pwd):/app {imageId} bash -c "cd .. && gem install rails && rails new app -d postgresql --api"

Dockerfileを書き換える。

Dockerfile

FROM ruby:3.1

WORKDIR /app

COPY Gemfile /app/Gemfile
COPY Gemfile.lock /app/Gemfile.lock

RUN bundle install

docker-compose.yaml

リポジトリのトップにdocker-compose.yamlを作成。

docker-compose.yaml

version: "3"
services:
  backend:
    build: ./backend
    volumes:
      - ./backend:/app
    command: /bin/sh -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    ports:
      - "3000:3000"

React環境を作る

Dockerfile

リポジトリのトップにDockerfileを作成。

Dockerfile

FROM node:18.12.1-alpine

WORKDIR /app

dockerをビルド。

docker build .

docker経由でreactアプリケーションを作成。
{imageId}はビルドしたイメージのID。

docker run -it -v $(pwd)/frontend:/app {imageId} ash -c "cd .. && npx -y create-react-app app"

リポジトリのトップのDockerfileをfrontendディレクトリに移動。

docker-compose.yaml

docker-compose.yamlを修正。

docker-compose.yaml

version: "3"
services:
  backend:
    build: ./backend
    volumes:
      - ./backend:/app
    command: /bin/sh -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    ports:
      - "3000:3000"

  frontend:
    build: ./frontend
    volumes:
      - ./frontend:/app
    command: ash -c "npm start"
    ports:
      - "3001:3000"
    depends_on:
      - backend

DBコンテナを作る

docker-compose.yaml

docker-compose.yamlを修正。

docker-compose.yaml

version: "3"
services:
  backend:
    build: ./backend
    volumes:
      - ./backend:/app
    command: /bin/sh -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    ports:
      - "3000:3000"

  frontend:
    build: ./frontend
    volumes:
      - ./frontend:/app
    command: ash -c "npm start"
    ports:
      - "3001:3000"
    depends_on:
      - backend

  db:
    image: postgres
    volumes:
      - dbdata:/var/lib/postgresql/data
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres

volumes:
  dbdata: