通过nginx反向代理实现直接访问域名而不用输入端口号

最近一个项目上线时遇到了一个问题,简单说就是同一个后端,但是有两个前端服务,需要部署在同一个域名下。

1. 问题描述

一个项目中有客户侧和管理员侧两种访问界面,后端(就是我)开发时写在了同一个项目中,前端开发时认为客户侧和管理员侧看到的界面风格完全不一致,用了两个不同的脚手架进行开发的,使得出现了两个前端静态资源。

2. 奇奇怪怪的解决方式

我们都知道,大家访问http请求时默认端口号是80,所以在域名后面就不会有:80这样奇怪的写法了,那我可以再添加一个端口,比如8081,让80端口转发到客户侧,8081端口转发到管理员侧,这样客户登录时只输入域名即可,管理员登录时需在域名后面加上:8081进行访问。

此方法需要在nginx配置文件中多加一个server:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
server {
listen 80;
# 修改为你的域名
server_name _;

location / {
root /data/customer_dist;
index index.html index.htm;
}

}

server {
listen 8081;
# 修改为你的域名
server_name _;

location / {
root /data/admin_dist;
index index.html index.htm;
}

}

如上,给老大看了后就挨了顿批😂

这种方式也太不专业了,没见过哪些成熟网站是通过域名+端口号的方式去访问的。

3. 通过修改nginx配置来实现

其实思路也很简单,server中还是只监听80端口,然后可以多添加location来实现转发。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
server {
listen 80;
# 修改为你的域名
server_name _;

location / {
root /data/customer_dist;
index index.html index.htm;
}
location /admin {
alias /data/admin_dist/;
index index.html index.htm;
}

}

这样,在域名后面加上/admin即可访问管理员侧了。

上述配置解释:在路径中匹配到admin后,nginx会访问alias指定的路径,alias正如其名,其指定的路径就是location的别名。

root与alias不同的是,通过root访问的路径是root指定的值加上location指定的值,如上例中,如果把alias换为root,访问的路径就为/data/admin_dist/admin,这样显然就不能访问到了。

除此之外,root与alias的其他区别:

  1. alias 只能作用在location中,而root可以存在server、http和location中。
  2. alias 后面必须要用 “/” 结束,否则会找不到文件,而 root 则对 ”/” 可有可无。

参考

1.Nginx 配置中nginx和alias的区别分析