Reactjs 使用Docker Compose为React和Flask配置Nginx

我正在尝试使用Nginx为网站配置多个Docker容器

我让docker compose工作来启动每个容器，但在使用Nginx时，我很难让React应用程序在Gunicorn WSGI服务器上运行Flask API

知道为什么会这样吗？它在图片中没有Nginx的情况下工作正常。我是否也需要一个用于flask应用程序的Nginx conf？或者是从Nginx将请求路由到Gunicorn WSGI服务器的情况

反应前端容器

Nginx.conf

Docker compose

---

是的，您需要将Nginx中的流量代理到WSGI应用程序，比如

server {
    listen 80;
    server_name your_domain www.your_domain;

    location / {
        include uwsgi_params;
        uwsgi_pass unix:/home/sammy/myproject/myproject.sock;
    }
}

阅读更多

使现代化 在这种情况下，您需要代理Gunicorn，它位于一个单独的容器中，名称为middleware

因此，uwsgi_pass指令应引用该容器：

server {
    listen 80;
    server_name your_domain www.your_domain;

    location / {
        include uwsgi_params;
        uwsgi_pass http://middleware:5000;
    }
}

---

请注意，如果您使用的是Gunicorn-它使用的是proxy_pass，而不是uwsgi_pass。

日志中有任何错误吗？对此没有任何乐趣，但仍在尝试您是否建议对前端容器中的Nginx配置进行这些更改？或者我应该为Nginx创建一个单独的容器吗？看看您的构建-前端是Nginx应该公开WSGI的地方。所以它应该放在那里。您需要调整以反映您的WSGI配置，例如路径。不幸的是，这些配置更改针对每个链接的不同方法-我使用docker compose来编排所有内容，因此连接需要路由到另一个容器，与本地uWSGI服务器不同，经过编辑的应答将导致Nginx直接路由到uWSGI/flask容器，而不是将API请求从React路由到flask

version: '3.7'

services:
  middleware:
  build: 
      context: ./middleware
      dockerfile: Dockerfile.prod
  command: gunicorn --bind 0.0.0.0:5000 main:app
  ports:
    - 5000:5000
  env_file:
    - ./.env.prod
frontend:
  container_name: frontend
  build:
    context: ./frontend/app
    dockerfile: Dockerfile.prod
  ports:
  - '80:80'

server {
    listen 80;
    server_name your_domain www.your_domain;

    location / {
        include uwsgi_params;
        uwsgi_pass unix:/home/sammy/myproject/myproject.sock;
    }
}

server {
    listen 80;
    server_name your_domain www.your_domain;

    location / {
        include uwsgi_params;
        uwsgi_pass http://middleware:5000;
    }
}