使用 NGinx 反向代理进行 create-react-app

Question

我正在尝试在远程 Ubuntu 服务器上创建一个 ReactJS 应用程序。为了在浏览器中测试它，我使用了 NGinx 反向代理功能。

server {
    listen 80;

    server_name mentalg.com;

        location / {
                proxy_pass http://172.31.23.249:5000;
                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 /client/ {
                proxy_pass http://172.31.23.249: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;
        }
}

5000 端口用于 REST/api端点，这里一切正常。

但是运行开发反应服务器的 3000 端口会产生问题。

该站点根据需要在 处打开http://mentalg.com/client，但在 里面index.html有一个 url 脚本文件作为static/js/bundle.js文件执行 。该文件通常由 React 开发服务器提供，但 NGinx 不会看到它。

urlstatic/js/bundle.js是由create-react-app开发服务器动态生成的，无法控制。

如何进一步修改 nginx 代理以static正确处理文件夹中的文件？

Answer 1

添加这两个规则，解决了最初的问题。

location /static/ {
        proxy_pass http://172.31.23.249: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.31.23.249: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;
}