NginxにCreate-React-Appを展開

Question

私はcreate-react-app SPAをUbuntu 14.04とNginxを使用したデジタルオーシャンドロップレットに展開しようとしています。静的サーバーdeployment instructionsでは、serve -s build -p 4000を実行すると動作しますが、端末を閉じるとすぐにアプリケーションが終了します。それはcreate-react-appレポのreadmeから私には分かりません、それは永遠に実行し続けるには、foreverのようなものです。

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

nginxのコンファレンスの主な利点の

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; 
    } 
} 

Answer 1

一つが反応（およびアプリケーションを反応させるの作成）あなたは（nginxのと、それまでまたはプロキシ）ノードサーバーを実行しているのオーバーヘッドを必要としないということです。静的ファイルを直接提供することができます。 Deployment documentationあなたにリンクしてから

は、アプリケーションが何をすべきかについて説明しリアクト作成します。

npm run buildアプリの生産ビルドでbuildディレクトリを作成します。サイトへの訪問者にindex.htmlが、そして/static/js/main.<hash>.jsのような静的パスへのリクエストは、/static/js/main.<hash>.jsファイルの内容で提供されるように、お気に入りのHTTPサーバーを設定します。あなたのケースでは

、build/ディレクトリを作成し、nginxのは、それらにアクセスできる場所にファイルを利用できるようにnpm run buildを実行します。あなたのビルドはおそらくあなたのローカルマシンに最適ですし、安全に（SCP、SFTPなど）ファイルをあなたのサーバーにコピーします。サーバー上で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 (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に対して無料のHTTPSを無料で提供しますあなたを引き止めます。