ZR.Admin.NET + Vue3实战：从本地开发到Nginx部署的完整避坑指南

ZR.Admin.NET Vue3实战从本地开发到Nginx部署的完整避坑指南当你成功在本地运行了ZR.Admin.NET后台管理系统后下一步就是将其部署到生产环境。本文将带你从本地开发环境出发一步步完成前端Vue3项目打包、后端.NET WebApi发布、Nginx配置等关键步骤并解决部署过程中可能遇到的各种坑。1. 前端Vue3项目打包配置前端项目的打包配置直接影响最终部署的效果。ZR.Admin.NET的前端基于Vue3我们需要针对不同环境进行差异化配置。1.1 环境变量配置在项目根目录下创建或修改以下文件.env.development # 开发环境 .env.test # 测试环境 .env.production # 生产环境每个文件应包含类似以下内容# .env.production NODE_ENVproduction VUE_APP_BASE_API/prod-api/ VUE_APP_WS_API/msgHub1.2 多环境打包脚本在package.json中添加或修改scripts部分{ scripts: { dev: vue-cli-service serve, build:test: vue-cli-service build --mode test, build:prod: vue-cli-service build --mode production, preview: serve -s dist } }1.3 常见打包问题解决静态资源路径错误在vue.config.js中配置publicPathmodule.exports { publicPath: process.env.NODE_ENV production ? / : /, assetsDir: static, indexPath: index.html }路由History模式问题确保router配置正确const router createRouter({ history: createWebHistory(process.env.BASE_URL), routes })2. 后端.NET WebApi发布2.1 Windows服务器发布在Visual Studio中右键项目 → 发布选择文件夹作为发布目标配置发布设置配置Release目标框架net7.0或更高部署模式框架依赖目标运行时win-x642.2 Linux服务器发布对于Linux环境建议使用以下命令发布dotnet publish -c Release -r linux-x64 --self-contained false发布完成后将publish文件夹上传到服务器。2.3 守护进程配置在Linux上使用Supervisor守护进程[program:zradmin] commanddotnet ZR.Admin.WebApi.dll --urls http://*:8888 directory/var/www/zradmin autostarttrue autorestarttrue stderr_logfile/var/log/zradmin.err.log stdout_logfile/var/log/zradmin.out.log environmentASPNETCORE_ENVIRONMENTProduction userwww-data stopsignalINT3. Nginx配置详解3.1 基础反向代理配置server { listen 80; server_name yourdomain.com; # 前端静态文件 location / { root /var/www/zradmin/dist; index index.html; try_files $uri $uri/ /index.html; } # 后端API代理 location /prod-api/ { proxy_pass http://localhost:8888/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }3.2 WebSocket(SignalR)代理location ~* ^/msgHub { proxy_pass http://localhost:8888; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection upgrade; }3.3 HTTPS配置server { listen 443 ssl; server_name yourdomain.com; ssl_certificate /path/to/cert.pem; ssl_certificate_key /path/to/key.pem; # 其他配置同上... # 强制HTTPS if ($scheme http) { return 301 https://$server_name$request_uri; } }4. 部署常见问题解决方案4.1 跨域问题虽然Nginx反向代理可以解决大部分跨域问题但有时仍需要在后端配置// Startup.cs services.AddCors(options { options.AddPolicy(AllowAll, builder { builder.AllowAnyOrigin() .AllowAnyMethod() .AllowAnyHeader(); }); }); // 在Configure方法中 app.UseCors(AllowAll);4.2 静态资源404检查以下配置Nginx的root路径是否正确Vue打包后的dist文件夹权限确保vue.config.js中的publicPath配置正确4.3 数据库连接问题生产环境数据库连接字符串通常需要修改{ dbConfigs: [ { Conn: Serverprod-db.example.com;DatabaseZrAdmin;User Idadmin;PasswordyourStrongPassword;, DbType: 1, ConfigId: 0, IsAutoCloseConnection: true } ] }4.4 性能优化建议前端优化启用gzip压缩使用CDN分发静态资源开启HTTP/2后端优化使用JIT编译配置响应缓存优化数据库查询# 启用gzip gzip on; gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xmlrss text/javascript;5. 监控与维护5.1 日志配置在appsettings.Production.json中配置日志{ Logging: { LogLevel: { Default: Information, Microsoft: Warning, Microsoft.Hosting.Lifetime: Information }, File: { Path: logs/log.txt, FileSizeLimitBytes: 10485760, RetainedFileCountLimit: 5 } } }5.2 健康检查添加健康检查端点services.AddHealthChecks() .AddSqlServer(Configuration[dbConfigs:0:Conn]) .AddDbContextCheckYourDbContext(); app.UseEndpoints(endpoints { endpoints.MapHealthChecks(/health); });5.3 备份策略建议设置以下备份计划数据库每日全量备份应用程序每周备份配置文件变更即时备份对于Linux服务器可以使用crontab设置自动备份# 每天凌晨2点备份数据库 0 2 * * * /usr/bin/mysqldump -u admin -ppassword ZrAdmin /backups/ZrAdmin_$(date \%Y\%m\%d).sql