利用nginx同一端口部署多个前端的办法(亲测有效版)

前言

许多时候由于各种策略或是出于安全等考虑，只开放单个端口，但是此时你需要上线两个项目前端，就需要用到了nginx同一端口部署两前端的方法。

一、必备条件

打包文件：

1.两个前端的路由守卫不互相冲突。

2.两个前端打包的时候不能直接打包，需要在publicpath中加上对应转发路径，如果不加上就会出现，请求的路径匹配不上nginx转发原则的情况。

nginx：

安全稳定版本能跑起来的nginx（笔者吃过亏，遇到过本身就跑不起来的nginx）。

二、配置nginx的conf

这是关键的步骤

将nginx.conf改成：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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 后的路径末尾需要添加斜杠 /，否则可能会导致文件路径错误。