利用nginx同一端口部署多个前端的办法(亲测有效版)
更新时间：2026年01月26日 09:23:58 作者：呼啦啦呼啦啦啦啦啦啦
在Nginx中配置同一个端口支持多个前端应用,通常可以通过不同的路径（location）来映射不同的前端项目,这篇文章主要介绍了利用nginx同一端口部署多个前端的相关资料,需要的朋友可以参考下
本作用于提供只开放单端口情况下需要开放多个前端的情况
前言
许多时候由于各种策略或是出于安全等考虑，只开放单个端口，但是此时你需要上线两个项目前端，就需要用到了nginx同一端口部署两前端的方法。
一、必备条件
打包文件：
1.两个前端的路由守卫不互相冲突。
2.两个前端打包的时候不能直接打包，需要在publicpath中加上对应转发路径，如果不加上就会出现，请求的路径匹配不上nginx转发原则的情况。
nginx：
安全稳定版本能跑起来的nginx（笔者吃过亏，遇到过本身就跑不起来的nginx）。
二、配置nginx的conf
这是关键的步骤
将nginx.conf改成：
server {
listen 80;
server_name example.com;
# 配置第一个应用，路径为 /app1/
location /app1/ {
alias /var/www/app1/;
try_files $uri $uri/ /app1/index.html;
}
# 配置第二个应用，路径为 /app2/
location /app2/ {
alias /var/www/app2/;
try_files $uri $uri/ /app2/index.html;
}
}
alias中配置的是两个前端文件路径，转发的标识根据你打包文件中publicpath的路径而定制
注意事项
在 alias 后的路径末尾需要添加斜杠 /，否则可能会导致文件路径错误。
最后
到此这篇关于利用nginx同一端口部署多个前端的文章就介绍到这了,更多相关nginx同一端口部署多个前端内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了nginx中状态统计的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要介绍了nginx实现发布静态资源的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-01![解决nginx:[emerg] getpwnam(“nginx“)failed报错问题](//img.jbzj.com/images/xgimg/bcimg2.png)
解决nginx:[emerg] getpwnam(“nginx“)failed报错问题
编译安装nginx时,启动服务报错nginx:[emerg]getpwnam("nginx")failed,原因是没有为nginx创建用户,解决方法是创建一个nginx用户,该用户是你在编译时指定的用户2025-02-02
这篇文章主要介绍了Nginx 工作原理，帮助大家更好的理解和学习nginx，感兴趣的朋友可以了解下2020-10-10
使用nginx部署前端项目是一篇非常详细的教程,旨在帮助初学者使用Nginx来部署前端项目,这篇文章主要给大家介绍了关于宝塔nginx部署前端页面刷新报404错误的解决办法,需要的朋友可以参考下2024-03-03
location主要做定位功能,根据uri来进行不同的定位,下面这篇文章主要给大家介绍了关于Nginx配置文件中location配置的多种场景,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
安装Windows版nginx及部署前端代码并解决刷新出现404问题
这篇文章主要给大家介绍了关于安装Windows版nginx及部署前端代码解决刷新出现404问题的相关资料,使用nginx部署前端项目是一篇非常详细的教程,旨在帮助初学者使用Nginx来部署前端项目,需要的朋友可以参考下2023-12-12
这篇文章主要为大家介绍了nginx的配置转发到其他网站过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了Nginx常见的错误配置举例，帮助大家更好的理解和学习使用Nginx，感兴趣的朋友可以了解下2021-03-03
在高并发场景下,如果客户端与服务器的连接长时间未响应,会占用大量的系统资源,影响其他正常请求的处理效率,为了解决这个问题,可以通过设置 Nginx 的连接超时时间来优化资源管理,提高服务器的稳定性,以下是具体的配置方法和测试步骤,希望对你有所帮助2025-02-02
![解决nginx:[emerg] getpwnam(“nginx“)failed报错问题](http://img.jbzj.com/images/xgimg/bcimg2.png)
最新评论