NginxでReactを展開する方法

NginxはAphache(Apache)などのWebサーバーに、Reactアプリを配布するときに使用することができます。 Ubuntuの18.04環境でNginxでReactアプリを配布する方法を説明します。

Reactアプリビルド

まず、開発中のReactアプリが必要です。基本アプリでmyappプロジェクトを作成し、実行されていることを確認しました。

$ create-react-app myapp
$ cd myapp
$ npm start

Webサーバー(Nginx)は、ビルドされたファイルを使用するので、事前に構築成果物を作成おかなければならいます。

$ npm run build

Nginxの設定

今作成したReactアプリをWebサーバーのNginxを介して実行されるように作成されます。

まず、次のコマンドでNginxをインストールしてください。

$ sudo apt install nginx

インストールが完了したら、 /etc/nginxパスにファイルが作成されます。 メイン画面に接続されているNginxの設定ファイルが既に作成されている状態ですが。私たちが作る設定と重なる可能性があるため、すべて消去を開始します。 下のパスにあるdefaultファイルを削除してください。

$ sudo rm /etc/nginx/sites-available/default
$ sudo rm /etc/nginx/sites-enabled/default

今myappのNginxの設定ファイルを作成してみましょう。 下のパスに移動して設定ファイルを作成してください。

$ cd /etc/nginx/sites-available/
$ sudo touch myapp.conf

myapp.confの内容は、以下のように入力してください。 (rootの /home/user/myapp/buildは上記で作成しReactのビルド成果物のパスです。自分のビルドファイルのパスに変更する必要があります)

server {
  listen 80;
  location / {
    root   /home/user/myapp/build;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
}

listen 80は、ポート80の設定を意味します。 location /はURLが"/"が含まれているパスの設定を意味します。 rootは実行ファイルのルートの場所を意味します。上記のビルドしたファイルのパスを入力します。 indexは、インデックスのファイルを指定するところであり、このファイルの中必ず一つはrootのパスに存在します。 try_filesはどのファイルを検索するとき指定された順序で検索さ、最初に発見されたファイルを使用していることを意味します。

/etc/nginx/sites-available/に設定ファイルを作成したら、次のコマンドでは、ファイルのシンボリックリンクを /etc/nginx/sites-enabled/にも作ってください。 名前のように、Webサーバーが動作したときに sites-enabledの設定ファイルを参照します。

$ sudo ln -s /etc/nginx/sites-available/myapp.conf /etc/nginx/sites-enabled/myapp.conf

ファイルの作成は、すべて終わりました。今Nginxを実行してください。 次のコマンドでnginxを再実行してください。

$ sudo systemctl stop nginx
$ sudo systemctl start nginx

Webサーバーが正常に動作しているかの状態を確認するには、次のコマンドを使用します。

sudo systemctl status nginx

Nginxが動作中であれば、ブラウザで localhost:80に接続しましょう。

まとめ

自分が開発したReactアプリをNginxで展開する方法について説明しました。 npm startコマンドを使用すると、開発中のアプリをブラウザで実行を試みることができます。しかし、これは開発便宜のために、Webサーバーであるため、配布する際Nginxのような効率的かつ信頼性の高いWebサーバーを使用します。

次の記事ReactとNginxをDockerizingする方法では、ReactをDockerに展開する方法について説明します。 気になる方は、ReactとNginxをDockerizingする方法をご確認ください。