この記事は、Docker(Docker-Compose)を利用しReact & TypeScriptの開発環境・本番環境（Nginx,Let’sEncrypt）の構築方法を紹介します。
TypeScriptを使用せずに、ピュアJavascriptを利用するプロジェクトは、以下の記事で解説しています。
【Docker(Docker-Compose)】Reactの開発・本番環境構築【Nginx,Let’sEncrypt利用】
◆動作検証環境
・OS：mac Big Sur
・Docker desktop：4.1.1(Engine:20.10.8, Compose:1.29.2)
【リモート環境】
・さくらVPSサーバー：メモリ 512M, ストレージ：SSD 25GB, CPU：1コア
・OS：Ubuntu 20.04
・Docker：20.10.7
・Docker Compose：1.23.2
【共通環境】
・Node：16
・Nginx：1.19.0
プロジェクトファイルの設定
まずは、ローカル環境でDockerを利用しReactを開発する環境を準備します。
Reactプロジェクトの作成
プロジェクトを作成するディレクトリに移動して、Reactプロジェクトを作成します。
–templateオプションでtypescriptの利用の設定としています。
1 2 3 | $ npx create-react-app react-ts-nginx-docker --template typescript |
Dockerfileの作成
作成したReactプロジェクトのルートディレクトリにDockerfileを作成します。
Dockerfile
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | FROM node:16-alpine WORKDIR /app COPY package.json ./ COPY package-lock.json ./ COPY tsconfig.json ./ RUN npm install COPY . . EXPOSE 3000 CMD ["npm", "start"] |
.dockerignoreファイルの作成
作成したReactプロジェクトのルートディレクトリに.dockerignoreを作成します。
.dockerignore
1 2 3 4 5 6 7 | node_modules npm-debug.log Dockerfile .dockerignore .gitignore |
docker-compose.ymlファイルの作成
作成したReactプロジェクトのルートディレクトリにdocker-compose.ymlファイルの作成を作成します。
docker-compose.yml
1 2 3 4 5 6 7 8 9 10 11 12 13 | version: "3" services: app: build: context: . dockerfile: Dockerfile volumes: - ./src:/app/src ports: - "3000:3000" |
ローカル用コンテナのイメージ作成、コンテナ作成、起動
ここまで設定ができたら一度イメージの作成、コンテナの作成、起動を行い、Dockerエンジンを利用した状態でReactのウェルカムページの確認を行います。
ローカル環境へのDockerのインストールがまだの場合は、下記のサイトからインストールします。
コンテナの作成、起動
この段階でディレクトリ構造は以下のようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | react-ts-nginx-docker ├── Dockerfile ├── README.md ├── docker-compose.yml ├── node_modules │ ├──...省略 │ ...省略 ├── package-lock.json ├── package.json ├── tsconfig.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt └── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.svg ├── reportWebVitals.js └── setupTests.js |
-dのオプションをつけて、コンテナのの作成後、バックグラウンドで起動
1 2 3 | $ docker-compose up -d |
作成したイメージの確認
以下のコマンドで作成したイメージを確認する事ができます。
1 2 3 | $ docker-compose images |
以下のように表示されます。
1 2 3 4 5 | Container Repository Tag Image Id Size ------------------------------------------------------------------------------------------ react-ts-nginx-docker_app_1 react-ts-nginx-docker_app latest e21a0f67fc49 370.7 MB |
作成したコンテナの確認
以下のコマンドで確認する事が可能です。
1 2 3 | $ docker-compose ps |
以下のように表示されます（起動していないときStateの項目はExit）。
1 2 3 4 5 | Name Command State Ports --------------------------------------------------------------------------------------------- react-ts-nginx-docker_app_1 docker-entrypoint.sh npm start Up 0.0.0.0:3000->3000/tcp |
ブラウザで表示を確認
http://localhost:3000
ぐるぐるが確認できればOK
以下のコマンドでログを確認します。
1 2 3 | $ docker-compose logs -f |
確認ができたら、コンテナの起動を停止、削除します。
1 2 3 | $ docker-compose down |
コンテナの停止のみ行う場合は以下のコマンドを実行します。
1 2 3 | $ docker-compose stop |
(本番環境用プロジェクトのBuild)
ローカル環境を利用してbuildした状態のプロジェクトの表示・動作を確認します。
※確認の必要がなければスキップしてください。
本番環境用としてBuildディレクトリを作成するためにbuidコマンドを実行します。
1 2 3 | $ npm run build |
1 2 3 | $ npx serve -s build |
1 2 3 4 5 6 7 8 9 10 11 12 | ┌───────────────────────────────┐ │ │ │ Serving! │ │ │ │ - Local: http://localhost:3000 │ │ - On Your Network: http://192.168.xxx.xx:3000 │ │ │ │ Copied local address to clipboard! │ │ │ └───────────────────────────────┘ |
本番環境用ファイル設定
Nginxの設定
本番環境でWebサーバーとして利用するNginxの設定を行います。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | server { listen 80; listen [::]:80; server_name yoursite.com; root /usr/share/nginx/html; index index.html; location ^~ /.well-known/acme-challenge/ { root /usr/share/nginx/html; } } |
本番環境用Dockerfileの作成
ReactプロジェクトのルートディレクトリにDockerfile.prodを作成します。
prod/Dockerfile.prod
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | FROM node:16-alpine AS builder WORKDIR /app COPY package.json ./ COPY package-lock.json ./ COPY tsconfig.json ./ RUN npm install COPY . . RUN npm run build FROM nginx:1.19-alpine AS server COPY ./etc/nginx.conf /etc/nginx/conf.d/default.conf RUN apk update \ && apk upgrade \ && apk add --no-cache openssl \ && apk add --no-cache certbot COPY --from=builder ./app/build /usr/share/nginx/html EXPOSE 80 |
本番環境用docker-compose.ymlの作成
Reactプロジェクトのルートディレクトリにdocker-compose.prod.ymlを作成します。
これ以降の方法は、有料記事として紹介しています。
【Docker(Docker-Compose)】Reactの開発・本番環境構築【Nginx,Let’sEncrypt利用】
有料記事内で解説している内容は以下のとおりです。
・GitHubへプロジェクトのpushとリモートサーバーからのclone方法
・本番環境（リモートサーバー）へのDockerとDockerComposeのインストールと初期設定
・本番環境でのサイト表示、動作確認①（独自ドメイン使用）
・本番環境でのサイト表示、動作確認②（SSL（https）対応表示）
・letsencryptの証明書更新の自動化
・開発、本番環境での開発方法