★ FEATURED ARTICLE 1. 项目打包与准备在开始部署Vue项目到Nginx之前我们需要先完成项目的打包工作。这个过程看似简单但实际操作中会遇到各种坑下面我会结合多年部署经验详细讲解每个环节的注意事项。1.1 环境准备与依赖安装首先确保你的开发环境已经安装了Node.js和npm/yarn。这里有个常见误区很多人直接安装最新版Node.js但实际项目中可能会遇到兼容性问题。我的建议是查看项目根目录下的.nvmrc或package.json中的engines字段确定项目要求的Node.js版本使用nvm管理多版本Node.jsnvm install 14.17.6 # 安装指定版本 nvm use 14.17.6 # 使用指定版本安装依赖时我强烈推荐使用yarn而不是npm因为yarn的依赖锁定机制更可靠安装速度通常更快能更好地处理依赖冲突yarn install注意如果项目中有私有npm仓库依赖需要先配置.npmrc文件否则安装会失败。这也是很多新手容易忽略的地方。1.2 项目编译与优化执行构建命令前先检查vue.config.js配置文件。这里有几个关键配置项需要特别注意module.exports { publicPath: process.env.NODE_ENV production ? /production-sub-path/ : /, outputDir: dist, assetsDir: static, productionSourceMap: false, // 生产环境关闭source map configureWebpack: { optimization: { splitChunks: { chunks: all, cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name(module) { const packageName module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]; return npm.${packageName.replace(, )}; }, }, }, }, }, }, }执行构建命令yarn build构建完成后检查dist目录index.html 文件大小通常应该很小static/js 和 static/css 目录下的文件是否合理分块是否有.map文件泄漏生产环境应该关闭source map2. Nginx安装与基础配置2.1 系统环境适配安装不同Linux发行版的Nginx安装方式略有差异以下是详细说明Ubuntu/Debian系统sudo apt update sudo apt install nginx sudo systemctl enable nginx # 设置开机自启 sudo systemctl start nginxCentOS/RHEL系统sudo yum install epel-release # 先安装EPEL仓库 sudo yum install nginx sudo systemctl enable nginx sudo systemctl start nginx安装后验证nginx -v # 查看版本 sudo systemctl status nginx # 查看服务状态 curl -I 127.0.0.1 # 测试访问2.2 目录结构与权限配置Nginx的标准目录结构/etc/nginx/主配置目录nginx.conf主配置文件sites-available/可用站点配置sites-enabled/启用的站点配置通常是sites-available的软链接/var/log/nginx/日志目录/usr/share/nginx/html/默认网站根目录权限设置建议sudo chown -R www-data:www-data /var/www/your_project # Ubuntu sudo chown -R nginx:nginx /var/www/your_project # CentOS sudo chmod -R 755 /var/www/your_project3. Nginx详细配置解析3.1 核心配置模板以下是经过生产环境验证的Nginx配置模板我添加了详细注释说明每个配置项的作用server { listen 80; server_name yourdomain.com www.yourdomain.com; # 设置根目录指向Vue项目的dist目录 root /var/www/your-project/dist; index index.html; # 开启gzip压缩 gzip on; gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xmlrss text/javascript; gzip_min_length 1k; gzip_comp_level 4; # 静态资源缓存设置 location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ { expires 1y; add_header Cache-Control public, no-transform; access_log off; } # 主路由配置 - 支持Vue Router的history模式 location / { try_files $uri $uri/ /index.html; # 安全头设置 add_header X-Frame-Options SAMEORIGIN; add_header X-XSS-Protection 1; modeblock; add_header X-Content-Type-Options nosniff; add_header Referrer-Policy no-referrer-when-downgrade; } # API代理配置如果需要后端API location /api/ { proxy_pass http://backend-server:3000/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } # 错误页面配置 error_page 404 /404.html; location /404.html { internal; } error_page 500 502 503 504 /50x.html; location /50x.html { root /usr/share/nginx/html; } # 禁止访问.git等敏感文件 location ~ /\.(git|env|ht) { deny all; } }3.2 配置优化技巧性能优化启用HTTP/2在listen后添加http2参数调整worker进程数worker_processes auto;根据CPU核心数自动设置设置连接超时keepalive_timeout 65;安全加固禁用server tokensserver_tokens off;限制HTTP方法if ($request_method !~ ^(GET|HEAD|POST)$ ) { return 405; }设置CSP头add_header Content-Security-Policy default-src self;;日志分析log_format main $remote_addr - $remote_user [$time_local] $request $status $body_bytes_sent $http_referer $http_user_agent $http_x_forwarded_for; access_log /var/log/nginx/access.log main;4. 部署与上线流程4.1 文件传输最佳实践推荐使用rsync进行文件同步它能只传输变化的文件保持文件权限支持断点续传可以排除特定文件rsync -avz --delete --exclude.git \ ./dist/ userserver:/var/www/your-project/4.2 自动化部署脚本创建deploy.sh自动化脚本#!/bin/bash # 构建项目 echo Building project... yarn build # 同步文件到服务器 echo Deploying to server... rsync -avz --delete --exclude.git \ ./dist/ userserver:/var/www/your-project/ # 重启Nginx echo Restarting Nginx... ssh userserver sudo systemctl restart nginx echo Deployment completed!给脚本执行权限chmod x deploy.sh5. HTTPS安全配置5.1 Certbot自动化配置安装Certbotsudo apt install certbot python3-certbot-nginx # Ubuntu sudo yum install certbot python3-certbot-nginx # CentOS获取证书sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com自动续期测试sudo certbot renew --dry-run5.2 安全加固配置在Nginx配置中添加以下SSL相关设置ssl_protocols TLSv1.2 TLSv1.3; ssl_prefer_server_ciphers on; ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384; ssl_session_timeout 1d; ssl_session_cache shared:SSL:50m; ssl_session_tickets off; ssl_stapling on; ssl_stapling_verify on;6. 高级配置与优化6.1 多环境配置管理对于不同环境开发/测试/生产可以创建多个Nginx配置/etc/nginx/ ├── sites-available/ │ ├── your-project-dev │ ├── your-project-staging │ └── your-project-prod └── sites-enabled/ └── your-project-prod - ../sites-available/your-project-prod使用环境变量管理配置# 在http块中 map $http_x_env $env_suffix { default ; dev -dev; staging -staging; } server { root /var/www/your-project$env_suffix/dist; # ... }6.2 性能监控与调优安装Nginx Amplify进行监控curl -L -O https://github.com/nginxinc/nginx-amplify-agent/raw/master/packages/install.sh sudo sh install.sh关键性能指标监控请求处理时间request_time上游响应时间upstream_response_time活动连接数active connections请求率requests per second7. 常见问题排查7.1 部署问题速查表问题现象可能原因解决方案空白页面资源路径错误检查publicPath配置404错误Nginx配置错误检查try_files配置样式错乱CSS加载失败检查assetsDir配置接口404代理配置错误检查proxy_pass配置证书错误证书过期运行certbot renew7.2 日志分析技巧查看错误日志sudo tail -f /var/log/nginx/error.log日志分析常用命令# 统计HTTP状态码 awk {print $9} access.log | sort | uniq -c | sort -rn # 找出请求时间最长的URL awk {print $7, $10} access.log | sort -k2 -rn | head -20 # 统计IP访问量 awk {print $1} access.log | sort | uniq -c | sort -rn | head -508. 实际案例分享最近部署一个大型Vue项目时遇到几个典型问题路由刷新404原因未正确配置try_files解决确保所有路由都回退到index.html静态资源缓存失效原因文件名哈希但Nginx配置了长期缓存解决调整缓存策略对带哈希的资源设置长期缓存API跨域问题原因开发环境使用proxy生产环境未配置解决统一使用Nginx做API代理部署后样式错乱原因publicPath配置错误解决根据部署路径正确设置publicPath这些经验教训让我深刻体会到看似简单的Vue项目部署实际上需要考虑很多细节才能确保万无一失。
阅读完成 · 觉得有帮助？
