reactjs - Nginx 背后的 React App 开发

Question

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

我有一个包含静态文件的生产 nginx 配置，但我试图让 dev 也能工作 - 使用热重载和 webpack 开发服务器。我已经按照它应该的方式工作了，但我意识到如果我可以用/r/和 angular 应用程序来确定 react 的范围会更好/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 .