nginx 如何使用反向代理使HTML脚本路径通用

fslejnso  于 2022-12-17  发布在  Nginx
关注(0)|答案(2)|浏览(415)

我正在使用Node.js和Express来制作在云中的服务器上运行的Web应用程序。(默认为3000,但你可以指定一个端口)。所以如果我有多个应用程序在服务器上运行,它们将各自监听一个唯一的端口号,这一切都很好。但你不想在URL中使用端口号访问应用程序,这很难看。
我在服务器上使用Nginx来执行反向代理,它可以将URL中的路径转发到适当的应用程序正在侦听的端口。
因此,如果“myApp”正在侦听端口3010,则可以通过URL“https://myserver/myApp”访问它,Nginx会将其路由到服务器上的端口3010。但是,在我的本地机器上,也就是我进行开发和测试的地方,必须在“localhost:3010”访问应用程序,因为没有代理。
所以问题就来了,当index.html页面加载到浏览器中时,它会从服务器中获取CSS和JavaScript文件,典型的语法是:

<link rel="stylesheet" href="/stylesheets/myStyle.css">

该路径名应该是相对于应用程序的基本目录,并且应该在请求URL前加上适当的前缀。当在本地机器上运行时,使用“localhost:3010”,样式表和脚本会被拉入。但是在远程服务器上运行时,使用URL“https://myserver/myApp”,文件不会加载,我得到了一个404。我必须在文件路径名前加上URL路由名,以便请求能够像这样正确地被代理路由;

<link rel="stylesheet" href="/myApp/stylesheets/myStyle.css"">

不幸的是,这个路径名在没有myApp目录的localhost上不起作用,这意味着我没有可移植的代码,在本地运行和在服务器上运行时必须是不同的,代码必须知道服务器上的路由名是什么,这很糟糕。
也许我配置的东西不正确?这是路由子句在Nginx中的样子;

location /myApp {
                proxy_pass http://localhost:3010/;
                proxy_http_version 1.1;
                proxy_set_header Host $host;
                proxy_set_header X-NginX-Proxy true;

                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
        }
rhfm7lfc

rhfm7lfc1#

原来index.html试图从远程服务器拉入的文件的路径名前缀非常挑剔,而这个小小的区别就是问题所在(至少在我的例子中是这样)。
多个前缀在本地运行并在浏览器中通过端口号访问时工作;

<link rel="stylesheet" href="/stylesheets/myStyle.css">

<link rel="stylesheet" href="stylesheets/myStyle.css">
还有<link rel="stylesheet" href="./stylesheets/myStyle.css">
但是,在Nginx之后的远程服务器上似乎唯一起作用的语法是“./”语法; <link rel="stylesheet" href="./stylesheets/myStyle.css">

ffx8fchx

ffx8fchx2#

首先,检查你的快速静态文件配置,以保证你的静态文件服务正确。
关于nginx的配置,请参考这里的讨论,它处理的问题和你一样:Express + Nginx. Can't serve static files和我只是相信,您可以按照相同的解决方案解决问题

相关问题