所以我试图使用 NGINX 作为 2 个 react 应用程序和 1 个节点 js api 的反向代理。每个都在单独的 docker 容器中。
例如,
第一个示例和第二个示例都按预期工作。没有问题。这是我在配置时遇到问题的第二个示例。它应该只是导致一个在 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
最佳答案
所以这不是一个真正的答案 - 因为我有同样的问题 - 但是如果你尝试将 PUBLIC_URL 设置为带有“./”或“./your-path”的环境变量,你应该会看到一些变化。如果您检查页面的源代码并单击静态资源的 URL,您应该会在那里看到 JS。您可能需要通过在它之前添加/adminapp 来修改路径。我将继续研究它,所以我会更新我发现的任何其他东西。另外仅供引用,这可能是相关的:
https://github.com/facebook/create-react-app/issues/8222#issuecomment-568308139
关于reactjs - Nginx 反向代理和多个 React 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60583832/