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

この記事は、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プロジェクトを作成します。

 

Dockerfileの作成

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

Dockerfile

 

.dockerignoreファイルの作成

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

.dockerignore

 

スポンサードリンク

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

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

docker-compose.yml

 

 

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

 

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

 

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

Install Docker Desktop on Mac

コンテナの作成、起動

この段階でディレクトリ構造は以下のようになります。

 

-dのオプションをつけて、コンテナのの作成後、バックグラウンドで起動

 

作成したイメージの確認

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

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

 

作成したコンテナの確認

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

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

 

ブラウザで表示を確認

http://localhost:3000

 

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

 

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

 

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

 

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

 

 

(本番環境用プロジェクトのBuild)

 

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

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

 

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

 

ローカル環境を利用してbuildした状態のプロジェクトの表示・動作の確認のため以下のコマンドを行います。
*serveのインストールが未だの場合は、インストールします。
実行後以下のような表示が出て、ローカル環境、仮のリモート環境で確認を行えます。
 

本番環境用ファイル設定

 

Nginxの設定

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

ルートディレクトリにetcディレクトリを作成し、nginx.confファイルを作成します。
etc/nginx.conf
*リモートサーバーで独自ドメインを使用しない場合は、server_name xxx.xxx.xxx.xxx;のようにserver_nameにIPアドレスを指定します。

 

本番環境用Dockerfileの作成

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

prod/Dockerfile.prod

 

本番環境用docker-compose.ymlの作成

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

 

これ以降の方法は、有料記事として紹介しています。

 

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

 

有料記事内で解説している内容は以下のとおりです。

・本番環境用ファイル設定
・GitHubへプロジェクトのpushとリモートサーバーからのclone方法
・本番環境(リモートサーバー)へのDockerとDockerComposeのインストールと初期設定
・本番環境でのサイト表示、動作確認①(独自ドメイン使用)
・本番環境でのサイト表示、動作確認②(SSL(https)対応表示)
・letsencryptの証明書更新の自動化
・開発、本番環境での開発方法