はじめに
Reactアプリケーションをサーバーにデプロイするのは、Create React Appのビルドツールを使用することで簡単に行えます。ビルドスクリプトは、すべてのJavaScript、画像、スタイル、HTMLファイルを1つのディレクトリにまとめてコンパイルします。このようにして、すべてのリソースを1か所に集めることで、最小限の設定でウェブサーバーにアプリケーションをデプロイできます。
このチュートリアルでは、ローカルマシンのReactアプリケーションを、Nginxを使用して動作するUbuntuサーバーにデプロイします。Create React Appを使ってアプリケーションを作成し、Nginxの設定ファイルを用いてどこにファイルをデプロイするかを決定し、SCPを使用してビルドディレクトリとその内容をサーバーに安全にコピーします。チュートリアルの終わりには、Reactアプリケーションをビルドしてデプロイできるようになります。
前提条件
このチュートリアルを進めるには、以下が必要です：
- Ubuntu 20.04を実行しているサーバー。非rootユーザーにsudo権限があり、ファイアウォールが有効になっている必要があります。セットアップ方法については、Ubuntuの初期サーバーセットアップガイドを参照してください。
- ローカルマシンにNode.jsをインストールする必要があります。
- サーバーにNginxをインストールし、サーバーブロックが設定されていること。
- Let’s Encryptを使用してNginxをHTTPSで保護することをお勧めします。
Nginxを使用したReactアプリケーションのデプロイ方法
ステップ 1: Ubuntu 20.04サーバーのセットアップ
Ubuntu 20.04サーバーを準備し、サーバーにSSHで接続します。
ステップ 2: 必要なパッケージのインストール
NginxとNode.jsをインストールするため、以下のコマンドを実行します。
sudo apt update
sudo apt install nginx
sudo apt install nodejs
sudo apt install npmステップ 3: Reactアプリケーションのビルド
サーバーにReactアプリケーションのソースコードを配置し、以下のコマンドでアプリケーションをビルドします。
cd /path/to/your/react/app
npm install
npm run buildこれにより、buildフォルダが生成されます。このフォルダ内には、デプロイ用の静的ファイルが含まれています。
ステップ 4: Nginxの設定
次に、Nginxの設定を行います。設定ファイルは/etc/nginx/sites-available/defaultにあります。
以下の設定を反映させて、ReactアプリケーションをNginx経由で提供します。
sudo nano /etc/nginx/sites-available/default設定ファイルの中で、次のように変更します。
server {
listen 80;
server_name your_domain_or_IP;
root /path/to/your/react/app/build;
index index.html index.htm;
location / {
try_files $uri /index.html;
}
}ファイルを保存してNginxを再起動します。
sudo systemctl restart nginxステップ 5: ファイアウォールの設定
Nginxが正常に動作するように、ファイアウォールを設定します。以下のコマンドを実行してHTTPトラフィックを許可します。
sudo ufw allow 'Nginx Full'
sudo ufw enableステップ 6: ドメイン名の設定 (オプション)
ドメイン名を使用する場合は、DNS設定でドメインをサーバーのIPアドレスに紐付けてください。
ステップ 7: HTTPSの設定 (オプション)
Let’s Encryptを使用してSSL証明書をインストールし、HTTPS接続を有効にするには、次のコマンドを実行します。
sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d your_domain結論
このチュートリアルでは、ReactアプリケーションをCreate React Appでビルドし、Nginxを使用してUbuntuサーバーにデプロイする方法を学びました。これでReactアプリケーションを簡単にウェブ上に公開できます。