Nginx反向代理和多个React应用

Question

因此，我正在尝试将NGINX用作2个React应用和1个节点js api的反向代理。每个都在单独的Docker容器中。

例如，

• localhost->导致一个反应应用

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

• [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时，我可以访问管理仪表板，因此我知道它运行得很好。

也是我的码头工人组成文件

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

所以这不是真正的答案-因为我有同样的问题-但是，如果尝试使用“ ./”或“ ./your-path”将PUBLIC_URL设置为env变量，则应该看到一些更改。如果检查页面的源代码并单击静态资源的URL，则应该在其中看到JS。您可能必须通过在/ adminapp之前添加路径来修改路径。我将继续进行研究，以便将发现的其他内容更新。仅供参考，这可能是相关的：

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