前端部署

EasyFly-Ads 管理后台基于 Vue 3 + Vite 构建，输出纯静态文件，部署灵活简便。本章涵盖构建、部署及 Nginx 配置。

构建项目

环境要求

工具	版本要求
Node.js	18.x 或以上
pnpm	8.x 或以上（推荐）

拉取代码

git clone <仓库地址> easyfly-admin
cd easyfly-admin

安装依赖

pnpm install

环境配置

创建环境变量文件 .env.production：

# API 接口地址
VITE_API_BASE_URL=https://api.yourdomain.com

# 静态资源CDN（可选）
VITE_CDN_URL=https://cdn.yourdomain.com

# 站点标题
VITE_APP_TITLE=易起飞广告管理后台

构建

pnpm build

构建产物默认位于 dist/ 目录，包括：

• index.html —— 入口文件
• assets/ —— JS、CSS、图片等静态资源

Nginx 部署

安装 Nginx

# CentOS
sudo yum install -y nginx

# Ubuntu
sudo apt install -y nginx

配置虚拟主机

编辑 /etc/nginx/conf.d/easyfly.conf：

server {
    listen 80;
    server_name admin.yourdomain.com;

    # 静态文件目录
    root /data/www/easyfly-admin;
    index index.html;

    # Gzip 压缩
    gzip on;
    gzip_min_length 1k;
    gzip_types text/plain text/css text/javascript application/json application/javascript image/svg+xml;

    # SPA 路由支持
    location / {
        try_files $uri $uri/ /index.html;
    }

    # API 反向代理
    location /api/ {
        proxy_pass http://127.0.0.1:8080/;
        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_set_header X-Forwarded-Proto $scheme;
    }

    # 静态资源缓存
    location /assets/ {
        expires 30d;
        add_header Cache-Control "public, immutable";
    }
}

上传文件

# 创建目录
sudo mkdir -p /data/www/easyfly-admin

# 上传构建产物
scp -r dist/* deploy@your-server:/data/www/easyfly-admin/

# 设置权限
sudo chown -R nginx:nginx /data/www/easyfly-admin

启动服务

# 测试配置
sudo nginx -t

# 启动 Nginx
sudo systemctl start nginx
sudo systemctl enable nginx

HTTPS 配置（推荐）

使用 Let's Encrypt 免费证书，通过 Certbot 工具自动获取和续期：

# 安装 Certbot
sudo yum install -y certbot python3-certbot-nginx   # CentOS
sudo apt install -y certbot python3-certbot-nginx    # Ubuntu

# 获取证书
sudo certbot --nginx -d admin.yourdomain.com

# 自动续期
sudo certbot renew --dry-run

Docker 部署（可选）

FROM nginx:alpine
COPY dist/ /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

docker build -t easyfly-admin .
docker run -d --name easyfly-admin -p 80:80 easyfly-admin

CDN 加速（推荐）

将构建后的 assets/ 目录上传至对象存储（阿里云 OSS / 腾讯云 COS），配合 CDN 加速静态资源加载：

1. 上传 dist/assets/ 至 OSS
2. 设置 CDN 域名并配置 CNAME
3. 修改构建配置中的 VITE_CDN_URL

部署验证

部署完成后检查：

• [ ] 域名访问正常，页面加载完整
• [ ] API 接口调用正常（检查登录功能）
• [ ] HTTPS 证书有效
• [ ] 浏览器控制台无报错
• [ ] 移动端适配正常

---

下一步

• 后端部署 —— 部署后端微服务
• 阿里云配置 —— 阿里云相关服务配置