2018/04/24更新

[フロントエンド] 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言語、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に!」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSTwitterをフォローして貰えたら嬉しいです ^ ^

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





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。