6/24 DockerでReactを動かしてみる

DockerとDocker Composeのインストール

DockerとDocker Composeを使用するために、まずはこれらのツールをあなたのマシンにインストールします。これらのツールはDockerの公式ウェブサイトからダウンロードできます。

Dockerfileの作成

ルートディレクトリにDockerfileを作成して設定する

Dockerfile

# ベースイメージとしてNode.jsを指定 (開発ステージ)
FROM node:18 AS dev

# 作業ディレクトリを指定
WORKDIR /app

# package.jsonとpackage-lock.jsonをコピー
COPY package*.json ./

# パッケージのインストール
RUN npm install

# 開発サーバーの起動
CMD [ "npm", "start" ]

# プロジェクトの全ファイルをコピー (本番ステージ)
FROM node:18 as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .

# ビルドの実行
RUN npm run build

# ビルドした結果をNginxでホストするためのステージ
FROM nginx:1.17.1-alpine

# ビルド結果をNginxのhtmlディレクトリにコピー
COPY --from=builder /app/build /usr/share/nginx/html

# Nginxを起動
CMD ["nginx", "-g", "daemon off;"]

• 開発環境では、通常の npm start で開発しているときと同様にホットリロードをしたいのでその設定
• 本番環境では、npm run buildをしてからビルド結果をnginxで使用するための設定

docker-compose.ymlの作成

Docker Composeは、複数のDockerコンテナを管理するためのツールです。

開発環境と本番環境で異なる設定を使用するため、それぞれの環境用のdocker-compose.ymlを作成します。

docker-compose.yml

# 開発環境用
version: "3.7"
services:
  app:
    container_name: your-app-dev
    build:
      context: .
      dockerfile: Dockerfile
      target: dev
    volumes:
      - ".:/app"
      - "/app/node_modules"
    ports:
      - "3000:3000"
    environment:
      - CHOKIDAR_USEPOLLING=true

docker-compose.prov.yml

# 本番環境用
version: "3.7"
services:
  app:
    container_name: your-app-prod
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "80:80"

portsの番号について

portsはDockerコンテナ内のポートをホストマシンのポートにマッピング（つなげる）設定です。

設定値の"3000:3000"は「ホストマシンの3000番ポートをコンテナの3000番ポートにつなげる（マッピングする）」という意味になります。

本番環境はなぜ"80:80"なのかというと、それはNginxサーバー（コンテナ内で動作するWebサーバー）がデフォルトで80番ポートを使用するためです。

一方、もしReactの開発サーバー（通常npm startで起動する）をコンテナ内で動かしている場合は、その開発サーバーはデフォルトで3000番ポートを使います。そのため、その場合は"3000:3000"と設定します。

Dockerイメージのビルドとコンテナの起動

Docker Composeを使用してDockerイメージをビルドし、コンテナを起動します。

開発環境ではdocker-compose up --buildを、本番環境ではdocker-compose -f docker-compose.prod.yml up --buildを実行します。

これで、docker環境でReactアプリーケーション開発ができます。