Vue项目与云管平台Nginx部署笔记
一、项目架构说明
-
footAdmin云管前端
-
Vue2 + Webpack 构建,部署路径:
/usr/share/nginx/html/footAdmin
-
使用
npm run build
生成/dist
目录,然后将dist
目录下面的所有文件,上传到虚拟机/usr/share/nginx/html/footAdmin
目录下面 -
# 发送编译后的文件到测试环境运行 scp -r dist/* root@192.168.2.109:/usr/share/nginx/html/footAdmin
-
-
footAdminServer云管后台
- Node.js服务,端口
7071
,处理管理后台业务逻辑
- Node.js服务,端口
-
footApiServer专用API服务
- SpringBoot服务,端口
7072
,提供标准化API接口 - 已配置负载均衡集群(示例节点:
192.168.2.109:7072
)
- SpringBoot服务,端口
二、Nginx核心配置优化
1. 全局性能配置(http模块)
# 进程与连接管理
worker_processes auto; # 自动匹配CPU核心数
worker_rlimit_nofile 65535; # 文件描述符限制需与ulimit -n一致events {use epoll; # Linux高效I/O模型worker_connections 65535; # 单进程最大连接数multi_accept on; # 批量接收新连接
}# 压缩传输优化
gzip_static on; # 优先使用预压缩文件(需提前生成.gz)
gzip on;
gzip_types text/plain application/json text/css application/javascript;
gzip_proxied any;
2. 前端服务配置(Server模块)
server {listen 5000;server_name localhost;# 静态资源服务location / {root /usr/share/nginx/html/footAdmin;index index.html;try_files $uri $uri/ /index.html; # 处理Vue路由# 缓存策略expires 365d;add_header Cache-Control "public, no-transform";access_log off; # 静态资源不记录日志}# 管理后台代理location /admin/ {proxy_pass http://footAdminServer:7071/;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}# API服务负载均衡location /foot/ {proxy_pass http://footApi/;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection 'upgrade';}
}
3. 负载均衡集群配置
upstream footApi {least_conn; # 最小连接数策略server 192.168.2.109:7072 weight=4 max_fails=3 fail_timeout=10s;# 扩展节点示例:# server 192.168.0.106:7072 weight=3;# server 10.0.0.5:7072 backup;
}
三、专项优化策略
1. 安全加固
server_tokens off; # 隐藏Nginx版本
client_max_body_size 20M; # 限制文件上传大小
limit_conn perip 100; # 单IP并发限制# 防盗链配置
location ~* \.(jpg|png|js|css)$ {valid_referers none blocked *.yourdomain.com;if ($invalid_referer) {return 403;}
}
2. 日志管理
# 分服务记录日志
access_log /var/log/nginx/footAdmin_access.log combined buffer=16k;
error_log /var/log/nginx/footAdmin_error.log warn;# 健康检查日志隔离
location /nginx_status {stub_status;access_log off;
}
3. 微缓存策略(动态内容)
# API响应缓存
proxy_cache_path /data/nginx/cache levels=1:2 keys_zone=api_cache:10m max_size=1g inactive=1h;location /foot/ {proxy_cache api_cache;proxy_cache_valid 200 302 10m;proxy_cache_methods GET HEAD;
}
四、部署流程示例
# Vue项目部署
npm install
npm run build
rsync -avz dist/ nginx-server:/usr/share/nginx/html/footAdmin# 预压缩静态文件
find /usr/share/nginx/html/footAdmin -type f \( -name "*.js" -o -name "*.css" \) -exec gzip -k {} \;# Nginx配置重载
nginx -t && nginx -s reload
五、监控建议
-
连接数监控
netstat -ant | grep :5000 | wc -l
-
缓存命中率分析
grep -o "HIT\|MISS\|EXPIRED" /var/log/nginx/footAdmin_access.log | sort | uniq -c
-
性能压测工具
ab -n 5000 -c 200 http://localhost:5000/foot/api/healthcheck
注:本配置基于Nginx 1.25.3版本,需配合系统级优化(如内核参数调整)实现最佳性能。实际部署时建议启用HTTPS并配置HTTP/2协议。
完整配置
# 静态文件预压缩优化
gzip_static on; # 优先使用预压缩的.gz文件(避免重复压缩消耗CPU)【开启gzip压缩(如果静态文件已预压缩)】
gzip on; # 启用动态内容压缩
gzip_types text/plain text/javascript text/css text/xml application/javascript application/x-javascript application/xml application/json application/xml+rss; # 指定可压缩的 MIME 类型(覆盖默认配置)
gzip_proxied any; # 对所有代理请求启用压缩(包括携带Cookie和认证头的情况)# 负载均衡
upstream footApi {least_conn; # 最小连接数调度策略(适用于长连接场景)server 192.168.2.109:7072 max_fails=4 fail_timeout=10 weight=4;# server 192.168.2.106:7072; # 定义后端服务2(家庭开发环境的网关接口)# server XXX.XXX.XXX.XXX:7072; # 定义后端服务3(公网服务器上的网关接口,用于上线部署)
}server {listen 5000; # 监听5000端口,HTTP默认端口server_name localhost; # 绑定域名,处理通过该域名的请求# 设置该服务器的请求体大小限制为 20MBclient_max_body_size 20M; # 允许最大上传 20MB 文件# 云管平台Web前端location / {root /usr/share/nginx/html/footAdmin; # 前端资源目录index index.html index.htm; # 默认索引文件# alias /usr/share/nginx/html/footAdmin/; # 指定静态资源目录【推荐】【root和alias任选其一】# 如果需要添加缓存控制,可以在此处设置,例如:# expires 30d; # 设置缓存30天}# 云管平台APIlocation /admin/ {proxy_pass http://192.168.2.109:7071/; # 固定后端服务地址proxy_redirect default; # 保留响应头重定向信息}# 服务端APIlocation /foot/ {#负载均衡proxy_pass http://footApi/; # 负载均衡集群入口proxy_redirect default;# 建议添加的健康检查头:# proxy_set_header Host $host;# proxy_set_header X-Real-IP $remote_addr;}# # 云管平台Web前端【不推荐】【root和alias任选其一】
# location /truestyle {
# # 不会将location路径拼接到/dist后面
# alias /project/vue/dist;
# index index.html index.htm;
# }# location /api/ {
# proxy_pass http://192.168.0.109:7072/;
# proxy_redirect default;
# }# 错误处理配置error_page 500 502 503 504 /50x.html; # 统一错误页面(提升用户体验)location = /50x.html {root /usr/share/nginx/html; # 错误页面存放路径}# 日志配置,可选:根据需求设置日志记录格式access_log /var/log/nginx/footAdmin_access.log combined buffer=16k; # 带缓冲的访问日志(减少磁盘I/O)error_log /var/log/nginx/footAdmin_error.log warn; # 警告级别错误日志
}