我在Localhost:3000上运行了一个节点React应用程序,我正在用Nginx进行反向代理并在/Web/上公开。但是,该应用程序生成的文件存在问题,因为它们未正确引用。
例如,某些.js文件是在localhost中生成的:3000/static/js,但是链接未正确引用相对路径(请参见下面生成的HTML代码(。我认为可以通过重写来解决此问题,但是我现在的工作方式无法正常工作。甚至可以通过重写解决此问题,我应该如何重写,以便将所有相对链接使用/web/?
进行预先处理。生成的html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="/manifest.json" />
<!--
Template...
...
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
Template
...
-->
<script src="/static/js/bundle.js"></script><script src="/static/js/0.chunk.js"></script><script src="/static/js/main.chunk.js"></script></body>
</html>
nginx站点 - 可用段:
server {
listen 80;
server_name localhost;
return 301 https://$server_name$request_uri;
}
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
include snippets/self-signed.conf;
include snippets/ssl-params.conf;
access_log /var/log/nginx/site.access.log;
error_log /var/log/nginx/site.error.log error;
add_header "Access-Control-Allow-Credentials" "true";
add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS";
add_header "X-Frame-Options" "SAMEORIGIN";
location /web/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
rewrite ^(.*)$ /web/$1 break;
proxy_pass http://localhost:3000/;
}
}
您的rewrite
指令似乎是错误的。您的/web 路径在Nodejs应用中不存在。尝试编辑:
rewrite ^/web/(.*)$ /$1 break;