为 create-react-app 使用 NGinx 反向代理答案

【问题标题】：Use NGinx reverse proxy for create-react-app为 create-react-app 使用 NGinx 反向代理
【发布时间】：2023-04-08 02:09:01
【问题描述】：

我正在尝试在远程 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 不会看到它。

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

如何进一步修改 nginx 代理以正确服务器来自 static 文件夹的文件？

【问题讨论】：

也许可以通过重写来解决它？我有同样的问题，但我不确定如何。

标签： reactjs create-react-app nginx-reverse-proxy

【解决方案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;
}

【讨论】：

请问为什么这里是您的域 ip 而不是 localhost (127.0.0.1)？
猜是复制/粘贴代码，localhost 也可以
这是一个非常丑陋的解决方案，并且不适用于多个反应服务器。还没有更好的解决方案吗？
我也很想看看。也许有一天；）

【解决方案2】：

我遇到了同样的问题，并找到了一种方法来解决它，方法是结合使用重写和在 create-react-apps package.json 中设置主页选项。

在package.json你添加

"homepage": "http://172.31.23.249/client"

这将使index.html中生成的url生成一个/client/static/js/...，因此它将到达nginx的正确重定向指令。

一旦它到达来自 nginx 的重定向，我们需要在将其传递给代理之前删除前导 /client，我们可以使用重写指令来做到这一点。

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/ {
                rewrite ^/client(/.*)$ $1 break;

                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;
        }
}

我有这个设置，多个 react 应用程序以这种方式在同一主机上提供服务，并且运行良好。

【讨论】：

据我所知，homepage 仅受 webpack 构建脚本的认可，而不是 webpack 启动脚本。 webpack 开发服务器仍然返回一个 index.html，其中包含像 /static/main.js 这样的相对 URL，而不是 /client/static/main.js。我错过了什么？
@jdolan 你没有错过任何东西。问题是关于如何在 NGINX 服务器后面部署应用程序。在开发服务器上，您可以改用proxy 字段。

【解决方案3】：

server {
   listen 80 default_server;
   root /[file_root_directory];
   server_name [hostname];
   index index.html index.htm;
   location / {
       proxy_pass http://127.0.0.1:[PORT]
   }
}

【讨论】：