[英]Use NGinx reverse proxy for create-react-app
I'm trying to create a ReactJS app on a remote Ubuntu server.我正在尝试在远程 Ubuntu 服务器上创建一个 ReactJS 应用程序。 In order to test it in the browser I'm using the NGinx reverse-proxy features as this.
为了在浏览器中测试它,我使用了 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;
}
}
the 5000 port is for the REST /api
end-points, all good here. 5000 端口用于 REST
/api
端点,这里一切都很好。
But the 3000 port on which the development react server runs creates issues.但是运行开发反应服务器的 3000 端口会产生问题。
The site opens as needed at http://mentalg.com/client
, but inside the index.html
there is a url for the script file to be executed as static/js/bundle.js
file.该站点根据需要在
http://mentalg.com/client
上打开,但在index.html
有一个脚本文件的 URL,该脚本文件将作为static/js/bundle.js
文件执行。 This file is served by the React dev server normally but NGinx won't see it.该文件通常由 React 开发服务器提供,但 NGinx 不会看到它。
The url static/js/bundle.js
is generated on the fly by the create-react-app
dev server, can't control it. url
static/js/bundle.js
是由create-react-app
开发服务器动态生成的,无法控制。
How do I modify further the nginx proxy to server the files from static
folder correctly?如何进一步修改 nginx 代理以正确处理
static
文件夹中的文件?
Adding these 2 rules, solved the initial problem.添加这两个规则,解决了最初的问题。
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;
}
I had the same issue, and found a way to solve it by using a combination of rewrite and setting the homepage option in create-react-apps package.json.我遇到了同样的问题,并通过在 create-react-apps package.json 中使用重写和设置主页选项的组合找到了解决它的方法。
In package.json
you add在
package.json
你添加
"homepage": "http://172.31.23.249/client"
This will make the generated url in index.html
to be generates a /client/static/js/...
so it will reach the right redirect directive for nginx.这将使
index.html
生成的 url 生成一个/client/static/js/...
因此它将到达 nginx 的正确重定向指令。
Once it reaches the redirect from nginx we need to remove the leading /client
before passing it on to the proxy, which we can do with a rewrite directive.一旦它到达来自 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;
}
}
I have this setup with several react apps served on the same host in this way, and it's working nicely.我在同一台主机上以这种方式提供了多个 React 应用程序,并且运行良好。
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]
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.