reactjs - Nginx 反向代理和多个 React 应用程序

Question

所以我试图使用 NGINX 作为 2 个 react 应用程序和 1 个节点 js api 的反向代理。每个都在单独的 docker 容器中。

例如，

本地主机 -> 导致一个 react 应用程序

localhost/admin -> 导致另一个 react 应用程序

localhost/api/getProducts -> 指向 api 的/getProducts 端点

第一个示例和第二个示例都按预期工作。没有问题。这是我在配置时遇到问题的第二个示例。它应该只是导致一个在 React 中构建的仪表板应用程序，但我得到的只是一个白屏(与第一个 React 应用程序具有相同的图标)。

这是我的 nginx 配置文件

    upstream api {
        least_conn;
        server api:8080 max_fails=3 fail_timeout=30s;
    }

    upstream app {
        least_conn;
        server app:3000 max_fails=3 fail_timeout=30s;
    }

    upstream adminapp {
        least_conn;
        server adminapp:3001 max_fails=3 fail_timeout=30s;
    }

    server {
        listen 80;

        if ($request_method = 'OPTIONS') {
            return 200;
        }

        # To allow POST on static pages
        error_page  405     =200 $uri;

        location / {
            proxy_pass http://app;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
            expires 30d;
            break;
        }

        location ~ /admin/(?<url>.*) {
            proxy_pass http://adminapp;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
            expires 30d;
            break;
        }

        location ~ /api/(?<url>.*) {
            proxy_pass http://api/$url;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }

        location /health-check {
            return 200;
            access_log off;
        }
    }

}

当我专门访问 localhost:3001 时，我可以访问管理仪表板，所以我知道它运行得非常好。

这也是我的 docker compose 文件

version: '3.7'

services:
  nginx:
    container_name: nginx
    image: nginx
    ports:
      - '80:80'
      - '443:443'
    links:
      - api:api
      - app:app
      - adminapp:adminapp
    volumes:
      - ./server/config/nginx:/etc/nginx
      - ./server/config/certs:/etc/ssl/private
  app:
    container_name: app
    build:
      context: ./frontend
      dockerfile: Dockerfile
    volumes:
      - './frontend:/usr/app/frontend/'
      - '/usr/app/frontend/node_modules'
    ports:
      - '3000:3000'
    environment:
      - NODE_ENV=development
  adminapp:
    container_name: adminapp
    build:
      context: ./admin
      dockerfile: Dockerfile
    volumes:
      - './admin:/usr/app/admin/'
      - '/usr/app/admin/node_modules'
    ports:
      - '3001:3001'
    environment:
      - NODE_ENV=development
      - PORT=3001
  api:
    container_name: api
    build:
      context: ./backend
      dockerfile: Dockerfile
    volumes:
      - './backend:/usr/app/backend/'
      - '/usr/app/backend/node_modules'
    ports:
      - '8080'
    environment:
      - NODE_ENV=development

Answer 1

所以这不是一个真正的答案 - 因为我有同样的问题 - 但是如果你尝试将 PUBLIC_URL 设置为带有“./”或“./your-path”的环境变量，你应该会看到一些变化。如果您检查页面的源代码并单击静态资源的 URL，您应该会在那里看到 JS。您可能需要通过在它之前添加/adminapp 来修改路径。我将继续研究它，所以我会更新我发现的任何其他东西。另外仅供引用，这可能是相关的:

https://github.com/facebook/create-react-app/issues/8222#issuecomment-568308139