Nginx、React、Node＆Let's Encrypt ...私のReactアプリケーションでNginxを指す方法

Question

私は、（pm2経由で）5000番ポート上で動作するノードサーバーと話をする必要があるReactアプリケーションを持っていて、ルート ディレクトリ私のサイトの。ノードサーバーは、APIからいくつかのデータを取り出し、それをクライアントに返します。今すぐポート5000でNginxを指し示しています（私はチュートリアルに続き、テストとしてこの点に到達しました）。

私のReactアプリケーションは/ www/ReactApp/dist /にあります。ポート5000のノードサーバーではなくNginxをどのように指していますか？

myapp.comにアクセスしても既存のSSL証明書を使用している場合は、基本的に/ www/ReactApp/dist /の内容が必要です。

ノードserver.jsはバックグラウンドで実行され、Reactアプリケーションはデータを取得するためにReactアプリケーションを呼び出します。

は、ここに私の/ etc/nginxの/サイト対応/デフォルトの内容は次のとおりです。

# HTTP — redirect all traffic to HTTPS 
server { 
    listen 80; 
    listen [::]:80 default_server ipv6only=on; 
    return 301 https://$host$request_uri; 
} 

# HTTPS — proxy all requests to the Node app 
server { 
    # Enable HTTP/2 
    listen 443 ssl http2; 
    listen [::]:443 ssl http2; 
    server_name myapp.com; 

    # Use the Let’s Encrypt certificates 
    ssl_certificate /etc/letsencrypt/live/myapp.com/fullchain.pem; 
    ssl_certificate_key /etc/letsencrypt/live/myapp.com/privkey.pem; 

    # Include the SSL configuration from cipherli.st 
    include snippets/ssl-params.conf; 

    location/{ 
     proxy_set_header X-Real-IP $remote_addr; 
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
     proxy_set_header X-NginX-Proxy true; 
     proxy_pass http://localhost:5000/; 
     proxy_ssl_session_reuse off; 
     proxy_set_header Host $http_host; 
     proxy_cache_bypass $http_upgrade; 
     proxy_redirect off; 
    } 
} 

Answer 1

私が理解から、あなたは基本的にディレクトリから静的ファイルを提供する方法を求めています。 Reactアプリケーション（クライアント側）がNodeバックエンド（サーバー側）を呼び出すには、両方を公開する必要があります。 、そして、

location/{ 
    # Set this to the directory containing your React app's index.html. 
    root /var/www/; 
    try_files $uri /index.html; 
} 

ノードサーバのためにあなたは、あなたが持っているものに保つだろうが、そうのように、異なるパスにそれを置く：あなたはそうのようなnginxのディレクティブを追加する必要があります

location /api { 
    proxy_set_header X-Real-IP $remote_addr; 
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
    proxy_set_header X-NginX-Proxy true; 
    proxy_pass http://localhost:5000/; 
    proxy_ssl_session_reuse off; 
    proxy_set_header Host $http_host; 
    proxy_cache_bypass $http_upgrade; 
    proxy_redirect off; 
} 

このプロキシ/apiをします静的コンテンツ/var/wwwをルートルート（/）として提供している間に、ノードサーバーを停止します。

注：反応設定を変更して、/apiを反映する必要がある場合があります。