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，处理管理后台业务逻辑
footApiServer专用API服务
- SpringBoot服务，端口7072，提供标准化API接口
- 已配置负载均衡集群（示例节点：192.168.2.109:7072）

二、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; # 警告级别错误日志
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/73376.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！