Vue項目與云管平臺Nginx部署筆記

一、項目架構說明

1. 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
     

2. footAdminServer云管后臺

   • Node.js服務，端口7071，處理管理后臺業務邏輯

3. 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

五、監控建議

1. 連接數監控
   netstat -ant | grep :5000 | wc -l

2. 緩存命中率分析

   grep -o "HIT\|MISS\|EXPIRED" /var/log/nginx/footAdmin_access.log | sort | uniq -c
   

3. 性能壓測工具

   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; # 警告級別錯誤日志
}