ローカルのNickxコンテナのアプリケーションとノードエクスプレスコンテナのプロキシを使用した

Question

これは非常に単純なはずでしたが、私は何か非常に初歩的なものを見逃しているようです。

ローカルのMacBookでPOCを実行しています。基本的な考え方は、create-react-appbuildスクリプトを使用して構築されたReact Appをローカルのnginx-alpineコンテナにデプロイすることです。私はそれを得ることができます。私はindex.htmlにアクセスして、クライアントコンテナが動作しているときに何が表示されるのかを確認することができます。

私は同じローカルマシンでnode-expressバックエンドを実行しており、nodeドッカーイメージを使用して立ち上がっています。私はこれを設定することができ、私はこれらの画像が私のブラウザから提供されているエンドポイントを打つことができます。

私の反応内のapiがこれらの特急エンドポイントと呼ばれるときに問題が発生します。私はnginx.confにproxy_passを設定して、それを設定する方法を数多く試しました。それのどれも働かない。私はlocalhostを使用しようとしました。127.0.0.1を使用して疲れました。ドッカーコンテナのIPアドレスを使って試してみました。にupstreamとして設定しようとしました。proxy_passに直接バックエンドURLを使ってみました。何も動作しません。ここで

がコードです...

http://localhost/ - >ロードUI

http://localhost:3001/features - >コンポーネントである - >は、私が

http://localhost/admin UI

に使用する必要がJSONペイロードを返します私のUIの fetch APIを使用して、 /featuresのパスを読み込みます。

upstream app_servers { 

    server localhost:3001; 

} 

# Configuration for the server 
server { 

    # Running port 
    listen 80; 
    root /usr/share/nginx/html; 

    location/{ 
     try_files $uri /index.html; 
    } 
    # Proxying the connections connections 
    location /features { 

     proxy_pass   http://app_servers; 
     proxy_redirect  off; 
     proxy_set_header Host $host; 
     proxy_set_header X-Real-IP $remote_addr; 
     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
     proxy_set_header X-Forwarded-Host $server_name; 

    } 
} 

nginx.conf

は私の設定ファイルで、明らかに何か問題はありますか？

このdocker-composeを使用してバックエンドAPIを起動しましたが、これは私のブラウザからエンドポイントを正しく使用できるため問題ではないと思います。しかしここでそれは決して無限です。

version: '2' 

services: 
    thing1: 
    image: toggler-backend 
    container_name: thing1 
    volumes: 
     - ./backend:/src/backend 
    ports: 
     - "3001:3000" 

UIのDockerfileはこの...

FROM nginx:alpine 
COPY nginx.conf /etc/nginx 

COPY build /usr/share/nginx/html 

であると私は今のdocker runコマンドを使用してUIを起動します。

docker run -it -p 80:80 toggler-client