在本地 - Nginx容器上的React应用代理到Node Express容器

Question

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

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

我有一个node-express后端运行在同一台本地机器上，该机器使用node码头图像站起来。我可以进行设置，并且可以通过浏览器访问这些图像的端点。

问题是当我的api反应称这些表达端点。我已在我的nginx.conf中设置了proxy_pass，并尝试了多种方式进行设置。它没有工作。我尝试过使用localhost，使用127.0.0.1累，尝试使用码头集装箱的IP地址，尝试使用docker service name，尝试在我的nginx.conf中将其设置为upstream，尝试直接在proxy_pass中使用后端URL。什么都没有

这里是代码...

http://localhost/ - >加载UI

http://localhost:3001/features - >返回一个JSON有效载荷我需要在UI

使用

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; 

    } 
} 

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

使用此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 

Answer 1

问题是你的proxy_pass在nginx容器内运行。有localhost和127.0.0.1都指向nginx容器本身。你要做的是到达主机。所以，你有以下可能的选项

在proxy_pass使用主机IP

可以在proxy_pass

使用的IP主机上运行主机网络上nginx的容器

在你码头运行命令，您可以在运行nginx容器时添加--network host。这将确保本地主机指向主

运行你的应用程序的容器网络上nginx的

您还可以添加nginx的服务，您的码头工人，撰写和使用应用服务的名称proxy_pass。

或者你可以做一个docker network ls，你会发现一个特定于你的撰写文件的网络。您也可以使用它

我的建议是使它成为撰写文件的一部分。