node.js - 在本地 - Nginx 容器上的 React 应用程序，具有 Node Express 容器的代理

Question

这应该非常简单，但看起来我缺少一些非常基本的东西，任何帮助将不胜感激。

我正在本地 MacBook 上运行 POC。基本思想是使用 create-react-app build 脚本构建 React 应用程序，并将其部署到本地 nginx-alpine容器。我能够做到这一点。我能够访问 index.html 并查看客户端容器运行时应该看到的内容。

我有一个在同一台本地计算机上运行的 node-express 后端，该后端使用 node docker 镜像启动。我能够进行设置，并且能够访问这些图像从我的浏览器提供的端点。

问题是当我的 React 中的 api 调用这些快速端点时。我已经在我的 nginx.conf 中设置了 proxy_pass 并尝试了多种设置方法。这些都不起作用。我尝试过使用localhost，厌倦了使用127.0.0.1，尝试使用docker容器的IP地址，尝试使用docker服务名称，尝试过在我的 nginx.conf 中将其设置为 upstream，尝试直接在 proxy_pass 中使用后端 URL。没有任何效果。

这是代码...

http://localhost/ --> 加载 UI

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 容器内运行。 localhost 和 127.0.0.1 都指向 nginx 容器本身。您想要做的是到达主机。所以你有以下可能的选择

在 proxy_pass 中使用主机 IP

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

在主机网络上运行 nginx 容器

在 docker run 命令中，您可以在运行 nginx 容器时添加 --network host 。这将确保 localhost 指向主机

在应用的容器网络上运行 nginx

您还可以将 nginx 服务添加到您的 docker-compose 中，并使用您的应用程序服务的名称作为 proxy_pass。

或者您可以执行docker network ls，然后您会找到特定于您的撰写文件的网络。你也可以使用它

我的建议是将其作为撰写文件的一部分。