当前位置：首页 > news >正文

Vue项目与云管平台Nginx部署笔记

news 来源：原创 2025/5/21 2:42:26

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;  # 绑定域名，处理通过该域名的请求

    # 设置该服务器的请求体大小限制为 20MB
    client_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天
    }

    # 云管平台API
    location /admin/ {
        proxy_pass http://192.168.2.109:7071/; # 固定后端服务地址
        proxy_redirect default;                # 保留响应头重定向信息
    }

    # 服务端API
    location /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; # 警告级别错误日志
}