在本地-Nginx容器上的React App帶有Node Express容器的代理

Question

這本來應該很簡單，但是看起來我缺少一些基本知識，我們將不勝感激。

我在本地MacBook上運行POC。 基本思想是使用create-react-app build腳本build一個React App，並將其部署到本地nginx-alpine容器中。 我能夠做到這一點。 我能夠訪問index.html並查看客戶端容器運行時應該看到的內容。

我有一個使用node docker映像站起來的本地計算機上運行的node-express后端。 我可以進行設置，並且可以通過瀏覽器訪問這些圖像正在提供的端點。

問題是當我的api中的api調用這些Express端點時。 我已經在我的nginx.conf設置了proxy_pass ，並嘗試了多種設置方法。 沒有一個工作。 我試過使用localhost ，厭倦了使用127.0.0.1 ，嘗試使用docker容器的IP地址，嘗試使用docker service name ，嘗試在我的nginx.conf中將其設置為upstream ，嘗試直接在proxy_pass使用后端URL。 什么都沒有。

這是代碼...

http://localhost/ ->加載用戶界面

http://localhost:3001/features >返回我需要在UI上使用的JSON有效負載

http://localhost/admin >是UI上的組件，該組件使用fetch API加載路徑/features 。

nginx.conf

  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;

    }
}

我的配置文件中明顯有什么問題嗎？

后端API使用此docker-compose ，我認為這不是問題，因為我可以在瀏覽器中正常使用這些端點。 但是，這是毫無疑問的。

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

Answer 1

問題是您的proxy_pass在nginx容器內運行。 本地主機和127.0.0.1都指向nginx容器本身。 您想要做的是到達主機。 所以你有以下可能的選擇

在proxy_pass中使用主機IP

您可以在proxy_pass中使用主機的IP

在主機網絡上運行Nginx容器

在--network host run命令中，您可以在運行nginx容器時添加--network host 。 這將確保localhost指向主機

在應用程序的容器網絡上運行Nginx

您還可以將nginx服務添加到docker-compose中，並將應用服務的名稱用於proxy_pass。

或者，您可以創建一個docker network ls然后找到特定於您的撰寫文件的網絡。 你也可以用

我的建議是使其成為撰寫文件的一部分。