Nginx 部署多个前端项目

发表于2022-02-15更新于2022-02-15字数统计220阅读时长1分

背景

同一台服务器，需要部署多个Vue前端项目，同时共用同一个后端项目。因此需要进行Nginx配置。

开始配置

基于端口实现

进入Nginx的配置文件nginx-1.20.1/conf/nginx.conf，设置配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
server {
    # 此处设置端口号
    listen       82;
    server_name  localhost;

    location / {
      	# 此处设置前端文件的存放路径
        root   D:/dis/dist;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

# 设置第二个端口
server {
	# 此处设置端口号
    listen       83;
    server_name  localhost;

    #charset koi8-r;
    #access_log  logs/host.access.log  main;

    location / {
        # 此处设置前端文件的存放路径
        root   D:/dis/dist_qianduan;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

然后运行nginx -s reload重启服务或者nginx -s quit、start nginx来启动服务，效果如下图所示：

图一

图二