【Docker】Rails API + Reactの環境構築

はじめに

　本記事は、プログラミング初学者、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

DockerでReactの開発環境を構築する方法

Docker-compose.yml

docker-compose.yml

version: '3.9'
 
services:
  db:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: passwordadmin
      MYSQL_DATABASE: mydb
      MYSQL_USER: root
      MYSQL_PASSWORD: passwordadmin
      TZ: 'Asia/Tokyo'
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    volumes:
      - ./docker/db/data:/var/lib/mysql
      - ./docker/db/my.cnf:/etc/mysql/conf.d/my.cnf
      - ./docker/db/sql:/docker-entrypoint-initdb.d
    ports:
      - 3306:3306
  api:
    build: 
      context: ./api/
      dockerfile: Dockerfile
    command: /bin/sh -c "rm -f /myapi/tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    image: rails:dev
    volumes:
      - ./api:/myapi
      - ./api/vendor/bundle:/myapi/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 reactapp && yarn start"
    ports:
      - "8000:3000"
volumes:
  mysql_data:
    driver: local

Rails側のDockerfile

Dockerfile

FROM ruby:2.7.1
 
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
    && echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list
 
RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs yarn
 
RUN mkdir /myapi
WORKDIR /myapi
COPY Gemfile /myapi/Gemfile
COPY Gemfile.lock /myapi/Gemfile.lock
RUN bundle install
COPY . /myapi
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000
 
CMD ["rails", "server", "-b", "0.0.0.0"]

entrypoint.sh

#!/bin/bash
set -e
 
# Remove a potentially pre-existing server.pid for Rails.
rm -f /myapi/tmp/pids/server.pid
 
# Then exec the container's main process (what's set as CMD in the Dockerfile).
exec "$@"

Gemfile

source 'https://rubygems.org'
gem "rails", "6.0.2.1"

React側

Dockerfile

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