create-react-appUbuntu 14.04とNginxを使用して、SPAをDigital Oceanドロップレットに配置しようとしています。静的サーバーの展開手順に従って、実行時に機能させることができますserve -s build -p 4000が、ターミナルを閉じるとすぐにアプリがダウンします。それから、私には明らかではないcreate-react-appようなものに似て、永遠に実行し、それを維持するためにどのようにレポのreadme 永遠に。
を実行しない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;
}
}
React（およびCreate React App）の主な利点の1つは、ノードサーバーを実行する（またはNginxでプロキシする）オーバーヘッドが必要ないことです。静的ファイルを直接提供できます。
リンクしたDeploymentドキュメントから、Create React Appは何をすべきかを説明しています：
npm run buildbuildアプリの製品ビルドを含むディレクトリを作成します。お気に入りのHTTPサーバーをセットアップして、サイトへの訪問者にサービスを提供しindex.html、静的パスへのリクエストにファイルの/static/js/main.<hash>.jsコンテンツを提供するようにし/static/js/main.<hash>.jsます。
あなたのケースでは、実行npm run buildしてbuild/ディレクトリを作成し、次にNginxがアクセスできる場所でファイルを利用できるようにします。ビルドはおそらくローカルマシンで行うのが最善であり、ファイルをサーバーに（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 (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は無料のLet's Encrypt証明書を使用してNginxに自動HTTPSを提供します。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加