Dockerでフロントエンド(React)+バックエンド(TypeScript)+DB（MySQL）の開発環境を構築してみた

root
┣ index.html
┣ Dockerfile
┗ docker-compose.yml

# ベースとなるイメージを指定
# nginxが提供している最新バージョンのイメージを指定している
FROM nginx:latest

# 作業を行うディレクトリを指定
# nginxのイメージはこのディレクトリで色々作業するらしい
WORKDIR /usr/share/nginx

# ローカルのindex.htmlを/usr/share/nginx/html配下にコピーする
COPY ./index.html ./html

# Dockerfileから`nginx-sample-image`という名前でイメージをビルド
docker image build ./ -t nginx-sample-image

# nginx-sample-imageから`nginx-sample`という名前でコンテナを実行する
# -p 8080:80でホストPCの8080ポートとコンテナ上の80ポートを紐づけ（ポートフォワード）
docker run --name nginx-sample -p 8080:80 nginx-sample-image

# docker-composeファイルのバージョン
version: '3'

# アプリケーションを構成するサービスの設定
services:
  web:
    # Dockerビルドの設定
    build: 
      context: .
      dockerfile: ./Dockerfile
    # サービスで使用するポートを指定する
    ports:
      - 8080:80

# docker-composeでDockerイメージをビルドする
docker-compose build

# Dockerコンテナを実行する
docker-compose up

root
┣ frontend
┗ backend

# frontendのひな型を作成
cd frontend

npx create-react-app . --template typescript

# ローカルに不要なnode_modulesを消す
rm -r node_modules

# backendのひな型を作成
cd backend

npm init -y

# 必要なパッケージをインストール
npm i -D typescript nodemon ts-node

npx tsc --init

mkdir src

touch src/index.ts

touch nodemon.json

# ローカルに不要なnode_modulesを消す
rm -r node_modules

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "rootDir": "./src",
    "outDir": "./dist",
    "strict": true,
    "skipLibCheck": true
  }
}

{
  "name": "backend",
  "version": "1.0.0",
  "description": "",
  "devDependencies": {
    "nodemon": "^3.0.1",
    "ts-node": "^10.9.1",
    "typescript": "^5.2.2"
  },
  "scripts": {
    "dev": "npx nodemon"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

{
    "watch": ["src"],
    "ext": "ts",
    "exec": "npx ts-node ./src/index.ts"
}

{
    "name": "Frontend",
    "dockerComposeFile": ["../docker-compose.yml"],
    "service": "frontend",
    "shutdownAction": "none",
    "workspaceFolder": "/workspace/frontend"
}

{
    "name": "Backend",
    "dockerComposeFile": ["../docker-compose.yml"],
    "service": "backend",
    "shutdownAction": "none",
    "workspaceFolder": "/workspace/backend"
}

root
┣ frontend
┃  ┣ src
┃  ┣ public
┃  ┣ package.json
┃  ┣ tsconfig.json
┃  ┗ .devcontainer.json
┣ backend
┃  ┣ src
┃  ┣ nodemon.json
┃  ┣ package.json
┃  ┣ tsconfig.json
┃  ┗ .devcontainer.json
┗ docker
   ┣ frontend.Dockerfile
   ┣ backend.Dockerfile
   ┗ db.Dockerfile

FROM node:20

WORKDIR /workspace/frontend

COPY ../frontend/ ./

RUN npm install

# コンテナ起動時に実行するコマンド
CMD [ "npm", "start" ]

FROM node:20

WORKDIR /workspace/backend

COPY ../backend/ ./

RUN npm install

# コンテナ起動時に実行するコマンド
CMD ["npm", "run", "dev"]

FROM mysql:latest

version: '3'

services:
  # frontendの設定
  frontend:
    container_name: docker-sample-frontend
    build: 
      context: .
      dockerfile: ./docker/frontend.Dockerfile
    environment:
      # Reactのホットリロードを有効化するための設定
      - WATCHPACK_POLLING=true
    volumes:
      # ルートディレクトリ配下をworkspace配下にマウントする
      - .:/workspace:cached
      # node_modulesは別ボリュームでマウントする
      - frontend_node_modules:/workspace/frontend/node_modules
    ports:
      - '8080:3000'
  # backendの設定
  backend:
    container_name: docker-sample-backend
    build:
      context: .
      dockerfile: ./docker/backend.Dockerfile
    environment:
      # nodemonでホットリロードを有効化するための設定
      - CHOKIDAR_USEPOLLING=true
    volumes:
      # ルートディレクトリ配下をworkspace配下にマウントする
      - .:/workspace:cached
      # node_modulesは別ボリュームでマウントする
      - backend_node_modules:/workspace/backend/node_modules
    ports:
      - '3000:3000'
  # dbの設定
  db:
    container_name: docker-sample-mysql
    build:
      context: .
      dockerfile: ./docker/db.Dockerfile
    ports:
      - '3306:3306'
    environment:
      MYSQL_ROOT_PASSWORD: mysql
      MYSQL_USER: user
      MYSQL_PASSWORD: password
      TZ: Asia/Tokyo
    volumes:
      # MySQLのデータをボリュームにマウントする
      - db-store:/var/lib/mysql

# ボリュームの設定、実行時に作ってくれる
volumes:
  frontend_node_modules: 
  backend_node_modules:
  db-store:

root
┣ frontend
┃  ┣ src
┃  ┣ public
┃  ┣ package.json
┃  ┣ tsconfig.json
┃  ┗ .devcontainer.json
┣ backend
┃  ┣ src
┃  ┣ nodemon.json
┃  ┣ package.json
┃  ┣ tsconfig.json
┃  ┗ .devcontainer.json
┣ docker
┃  ┣ frontend.Dockerfile
┃  ┣ backend.Dockerfile
┃  ┗ db.Dockerfile
┗ docker-compose.yml