vue router history 模式服务端使用nginx负载均衡部署二级目录

时间：

分类：

vue

字数：

1.8k 字

时长：

大约需要 7 分钟

次数：

0 人阅读

本文需要处理的问题：

  1. vue 部署在二级目录，请求使用二级目录不带后面斜线访问，会自动301重定向带斜线地址，比如：请求 http://localhost:9999/test -> http://localhost:9999/test/，此方式使用单台服务器无任何影响。
  1. 如果使用 nginx upstream 配置负载均衡，上述的301重定向会跑到负载均衡的服务器，而不会指向入口机。

官方文档

vue nginx 部署方案官方文档

1
2
3
location / {
  try_files $uri $uri/ /index.html;
}

官方文档一目了然，此文档适用于不部署到二级目录，并且只有一台服务器的情况。

部署二级目录

使用 nginx alias，此场景适用于真实路径中不存在 test 目录的情况，

而路由中又需要加上 test 请求，比如： http://localhost:9999/test/，请求被映射到 D:/www/dist

1
2
3
4
5
6
7
8
9
server {
  listen       9999;
  server_name  localhost;
  location ^~ /test {
    alias   D:/www/dist;
    index  index.html;
    try_files $uri $uri/ /index.html last;
  }
}

使用 nginx root，此场景适用于真实路径中存在 test 目录的情况，比如：http://localhost:9999/test/，请求被映射到 D:/www/dist/test

1
2
3
4
5
6
7
8
9
server {
  listen       9999;
  server_name  localhost;
  location ^~ /test {
    root   D:/www/dist;
    index  index.html;
    try_files $uri $uri/ /test/index.html last;
  }
}

以上两种配置都可以实现 vue 部署到二级目录，但需要注意修改 vue.config.js 中的 publicPath: '/test'，否则所有的静态资源无法请求。

nginx 负载均衡

主要使用 nginx 的 upstream 配置负载均衡，此处不做详细介绍，由于本地模拟负载均衡，仅使用不同端口模拟访问。

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
upstream  test-server {
  server    127.0.0.1:9998 weight=1;
  server    127.0.0.1:9997 weight=1;
}

server {
  listen       9999;
  server_name  localhost;
  location ^~ /test {
    proxy_pass http://test-server;
  }
}
server {
  listen       9998;
  server_name  localhost;
  location ^~ /test {
    alias   D:/www/dist;
    index  index.html;
    try_files $uri $uri/ /index.html last;
  }
}
server {
  listen       9997;
  server_name  localhost;
  location ^~ /test {
    alias   D:/www/dist;
    index  index.html;
    try_files $uri $uri/ /index.html last;
  }
}

以上配置已经可以实现 http://localhost:9999/test/ 负载到 9998 和 9997 端口。

但是有个问题，如果访问 http://localhost:9999/test 不带后面斜线请求，nginx 会返回 301，header 中存在 Location: http://test-server:9998/test/ 或者 Location: http://test-server:9997/test/重定向地址，会重定向到负载均衡的服务器地址，而不是重定向到入口机上。

处理办法

仅需要新增一条 proxy_redirect 配置即可：

1
2
3
4
5
6
7
8
server {
  listen       9999;
  server_name  localhost;
  location ^~ /test {
    proxy_pass http://test-server;
    proxy_redirect ~^http://([^:]+)(:\d+)?(.*)$ $scheme://$host:$server_port$3;
  }
}

完整配置：

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
upstream  test-server {
  server    127.0.0.1:9998 weight=1;
  server    127.0.0.1:9997 weight=1;
}

server {
  listen       9999;
  server_name  localhost;
  location ^~ /test {
    proxy_pass http://test-server;
    proxy_redirect ~^http://([^:]+)(:\d+)?(.*)$ $scheme://$host:$server_port$3;
  }
}
server {
  listen       9998;
  server_name  localhost;
  location ^~ /test {
    alias   D:/www/dist;
    index  index.html;
    try_files $uri $uri/ /index.html last;
  }
}
server {
  listen       9997;
  server_name  localhost;
  location ^~ /test {
    alias   D:/www/dist;
    index  index.html;
    try_files $uri $uri/ /index.html last;
  }
}

附录： nginx 内置变量

内置变量存放在 ngx_http_core_module 模块中：

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
$arg_name
请求中的的参数名，即“?”后面的arg_name=arg_value形式的arg_name

$args
请求中的参数值

$binary_remote_addr
客户端地址的二进制形式, 固定长度为4个字节

$body_bytes_sent
传输给客户端的字节数，响应头不计算在内；这个变量和Apache的mod_log_config模块中的“%B”参数保持兼容

$bytes_sent
传输给客户端的字节数 (1.3.8, 1.2.5)

$connection
TCP连接的序列号 (1.3.8, 1.2.5)

$connection_requests
TCP连接当前的请求数量 (1.3.8, 1.2.5)

$content_length
“Content-Length” 请求头字段

$content_type
“Content-Type” 请求头字段

$cookie_name
cookie名称

$document_root
当前请求的文档根目录或别名

$document_uri
同 $uri

$host
优先级如下：HTTP请求行的主机名>”HOST”请求头字段>符合请求的服务器名

$hostname
主机名

$http_name
匹配任意请求头字段； 变量名中的后半部分“name”可以替换成任意请求头字段，如在配置文件中需要获取http请求头：“Accept-Language”，那么将“－”替换为下划线，大写字母替换为小写，形如：$http_accept_language即可。

$https
如果开启了SSL安全模式，值为“on”，否则为空字符串。

$is_args
如果请求中有参数，值为“?”，否则为空字符串。

$limit_rate
用于设置响应的速度限制，详见 limit_rate。

$msec
当前的Unix时间戳 (1.3.9, 1.2.6)

$nginx_version
nginx版本

$pid
工作进程的PID

$pipe
如果请求来自管道通信，值为“p”，否则为“.” (1.3.12, 1.2.7)

$proxy_protocol_addr
获取代理访问服务器的客户端地址，如果是直接访问，该值为空字符串。(1.5.12)

$query_string
同 $args

$realpath_root
当前请求的文档根目录或别名的真实路径，会将所有符号连接转换为真实路径。

$remote_addr
客户端地址

$remote_port
客户端端口

$remote_user
用于HTTP基础认证服务的用户名

$request
代表客户端的请求地址

$request_body
客户端的请求主体
此变量可在location中使用，将请求主体通过proxy_pass, fastcgi_pass, uwsgi_pass, 和 scgi_pass传递给下一级的代理服务器。

$request_body_file
将客户端请求主体保存在临时文件中。文件处理结束后，此文件需删除。如果需要之一开启此功能，需要设置client_body_in_file_only。如果将次文件传递给后端的代理服务器，需要禁用request body，即设置proxy_pass_request_body off，fastcgi_pass_request_body off, uwsgi_pass_request_body off, or scgi_pass_request_body off 。

$request_completion
如果请求成功，值为”OK”，如果请求未完成或者请求不是一个范围请求的最后一部分，则为空。

$request_filename
当前连接请求的文件路径，由root或alias指令与URI请求生成。

$request_length
请求的长度 (包括请求的地址, http请求头和请求主体) (1.3.12, 1.2.7)

$request_method
HTTP请求方法，通常为“GET”或“POST”

$request_time
处理客户端请求使用的时间 (1.3.9, 1.2.6); 从读取客户端的第一个字节开始计时。

$request_uri
这个变量等于包含一些客户端请求参数的原始URI，它无法修改，请查看$uri更改或重写URI，不包含主机名，例如：”/cnphp/test.php?arg=freemouse”。

$scheme
请求使用的Web协议, “http” 或 “https”

$sent_http_name
可以设置任意http响应头字段； 变量名中的后半部分“name”可以替换成任意响应头字段，如需要设置响应头Content-length，那么将“－”替换为下划线，大写字母替换为小写，形如：$sent_http_content_length 4096即可。

$server_addr
服务器端地址，需要注意的是：为了避免访问linux系统内核，应将ip地址提前设置在配置文件中。

$server_name
服务器名，www.cnphp.info

$server_port
服务器端口

$server_protocol
服务器的HTTP版本, 通常为 “HTTP/1.0” 或 “HTTP/1.1”

$status
HTTP响应代码 (1.3.2, 1.2.2)

$tcpinfo_rtt, $tcpinfo_rttvar, $tcpinfo_snd_cwnd, $tcpinfo_rcv_space
客户端TCP连接的具体信息

$time_iso8601
服务器时间的ISO 8610格式 (1.3.12, 1.2.7)

$time_local
服务器时间（LOG Format 格式） (1.3.12, 1.2.7)

$uri
请求中的当前URI(不带请求参数，参数位于$args)，可以不同于浏览器传递的$request_uri的值，它可以通过内部重定向，或者使用index指令进行修改，$uri不包含主机名，如”/foo/bar.html”。
本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2021-06-23/vue-nginx-upstream/

如果您觉得文章不错，可以点击文章中的广告支持一下！