【Docker(Docker-Compose)】Reactの開発・本番環境構築【Nginx,Let’sEncrypt利用】

この記事は、Docker(Docker-Compose)を利用しReactの開発環境・本番環境（Nginx,Let’sEncrypt）の構築方法を紹介します。

なお、TypeScriptを使用するプロジェクトは、以下の記事で解説しています。
TypeScriptプロジェクトで開発希望の方は、そちらを御覧ください。

【Docker(Docker-Compose)】React & TypeScriptの開発・本番環境構築【Nginx,Let’sEncrypt利用】

Next.jsフレームワークを使用するプロジェクトは、以下の記事で解説しています。

＊準備中

以下のような開発フローに対応する方法となります。

①：ローカル環境のDocker内で開発
↓
②：ローカルで開発したプロジェクトを本番環境へデプロイ
↓
③：本番環境のDocker内でプロジェクトのビルド、システム運用
↓
④：①に戻り機能追加などの開発

本番環境リリース時の独自ドメインのHTTPS化は、無料で利用できるLet's Encryptを利用して対応します。

最終的には、ローカル環境での開発用の設定ファイル（ymlファイル）と、本番環境でのリリース用の２つの設定ファイルを作成し、各環境で使い分ける方法となります。

おおまかな開発環境構築のながれは以下のとおりです。

１：Reactプロジェクトの作成
２：ローカル環境DockerでのReactプロジェクトの表示・動作確認
３：（本番環境用プロジェクトのBuild、表示・動作確認）
４：本番環境DockerでのNginxの設定
５：本番環境DockerでのReactプロジェクトの表示・動作確認
６：本番環境独自ドメインの利用とHTTPS化
７：HTTPS化（Let's encrypt）証明書の自動更新設定

◆動作検証環境

【ローカル環境】
・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プロジェクトを作成します。

$ npx create-react-app react-nginx-docker

■Dockerfileの作成

作成したReactプロジェクトのルートディレクトリにDockerfileを作成します。

Dockerfile

FROM node:16-alpine

WORKDIR /app

COPY package.json ./

COPY package-lock.json ./

RUN npm install

COPY . .

EXPOSE 3000

CMD ["npm", "start"]

■.dockerignoreファイルの作成

作成したReactプロジェクトのルートディレクトリに.dockerignoreを作成します。

.dockerignore

node_modules
npm-debug.log
Dockerfile
.dockerignore
.gitignore

■docker-compose.ymlファイルの作成

作成したReactプロジェクトのルートディレクトリにdocker-compose.ymlファイルの作成を作成します。

docker-compose.yml

version: "3"

services:
 app:
   build:
     context: .
     dockerfile: Dockerfile
   volumes:
     - ./src:/app/src
   ports:
     - "3000:3000"

■ローカル用コンテナのイメージ作成、コンテナ作成、起動

ここまで設定ができたら一度イメージの作成、コンテナの作成、起動を行い、Dockerエンジンを利用した状態でReactのウェルカムページの確認を行います。

ローカル環境へのDockerのインストールがまだの場合は、下記のサイトからインストールします。

Install Docker Desktop on Mac

コンテナの作成、起動
この段階でディレクトリ構造は以下のようになります。

react-nginx-docker
├── Dockerfile
├── README.md
├── docker-compose.yml
├── node_modules
│   ├──...省略
│   ...省略
├── package-lock.json
├── package.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のオプションをつけて、コンテナのの作成後、バックグラウンドで起動

$ docker-compose up -d

作成したイメージの確認

以下のコマンドで作成したイメージを確認する事ができます。

$ docker-compose images

以下のように表示されます。

Container                 Repository          Tag       Image Id       Size  
------------------------------------------------------------------------------------
react-nginx-docker_app_1   react-nginx-docker_app   latest   12954dcb13ff   370.3 MB

作成したコンテナの確認

以下のコマンドで確認する事が可能です。

$ docker-compose ps

以下のように表示されます（起動していないときStateの項目はExit）。

          Name                        Command               State           Ports         
------------------------------------------------------------------------------------------
react-nginx-docker_app_1   docker-entrypoint.sh npm start   Up      0.0.0.0:3000->3000/tcp

ブラウザで表示を確認

http://localhost:3000

ぐるぐるが確認できればOK

---------- うまく表示されない場合 ----------

以下のコマンドでログを確認します。

$ docker-compose logs -f

---------- うまく表示されない場合終わり ----------

確認ができたら、コンテナの起動を停止、削除します。

$ docker-compose down

---------- メモ ----------

コンテナの停止のみ行う場合は以下のコマンドを実行します。

$ docker-compose stop

---------- メモ終わり ----------

（開発環境でBuildしたプロジェクトの表示・動作確認）

ローカル環境を利用してbuildした状態のプロジェクトの表示・動作を確認します。

確認の必要がなければ、スキップしてください。

本番環境用としてBuildディレクトリ（パッケージ）を作成するためにbuidコマンドを実行します。

$ npm run build

ローカル環境を利用してbuildした状態のプロジェクトの表示・動作を確認したい場合は以下のコマンドを行います（確認の必要がなければスキップしてください）。

$ npx serve -s build

※serveのインストールが未だの場合は、インストールします。

実行後以下のような表示が出て、ローカル環境、仮のリモート環境で確認を行えます。

  ┌────────────────────────────────────────────────────┐
  │                                                    │
  │   Serving!                                         │
  │                                                    │
  │   - Local:            http://localhost:3000        │
  │   - On Your Network:  http://192.168.xxx.xx:3000   │
  │                                                    │
  │   Copied local address to clipboard!               │
  │                                                    │
  └────────────────────────────────────────────────────┘

本番環境用ファイル設定

■Nginxの設定

本番環境でWebサーバーとして利用するNginxの設定を行います。

ルートディレクトリにetcディレクトリを作成し、nginx.confファイルを作成します。

etc/nginx.conf

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;
   }
}

＊リモートサーバーで独自ドメインを使用しない場合は、 ◯◯◯.◯◯◯.◯◯◯.◯◯◯.;のようにserver_nameにIPアドレスを指定します。

■本番環境用Dockerfileの作成

ReactプロジェクトのルートディレクトリにDockerfile.prodを作成します。

Dockerfile.prod

FROM node:16-alpine AS builder

WORKDIR /app

COPY package.json ./

COPY package-lock.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を作成します。