web-dev-qa-db-ja.com

NginxにCreate-React-Appをデプロイする

Ubuntu 14.04とNginxを使用して、デジタルオーシャンドロップレットにcreate-react-app SPAを展開しようとしています。静的サーバーごとに 展開手順 、serve -s build -p 4000を実行すると機能しますが、端末を閉じるとすぐにアプリがダウンします。 create-react-appリポジトリのreadmeから、 forever などのように、永久に実行し続ける方法がわかりません。

serveを実行しないと、Nginxの502 Bad Gatewayエラーが発生します。

Nginx Conf

server {
  listen 80;
  server_name app.mydomain.com;
  root /srv/app-name;
  index index.html index.htm index.js;
  access_log /var/log/nginx/node-app.access.log;
  error_log /var/log/nginx/node-app.error.log;
  location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|Zip|tgz|gz|rar|bz2|pdf|txt|tar|wav|bmp|rtf|js|flv|swf|html|htm|svg)$ {
    root   /srv/app-name/build;
  }
  location / {
    proxy_pass http://127.0.0.1:4000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Access-Control-Allow-Origin *;
    proxy_set_header Host $Host;
    proxy_cache_bypass $http_upgrade;
  }
}
nginxdeploymentcreate-react-app
20
Kwhitejr

React（およびCreate React App）の主な利点の1つは、Nodeサーバーを実行する（またはプロキシする）オーバーヘッドが不要なことです。 Nginxを使用）静的ファイルを直接提供できます。

展開ドキュメント リンク先から、Create React Appが何をすべきかを説明しています：

npm run buildは、アプリの製品ビルドでbuildディレクトリを作成します。サイトへの訪問者にindex.htmlが提供され、/static/js/main.<hash>.jsなどの静的パスへのリクエストが/static/js/main.<hash>.jsファイルのコンテンツとともに提供されるように、お気に入りのHTTPサーバーを設定します。

あなたの場合、npm run buildを実行してbuild/ディレクトリを作成し、Nginxがアクセスできる場所でファイルを利用できるようにします。ビルドはおそらくローカルマシンで行うのが最適です。その後、ファイルをサーバーに安全にコピーできます（SCP、SFTPなどを介して）。あなたはcouldサーバーでnpm run buildを実行しますが、実行する場合は、build/ディレクトリを次回ビルドを実行すると、クライアントはビルド中に一貫性のないリソースのセットを受け取る可能性があります。

どちらのビルド方法を選択する場合でも、build/ディレクトリがサーバーに配置されたら、そのアクセス許可をチェックして、Nginxがファイルを読み取り、nginx.confを次のように設定できることを確認します。

server {
  listen 80;
  server_name app.mydomain.com;
  root /srv/app-name;
  index index.html;
  # Other config you desire (TLS, logging, etc)...
  location / {
    try_files $uri /index.html;
  }
}

この構成は、/srv/app-nameにあるファイルに基づいています。要するに、try_filesディレクティブはCSS/JS/imagesなどを最初にロードしようとし、他のすべてのURIに対して、ビルドにindex.htmlファイルをロードして、アプリを表示します。

注意として、ポート80で安全でないHTTPを使用するのではなく、HTTPS/SSLを使用してデプロイする必要があります。 Certbot Nginxに無料のLet's Encrypt証明書で自動HTTPSを提供します。それ以外の場合、証明書はあなたを妨げます。

43
davidjb

NextJSを/のメインアプリとしてホストしていて、/adminルートでCRAをホストしたかった。ここに私がやったことがあります：

  • カスタムエクスプレスサーバーを介してCRAを提供する
  • package.jsonのhostnameを変更します
  • 反応ルータのbasenameを/adminに追加
  • 次のプロキシパスを定義します。
location / {
  proxy_pass http://localhost:3000;
}
location /admin {
  proxy_pass http://localhost:3001;
}
location /admin/ {
  proxy_pass http://localhost:3001/;
}

関連記事：

0
Mehmet N. Yarar