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 dev服务器提供，但NGinx不会看到它。

网址static/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;
}

Answer 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应用的设置，并且运行良好。

Answer 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]
   }
}

使用NGinx反向代理来创建反应应用

3 个答案: