Nginx 背后的 React 应用开发

Question

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

我有一个包含静态文件的生产 nginx 配置，但我试图让 dev 也能正常工作 - 使用热重载和 webpack 开发服务器。我有这个工作，但我意识到如果我可以使用 /r/ 和 /a/ 来确定反应范围会更好。但是，使用下面的配置，每当我转到 localhost/r/ 时，bundle.js 都会位于 /static/ 中。有没有办法将 /static/ 设置为 /r/static/ 用于 react 应用？

有更好的方法吗？

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/
  ...
}

查看the nginx.org docs for proxy_pass。