Question

这应该非常简单，但看起来我错过了一些非常简陋的内容，我们将不胜感激。

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

我在同一台本地计算机上运行node-express后端，该计算机使用node泊坞窗图像站起来。我能够设置它，我能够点击这些图像从我的浏览器提供的端点。

问题是当我的反应中的api称这些快速终点时。我已在proxy_pass中设置了nginx.conf，并尝试了多种方法进行设置。它都不起作用。我尝试使用localhost，使用127.0.0.1累了，尝试使用docker容器的IP地址，尝试使用docker service name，尝试在upstream中设置nginx.conf 1}}，尝试直接在proxy_pass中使用后端网址。什么都行不通。

这是代码......

http://localhost/ - ＆gt;加载UI

http://localhost:3001/features - ＆gt;返回我需要在UI上使用的JSON有效负载

http://localhost/admin - ＆gt;是我的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;

    }
}

我的配置文件中有什么明显的错误吗？

使用此docker-compose启动后端API，我不相信这是一个问题，因为我可以在浏览器中使用端点。但这里是无可奈何的。

version: '2'

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

用户界面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并找到特定于您的撰写文件的网络。您也可以使用

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

在本地 - 使用代理Node Express容器的Nginx容器上的React App

1 个答案: