JSON APIとReact.jsを同じボックスに提供するためのNGINXの設定方法

Question

私はphoenixフレームワークを使用してElixirで書かれたJSON APIに取り組んでおり、昨日はうまく展開しました。しかし、WebフロントエンドではAPIはそれほど有用ではありません。私はReact.jsを使いました。

私は蒸留所とガトリングの組み合わせを使ってphoenix APIを配備していますが、Postmanを使用してテストするとすべてが機能しているようです。

は、それから私は、私は、その後のルートに.envファイルを作成し、以下、

の/ etc/nginxの/サイト利用可能/ kegcopr_api

server { 
    listen 80; 
    server_name kegcopr.chrisrjones.com; 
    root /opt/Code/react/kegcopr-frontend/build; 
    index index.html index.htm; 

    access_log /home/deploy/deployments/kegcopr_api/nginx.access.log; 
    error_log /home/deploy/deployments/kegcopr_api/nginx.error.log; 

    location/{ 
    proxy_set_header X-Real-IP $remote_addr; 
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
    proxy_set_header Host $http_host; 
    proxy_redirect off; 
    proxy_pass http://localhost:33725; 
    proxy_set_header Upgrade $http_upgrade; 
    proxy_set_header Connection "upgrade"; 
    } 

} 

ようloookするnginxの設定ファイルを編集しました次の行でReact.jsプロジェクト、

REACT_APP_API_URL=http://localhost:33725/api 

これは、GREう構成された取得する方法上の任意のヘルプ感謝します。

UPDATE 私は

REACT_APP_API_URL=http://kegcopr.chrisrjones.com/api 

に.envファイルを変更し、以下のコマンドを実行し、

npm run build 

が、私はまだブラウザでReact.jsフロントエンドの表示を見ていないです。

Answer 1

rootディレクトリを設定しましたが、すべてのリクエストを無条件でlocalhost:33725に送信しています。あなたはrootディレクトリから静的ファイルを提供してproxy_passに他のすべての要求を渡したい場合は、このようなtry_filesを使用することができます。

location/{ 
    try_files $uri @proxy; 
} 

location @proxy { 
    proxy_set_header X-Real-IP $remote_addr; 
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
    proxy_set_header Host $http_host; 
    proxy_redirect off; 
    proxy_pass http://localhost:33725; 
    proxy_set_header Upgrade $http_upgrade; 
    proxy_set_header Connection "upgrade"; 
} 

try_files URLと同じ名前でroot内のファイルを検索してみますファイルを見つけられなかった場合は、@proxyに要求が渡され、localhost:33725で動作するPhoenixアプリケーションに渡されます。