大多数教程中静态资源都是和后台服务在一起的,因此直接使用Nginx代理时是没有任何问题的
但是当前后端分离的情况下,可能就并不适应了,本文主要记录本人部署时遇到的一些坑
部署到根路径时打开页面报404
背景:
- 使用 Vite 打包时
baseUrl 为 '/'
- 生产模式时接口请求没有固定前缀(
http://ip:port/a
、http://ip:port/b
) - nginx配置中直接代理根路径
/
Nginx配置:
....
# 设置负载均衡
upstream serve_backend {
# 轮询模式
server 127.0.0.1:9001;
server 127.0.0.1:9004;
}
server {
listen 9000;
server_name localhost;
#允许Header中使用下划线
underscores_in_headers on;
# 接口请求代理
location / {
alias html/statics/;
try_files $uri $uri/ /index.html last;
index index.html index.htm;
proxy_pass http://serve_backend/;
# 指定在何种情况下一个失败的请求应该被发送到下一台后端服务器
proxy_next_upstream error timeout http_500;
# 启用keep alive
proxy_http_version 1.1;
proxy_set_header Connection "";
# 查看请求被代理到了哪个后端
add_header backendIp $upstream_addr;
add_header backendCode $upstream_status;
# 获取 xforward和真实IP
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host;
}
}
....
现象:
分析:
当请求 http://127.0.0.1:9000
时会默认请求根路径下的 index.html
但因为我们此时已经将根路径下的所有请求都代理到了 http://127.0.0.1:9001 或 http://127.0.0.1:9004
,所以就去这两个服务下面找静态资源了
显然我们的静态资源是在 Nginx 的 html/statics
下,而不在这两个服务下面,找不到自然就报 404 错误码了
解决办法—过滤静态资源
在 Nginx 的配置文件 server
块中进行过滤:
# 静态资源不代理,直接走原始请求
location ~* \.(gif|jpg|jpeg|html|json|ico|css|js)$ {
alias html/statics/;
try_files $uri $uri/;
}
# 根路径(html页面)不代理,直接走原始请求
location = / {
alias html/statics/;
try_files $uri $uri/ /index.html last;
index index.html index.htm;
}
其余接口请求代理到相应的后台接口
# 接口请求代理
location / {
proxy_pass http://serve_backend/;
# 指定在何种情况下一个失败的请求应该被发送到下一台后端服务器
proxy_next_upstream error timeout http_500;
# 启用keep alive
proxy_http_version 1.1;
proxy_set_header Connection "";
# 查看请求被代理到了哪个后端
add_header backendIp $upstream_addr;
add_header backendCode $upstream_status;
# 获取 xforward和真实IP
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host;
}
此时页面就可以正常访问,不报404错误了