nginx同一个地址端口代理多个页面

最新推荐文章于 2025-07-16 16:45:29 发布

LMD菜鸟先飞

最新推荐文章于 2025-07-16 16:45:29 发布

阅读量4w

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u011390452/article/details/91895077

angular 同时被 2 个专栏收录

5 篇文章

订阅专栏

nginx

2 篇文章

订阅专栏

本文介绍如何在Nginx中配置同一IP和端口代理多个Angular项目的方法，包括解决资源加载路径问题及index.html中base href的调整技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时候在使用nginx代理页面是，会需要一个ip地址同一个端口代理多个前段页面，可能是angular页面，可能是静态页面，这时在一个server中配置就会出现只有一个起作用的情况，所以就需要做一些特别的处理。

使用nginx代理时，如果需要代理页面，则需要做如下配置

server {
listen 8080;
server_name www.test.com;

location /{
root /var/opt/test/angulartest/;
index index.html;
}

location /test{
proxy_pass http://127.0.0.1:8072/;
}
}

注：我自己在配置页面是加 location /testindex 来代理页面不太管用，不知道是nginx不支持还是我配置错误。

当需要用8080端口代理两个项目的页面时，在server中增加location配置是不管用的，这时候就需要再添加一个server代理第二个页面，然后再从第一个server代理到第二个server，配置如下：

server {
listen 8080;
server_name www.test.com;

location / {
root /var/opt/test/angulartest/;
index index.html;
}

location /twoindex {
proxy_pass http://127.0.0.1:8081; #代理到下边8081的地址
}

location /test {
proxy_pass http://127.0.0.1:8072/;
}
}

server {
listen 8081;
server_name localhost;

location /{
root /var/opt/test/angulartwo/;
index index.html;
}

location /test{
proxy_pass http://127.0.0.1:8072/;
}
}

这时候

访问：http://127.0.0.1:8080/就会访问到angulartest项目的页面

访问：http://127.0.0.1:8080/twoindex就会访问到angulartwo项目的页面

个人一点浅薄的经验，如有错误，请指正。

后续补充：

在实际应用中，发现光靠上面的配置还不行，在angular项目中，如果像上面那样配置会导致页面无法加载出来，如下图所示：

js和css等文件都无法找到，实际路径应该是http://127.0.0.1:8080/twoindex/polyfills.8e0211feb69d62da2b34.js，因为我们用了一层/twoindex/路径代理。

经过查询，angular打包命令可以修改此路径，命令如下：ng build --prod --aot --base-href ./twoindex/，还是不行，因为打包后基础路径成了./twoindex/，我们不想要点号，我们想要的是/twoindex/，我有修改为ng build --prod --aot --base-href /twoindex/，但是修改后路径变成了C:/Program Files (x86)/Git/twoindex/，这不是搞笑吗，无语了，然后试了各种都不行，最后发现实际上这个路径是修改的index中的base路径，如下图：

那我直接修改这个数据就好了，我把打包后的index.html中的href值修改为/twoindex/（这里要注意的是，接口对应的访问地址就变成了http://127.0.0.1:8080/twoindex/test/接口，即将nginx的两个配置地址叠加了），发布上去后可以正常访问了，但是如果我用自动发布的话难道打包后再去修改，肯定不行，所以直接修改打包之前的index.html就好了。这样的话就可以在nginx中一个IP和端口配置多个angular页面代理。

需要注意的是，配置了basehref后，html代码中的src地址引用需要注意，开头不能是/，具体使用方式如下：

参考：https://www.cnblogs.com/keatkeat/p/5810987.html

可以获取图
<base href="/">
<img src="/images/stickman.gif" width="24" height="39">

可以获取图
<base href="/">
<img src="images/stickman.gif" width="24" height="39">

不可以获取图
<base href="/images/">
<img src="/stickman.gif" width="24" height="39">

可以获取图
<base href="/images/">
<img src="stickman.gif" width="24" height="39">