30分钟搞定vue-vben-admin部署：Nginx反向代理+HTTPS全流程

30分钟搞定vue-vben-admin部署：Nginx反向代理+HTTPS全流程

【免费下载链接】vue-vben-admin 项目地址: https://gitcode.com/gh_mirrors/vue/vue-vben-admin

你还在为前端项目部署反复踩坑？本文将以vue-vben-admin为例，通过Nginx反向代理配置、HTTPS证书部署、性能优化三个维度，带你实现企业级生产环境部署。读完本文你将掌握：

• Nginx配置文件深度解析与定制化修改
• 免费SSL证书申请与自动续期方案
• 前端资源缓存策略与跨域问题解决

部署环境准备

项目结构概览

vue-vben-admin采用Monorepo架构，部署前需通过package.json确认构建命令。核心部署相关文件包括：

• 构建配置：vite.config.ts
• Nginx配置：nginx.conf
• 静态资源：public/

环境依赖检查

确保服务器已安装：

• Node.js 16+ (用于构建项目)
• Nginx 1.20+ (用于反向代理)
• Certbot (用于HTTPS证书管理)

Nginx基础配置

默认配置解析

项目提供的Nginx配置文件已包含基础部署方案，核心配置说明：

server {
    listen 80;                  # 监听80端口
    location / {
        root /usr/share/nginx/html/dist;  # 前端资源目录
        try_files $uri $uri/ /index.html; # 支持SPA路由
        index index.html;
        # CORS跨域配置
        add_header 'Access-Control-Allow-Origin' '*';
    }
}

反向代理配置

为解决前后端分离架构的跨域问题，需添加API代理规则：

location /api/ {
    proxy_pass http://backend-server:3000/api/;  # 后端服务地址
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

HTTPS证书部署

证书申请

使用Certbot自动获取Let's Encrypt证书：

# 安装Certbot
apt install certbot python3-certbot-nginx

# 获取证书并自动配置Nginx
certbot --nginx -d your-domain.com

配置整合

修改Nginx配置文件添加HTTPS支持：

server {
    listen 443 ssl;
    server_name your-domain.com;

    ssl_certificate /etc/letsencrypt/live/your-domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your-domain.com/privkey.pem;
    
    # SSL优化配置
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:10m;
}

# HTTP自动跳转HTTPS
server {
    listen 80;
    server_name your-domain.com;
    return 301 https://$host$request_uri;
}

高级性能优化

资源缓存策略

优化Nginx配置文件添加缓存控制：

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
    expires 1y;                  # 静态资源缓存1年
    add_header Cache-Control "public, max-age=31536000";
    # 版本化资源永久缓存
    if ($request_filename ~* ^.*?\.(js|css|png|jpg|jpeg|gif|ico)$) {
        add_header Cache-Control "public, max-age=31536000, immutable";
    }
}

构建优化

修改vite.config.ts配置生产环境构建：

export default defineConfig({
  build: {
    target: 'es2015',
    outDir: 'dist',
    assetsDir: 'assets',
    sourcemap: false,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router', 'pinia'],
        },
      },
    },
  },
})

部署流程总结

1. 构建项目

pnpm install
pnpm build

2. 配置Nginx

# 复制配置文件
cp nginx.conf /etc/nginx/conf.d/vue-vben-admin.conf

# 测试配置
nginx -t

# 重启服务
systemctl restart nginx

3. 设置自动续期

# 验证证书自动续期
certbot renew --dry-run

常见问题排查

404错误

• 检查前端路由模式是否与Nginx配置的try_files规则匹配
• 确认dist目录路径是否正确设置

跨域问题

• 验证Nginx配置中的Access-Control-Allow-*头信息
• 检查后端服务是否正确配置CORS

HTTPS证书错误

• 通过certbot certificates检查证书状态
• 确认服务器时间同步（证书验证依赖正确时间）

部署架构图

通过以上步骤，即可完成vue-vben-admin的企业级部署。完整部署脚本可参考项目部署文档，生产环境建议配合Docker使用Dockerfile实现容器化部署。

【免费下载链接】vue-vben-admin 项目地址: https://gitcode.com/gh_mirrors/vue/vue-vben-admin