Reactアプリケーションのビルドとnginxサーバーの更新を自動化するDocker環境の構築

今日は、dockerで構築したreactの開発環境において、buildしたwebコンテンツをnginxで確認する手順をご紹介します。

実行環境

この記事では、dockerでreactの開発環境の構築が完了していることを前提にしています。環境構築の手順は、下記の記事を参考にしてみてください。

docker上にnginxを構築

下記のDocker関連のファイルを用意して、Reactで開発したWebコンテンツを確認するためのnginxを構築します。

ディレクトリ構造

ディレクトリ構造は下記のようになっています。赤字の箇所が新規追加&更新になります。

.
├── docker-compose.yml
├── front
│   ├── Dockerfile
│   └── app
│       ├── README.md
│       ├── build
│       ├── node_modules
│       ├── package-lock.json
│       ├── package.json
│       ├── public
│       ├── src
│       └── tsconfig.json
└── nginx
    ├── Dockerfile
    └── default.conf

docker-compose.yml

赤字の箇所を追記します。

version: '3'

services:

  front:
    build:
      dockerfile: ./front/Dockerfile
    volumes:
        - ./front:/src
    command: sh -c "cd app && PORT=3000 yarn start"
    ports:
      - "3000:3000"

  nginx:
    build:
      dockerfile: ./nginx/Dockerfile
    volumes:
        - ./front/app/build:/var/www
        - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
    ports:
      - "8080:80"

web/Dockerfile

下記の内容で新規作成します。

FROM nginx:1.23

web/default.conf

下記の内容で新規作成します。

server {
    listen       80;

    location / {
        root   /var/www;
        index  index.html index.htm;
        try_files $uri /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

起動

下記のコマンドでdockerをビルド＆起動します。

docker compose build
docker compose up -d

下記のコマンドでreactで開発したWebコンテンツをデプロイ用に作成します。

docker compose run --rm front sh -c "cd /src/app && yarn build"

動作確認

ブラウザで、「http://localhost:8080/」にアクセスして、下図のような表示なっていればOKです。

解説

nginxのコンテンツが更新される仕組み

docker compose run --rm front sh -c "cd /src/app && yarn build"

上記のコマンドを実行することで、nginxのコンテンツが更新される仕組みは下記になります。

このコマンドは、Docker Composeで定義された「front」という名前のサービスを実行し、/src/appディレクトリに移動して、yarn buildコマンドを実行します。これにより、Reactアプリケーションがビルドされ、/front/app/buildディレクトリにビルドファイルが生成されます。

ビルドが完了したら、nginxサービスのDockerコンテナが自動的に更新されます。これは、Docker Composeファイルで定義されているボリュームマウントによって実現されています。具体的には、/front/app/buildディレクトリがホストマシンの./front/app/buildディレクトリにマウントされ、nginxサービスのDockerコンテナの/var/wwwディレクトリにマウントされています。そのため、Reactアプリケーションのビルドファイルが更新されると、nginxサービスのDockerコンテナに反映されます。

つまり、上記のコマンドを実行することで、Reactアプリケーションのビルドファイルを更新することができ、その結果、nginxサービスのDockerコンテナに反映されるため、Webサイトのコンテンツが更新されます。

おわりに

今日は、dockerを使用したReactの開発環境で作成したWebコンテンツをnginxで確認する方法をご紹介しました。

今回使用したファイルは下記のGitHubにタグ付けしています。