利用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同一端口部署多个前端内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！