Nginx 背后的 React 应用程序开发

Question

我有一个旧的 Angular 应用程序和一个新的 React 应用程序，我想通过 nginx 公开它们。

我有一个包含静态文件的生产 nginx 配置，但我试图让开发人员也能工作 - 使用热重载和 webpack 开发服务器。我已经按照它应该的方式工作了，但我意识到如果我可以使用 /r/ 来确定反应范围，并使用 /a/ 来确定角度应用程序，那就更好了。但是，使用下面的配置，每当我访问 时localhost/r/，bundle.js 都会位于 中/static/。有没有办法制作/static/反应/r/static/应用程序？

有更好的方法吗？

location /r {
  proxy_pass http://172.17.0.2:3000;
  proxy_set_header   X-Forwarded-For $remote_addr;
  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 /static/ {
  proxy_pass http://172.17.0.2:3000;
  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 /sockjs-node/ {
  proxy_pass http://172.17.0.2:3000;
  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;
}

Answer 1

是的，有一种方法可以做到这一点：

location /static/ {
  proxy_pass http:/172.17.0.2:3000/r/static/
  ...
}

查看nginx.org 文档中的 proxy_pass。