[初心者log]Rails6(API) + React(Typesctipt) + Docker で環境構築

#本記事の目的
Dockerを用いてRails6(APIのみ)、React（Typectipt）の環境構築を行なっていきます。
最初はRails7で行おうとしたのですが、デフォルトで導入されるTurboがなかなか厄介なようなので、Rails6で環境を作っていきます。

#環境構築手順
##1.作業フォルダにて必要なファイルを作成

$ mkdir myapp
$ cd myapp
$ mkdir api
$ touch api/Dockerfile
$ touch api/entrypoint.sh
$ touch api/Gemfile
$ touch api/Gemfile.lock
$ mkdir front
$ touch frpmt/Dockerfile
$ touch docker-compose.yml

##2.docker-compose.ymlの記述

docker-compose.yml

version: "3"
services:
  db:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: password
    command: --default-authentication-plugin=mysql_native_password
    volumes:
      - mysql-data:/var/lib/mysql
    ports:
      - 3361:3361
  api:
    build:
      context: ./api/
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3003 -b '0.0.0.0'"
    volumes:
      - ./api:/myapp
      - ./api/vendor/bundle:/myapp/vendor/bundle
    environment:
      TZ: Asia/Tokyo
      RAILS_ENV: development
    ports:
      - "3003:3003"
    depends_on:
      - db
  front:
    build:
      context: ./front/
      dockerfile: Dockerfile
    volumes:
      - ./front:/usr/src/app
    environment:
      - WDS_SOCKET_HOST=0.0.0.0　#Websocketのエラーがあったので追記
      - WDS_SOCKET_PORT=0　　　　　　　　　　　　　#エラーがなければ書かなくていいと思います！
    command: sh -c "cd app && yarn start"
    ports:
      - "4000:3000"
volumes:
  mysql-data:

　　　　

##3.API側の記述

api/Dockerfile

FROM ruby:3.0

RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs

ENV APP_PATH /myapp

RUN mkdir $APP_PATH
WORKDIR $APP_PATH

COPY Gemfile $APP_PATH/Gemfile
COPY Gemfile.lock $APP_PATH/Gemfile.lock
RUN bundle install

COPY . $APP_PATH

COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3003

CMD ["rails", "server", "-b", "0.0.0.0"]

api/entrypoint.sh

#!/bin/bash
set -e

# railsのpidが存在している場合に削除する」処理
rm -f /aiueo/tmp/pids/server.pid

# DockerfileのCMDで渡されたコマンド（→Railsのサーバー起動）を実行
exec "$@"

api/Gemfile

# frozen_string_literal: true

source "https://rubygems.org"

git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }

gem "rails", "6.1.4.1"

api/Gemfile.lock

# 空のまま

##4.front側の記述

front/Dockerfile

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

##5.起動してみる

$ docker-compose run api rails new . --force --no-deps -d mysql --api --skip-test
$ docker-compose build

####database.ymlの書き換え

api/app/config/database.yml

default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: password　#←追記
  host: db　#←変更

development:
  <<: *default
  database: myapp_development
test:
  <<: *default
  database: myapp_test

production:
  <<: *default
  database: myapp_production
  username: myapp
  password: <%= ENV['MYAPP_DATABASE_PASSWORD'] %>

####Reactアプリケーションを作成

$ docker-compose run front yarn create react-app app --template typescript

####DBの作成とコンテナの起動

$ docker-compose run api rails db:create
$ docker-compose run api rails db:migrate
$ docker-compose up

以上になります！