この記事は、Ubuntu20.04,Node,Nginxを利用して、Reactプロジェクトのデプロイ(本番環境構築)方法を紹介します。
◆動作検証環境
・さくらVPSサーバー：メモリ 512M, ストレージ：SSD 25GB, CPU：1コア
・OS：Ubuntu 20.04
・Node：10.19.0
・npm：6.14.4
・Nginx：1.18.0
サーバーにUbuntu 20.04 をインストールした状態（最低限のセキュリティ管理）からの作業方法を紹介しています。Ubuntuの環境初期設定
セキュリティ管理
さくらVPSサーバーにUbuntu 20.04 をインストール後の最低限のセキュリティ管理は、下記の記事を参考にしてください。
サーバーセキュリティー対策【秘密鍵を用いたSSHログイン設定(ubuntu,mac)】
Ubuntuの初期設定
まずはリモートサーバーにログインします。
1 2 3 | $ ssh -i ~/.ssh/id_rsa username@xxx.xxx.xxx.xxx |
日本語環境の設定
1 2 3 | $ sudo apt-get -y install language-pack-ja-base language-pack-ja ibus-mozc |
日本語への設定
1 2 3 | $ sudo localectl set-locale LANG=ja_JP.UTF-8 LANGUAGE="ja_JP:ja" |
変更後の確認
1 2 3 | $ sudo localectl |
↓のように表示されればOK
1 2 3 4 5 6 7 | System Locale: LANG=ja_JP.UTF-8 LANGUAGE=ja_JP:ja VC Keymap: n/a X11 Layout: jp,jp X11 Model: pc105 |
時刻設定の確認
1 2 3 | $ date |
以下のように表示される
1 2 3 | Sat Jun 19 21:18:14 JST 2021 |
タイムゾーンの変更
1 2 3 | $ sudo timedatectl set-timezone Asia/Tokyo |
1 2 3 | $ date |
ファイヤーウォール設定
1 2 3 | $ sudo ufw allow ssh |
1 2 3 | $ sudo ufw allow 80 |
1 2 3 | $ sudo ufw allow 443 |
ファイヤーウォール開始
1 2 3 | $ sudo ufw enable |
Ubuntuのソフトウェアの更新
1 2 3 | $ sudo apt-get update |
vimのインストール
1 2 3 | $ sudo apt install vim |
インストール確認
1 2 3 4 | $ vim --version VIM - Vi IMproved 8.1 |
node,npm,nginxのインストール
1 2 3 | $ sudo apt-get install nodejs npm nginx |
インストールの確認
1 2 3 4 | $ node -v v10.19.0 |
1 2 3 4 | $ npm -v 6.14.4 |
1 2 3 4 | $ nginx -v nginx version: nginx/1.18.0 (Ubuntu) |
nginxへのファイヤーウォールアクセス許可
1 2 3 | $ sudo ufw allow 'Nginx Full' |
ReactプロジェクトのBuildとリモートサーバーへのアップロード
Reactのプロジェクトを本番環境へデプロイするために、ローカル環境のプロジェクトをビルドします。
1 2 3 | $ npm run build |
ビルドが完了した後はbuildディレクトリをリモートサーバーへアプロードするために、githubへPushしておきます。
リモートサーバーへログインして、gitをインストールします。
1 2 3 | $ sudo apt-get install git |
次にプロジェクトを設置するディレクトリに移動して、プロジェクトをクローンします。
＊今回は/var/www/htmlとしています。
1 2 3 | $ cd /var/www/html |
1 2 3 | $ sudo git clone https://github.com/xxxxxxxx/xxxxxxxx.git |
Nginxの設定
これからは、WEBサーバーNginxの設定を行います。
Nginxのエントリーファイルの編集
まず、Webサーバーのエントリーファイルがあるディレクトリへ移動します。
1 2 3 | $ cd /etc/nginx/sites-available |
次に今回のDjangoプロジェクトで使用するオリジナルのエントリーファイルを作成します。
1 2 3 | $ sudo vim project |
下記のように編集します。
この段階では、server_name にはリモートサーバーのIPアドレスを設定します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | server { listen 80; listen [::]:80; server_name xxx.xxx.xxx.xxx ; root /var/www/your_project/build; index index.html index.htm index.nginx-debian.html; location / { try_files $uri $uri/ =404; } } |
1 2 3 | $ sudo nginx -t |
下記のように表示されればOKです。
＊エラーの表示がある場合は対応します。
1 2 3 4 | nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/nginx.conf test is successful |
1 2 3 | sudo ln -s /etc/nginx/sites-available/project /etc/nginx/sites-enabled/ |
Nginxのリスタート
1 2 3 | $ sudo systemctl restart nginx |
ブラウザにアクセス（IPアドレス＋ポート番号の指定は無し）してプロジェクトの表示を確認します。
表示が確認できればOKです。
もう一度configファイルを中心に見直し内容を編集します。
1 2 3 | sudo vim /etc/nginx/sites-available/project |
編集後は、既に作成済みのシンボリックリンクを削除し、編集し直したもので再度作成します。
1 2 3 | sudo rm -f /etc/nginx/sites-enabled/project |
1 2 3 | sudo ln -s /etc/nginx/sites-available/project /etc/nginx/sites-enabled/ |
リスタートして表示を確認します。
1 2 3 | $ sudo systemctl restart nginx |
独自ドメイン・SSL化とリダイレクト設定
独自ドメインの設定
今までの設定で、IPアドレスの指定でサイトへアクセスできるようになりました。
ここからは独自ドメインの設定と、SSLとリダイレクトの設定を行います。
Webサーバーのエントリーファイルがあるディレクトリへ移動し、編集します。
1 2 3 | $ cd /etc/nginx/sites-available |
1 2 3 | $ sudo vim project |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | server { listen 80; listen [::]:80; server_name yoursite.com ; root /var/www/your_project/build; index index.html index.htm index.nginx-debian.html; location / { try_files $uri $uri/ =404; } } |
1 2 3 | $ sudo systemctl restart nginx |
独自ドメインでブラウザにアクセス（ポート番号の指定は無し）してプロジェクトの表示を確認します。
表示が確認できればOKです。
SSL化とリダイレクト設定
今回はLet’s Encryptを利用してSSL化を行います。
letsencryptをインストール
1 2 3 | $ sudo apt-get install letsencrypt |
1 2 3 | $ sudo systemctl stop nginx |
1 2 3 | $ sudo letsencrypt certonly --standalone -d yoursite.com |
詳しい方法は下記の記事にて確認してください。
独自ドメインサイトのSSL化（HTTPS化）【Letsencrypt,Ubuntu,Nginx】
Webサーバーのエントリーファイルがあるディレクトリへ移動し、編集します。
1 2 3 | $ cd /etc/nginx/sites-available |
1 2 3 | $ sudo vim project |
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 31 32 33 34 35 36 37 | # http wwwなしからのリダイレクト server { listen 80; listen [::]:80; server_name yoursite.com; return 301 https://$host$request_uri; } # http https wwwありからのリダイレクト server { listen 80; listen 443 ssl; server_name www.yoursite.com; ssl_certificate /etc/letsencrypt/live/yoursite.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/yoursite.com/privkey.pem; return 301 https://yoursite.com$request_uri; } # リダイレクトを流される側の設定 server { listen 443 ssl default_server; server_name yoursite.com; ssl on; ssl_certificate /etc/letsencrypt/live/yoursite.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/yoursite.com/privkey.pem; root /var/www/your_project/build; index index.html index.htm index.nginx-debian.html; location / { try_files $uri $uri/ =404; } } |
1 2 3 | $ sudo service nginx start |
ブラウザでサイトの表示が行われるか、URL欄の表示がhttps対応になっているかを確認します。
letsencryptの証明書更新の自動化
letsencryptの証明書は3ヶ月ごとに更新する必要があります。
自動で更新を行うためにバッジ処理の設定を加えます。
詳しい方法は下記の記事にて確認してください。
独自ドメインサイトのSSL化（HTTPS化）【Letsencrypt,Ubuntu,Nginx】
以上、Ubuntu20.04,Node,Nginxを利用して、Reactプロジェクトのデプロイ(本番環境構築)方法を紹介しました。