reactjs - 无法通过nginx公开前端React应用程序和后端Fast API应用程序，只有其中之一可以工作

Question

我有一个 docker-compose 应用程序，它具有部署在 3000 端口上的三个服务 React 前端、部署在 8000 端口上的 Fast api 后端以及部署在端口 80 上的 Ngnix。我的 docker-compose 如下所示:

version: '3'

services:
  app:
    container_name: frontend-conatiner
    restart: always
    build: ./Frontend
    ports:
      - "3000:3000"

  backend:
    container_name: backend-container
    restart: always
    build: ./Backend
    env_file:
     - ./Backend/.env.local
    volumes:
     - ./Backend/:/backend
    ports:
     - "8000:8000"
    command: uvicorn api.main:app --reload --workers 1 --host 0.0.0.0 --port 8000

  nginx:
    container_name: nginx-container
    restart: always
    build: ./nginx
    ports:
      - "80:80"
    depends_on:
      - app

我的 nginx 配置如下所示:

server {

    listen 80;
    server_name my_app;

    # Proxy settings
    location / {
        proxy_pass http://app:3000;
    }
    # Backend Proxy settings
    location /api/ {
        proxy_pass http://backend:8000;
    }
}

现在的问题是我可以在 http:localhost 访问我的前端，但我无法访问我的后端快速 API，即当我执行 http:localhost/api/docs 时 我得到未找到。当我尝试在没有 nginx 的情况下测试后端时，即在 http:localhost:8000/docs 上，它工作得很好。

我还尝试切换前端和后端的位置，如果我按如下方式更改 nginx 配置，那么我可以访问后端，但无法访问前端 React 应用程序:

server {

    listen 80;
    server_name my_app;

    # Proxy settings
    location / {
        proxy_pass http://backend:8000;
    }
    # Backend Proxy settings
    location /api/ {
        proxy_pass http://app:3000;
    }
}

所以我确信我在 nginx 配置中做错了什么，任何帮助将不胜感激。

Answer 1

这里的问题是，当您点击http:localhost/api/docs时，它将重定向到http:localhost:8000/api/docs。并且没有这样的url，只有我们有http:localhost:8000/docs。它会显示 404 Notfound

要解决这个问题，当 url 包含 /api 时，我们必须将其重定向到没有 /api url 路径的后端。

将您的 nginxconf 更新为

server {

        listen 80;
        server_name localhost;

        # Proxy settings
        location / {
            proxy_pass http://app:3000;
        }

        # Backend Proxy settings
        location /api/ {
            rewrite ^/api/(.*)$ /$1 break;
            proxy_pass http://backend:8000;
        }
    }

rewrite ^/api/(.*)$/$1 break; 这将捕获 /api 之后的所有内容并重定向到该路径