拓十年匠心定制 · 商业建站与技术教学双线并行 咨询热线:400-886-1026 service@lmnt.cn
ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

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

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

返回列表