[フロントエンド] create-react-appで作成したアプリをNginxで動かす

こんにちは、@yoheiMuneです。
create-react-appを使うと簡単にReactアプリケーションを作成することができます。それをサーバー上のNginxで配信する方法について、ブログを書きたいと思います。

目次

create-react-appとは

create-react-appとはReactアプリケーションの雛形を1コマンドで作れる便利ツールです。雛形を作って必要な箇所を実装することで、簡単に本格的なReactアプリケーションを作ることができます。詳細は以下をご確認ください。

facebook/create-react-app | Github

ReactアプリケーションをNginxで配信する

さてここからが本題です。
ローカルで作成したReactアプリケーションをサーバー（Nginx）で配信したい場合に、どうすれば良いでしょうか。以下の作業ステップを行います。

手順1：Reactアプリケーションをサーバー上に配置する

今回は、以下のディレクトリに配置することにします（ディレクトリは任意の場所でOKです）。

/opt/app/my-react-app

そこに、ローカルで作成したReactアプリケーションのファイルを置きます。

# Githubにある場合には、git cloneなどでOK
$ git clone [gitのリポジトリのパス] /opt/app/my-react-app

ここではgit cloneを利用していますが、FTPツールなどでアップロードしてもOKです。

次に、そのフォルダに移動して、ビルドを行います。

$ cd /opt/app/my-react-app
$ npm run build

ビルド結果をFTPでアップロードしてもOKです。ビルド結果は、build/フォルダに格納されます。

# ビルド結果の格納先
/opt/app/my-react-app/build

ビルド結果の格納先に、以下のようなファイルあれば大丈夫です。

$ ls /opt/app/my-react-app/build
asset-manifest.json
image
index.html
manifest.json
service-worker.js
static
...など...

手順2：ドキュメントルートを決める

ビルドした結果作成されたbuild/フォルダが、ドキュメントルートになります。

# ドキュメントルート
/opt/app/my-react-app/build

手順3：Nginxの設定ファイルを追加する

今回はmyapp.example.comのドメインとします。それに対するNginxの設定ファイルを追加します。
/etc/nginx/conf.d/myapp.example.com.confというファイルを新規に作成し、以下の内容を記載します。

server {
  listen       80;
  server_name  my.example.com;
  charset      utf-8;

  # ドキュメントルートを指定.
  root /opt/app/my-react-app/build;
  index index.html;

  # リクエストされたリソースがなければ、index.htmlを返却.
  location / {
    try_files $uri /index.html;
  }
}

また、バックエンドのサーバーと連携する場合には、proxy_passの設定を追加します。例えば/apiをバックエンドに流したい場合、以下の記述を追加します。

# /apiはバックエンドサーバーにリクエストを流す.
location /api {
  proxy_pass http://127.0.0.1:3001;
}

手順4：Nginxで設定を読み込む

上記の設定をNginxに読み込みます。

# 例：CentOS7の場合
$ systemctl reload nginx

手順5：動作確認

上記で無事に設定できれば、以下のアクセスが確認できると思います。

http://myapp.example.com

最後に

try_files $uri /index.html;の部分はちょっと雑な感じですが、いったん動くからいいかなと思います。本番でないものはないと返す（404を返す）場合には、もう少し工夫した設定が必要です。

最後になりますが本ブログでは、フロントエンド、Swift、PHP、Node.js、Linux、Python、Java、インフラ、Go言語、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に！」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSやTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました！