云部署与CI/CD集成

云部署与CI/CD集成

Vite.js作为现代前端构建工具，其快速启动和热更新特性与云部署和CI/CD流程天然契合。通过自动化构建、测试和部署，开发者能实现高效迭代。下面从具体实践角度展开说明。

基础环境配置

在开始前需要准备以下环境要素：

1. 云服务账号（如AWS/Azure/Vercel）
2. GitHub/GitLab代码仓库
3. 容器化工具Docker（可选）

典型项目结构示例：

my-vite-project/
├── vite.config.js
├── package.json
├── Dockerfile  # 容器化配置
└── .github/workflows  # CI流程配置

Vite生产构建优化

生产环境构建需要特别注意静态资源处理：

// vite.config.js
export default defineConfig({
  build: {
    assetsInlineLimit: 4096, // 4KB以下资源内联
    chunkSizeWarningLimit: 1000,
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor'
          }
        }
      }
    }
  }
})

容器化部署方案

使用Docker容器部署的典型配置：

# 阶段1：构建
FROM node:16 as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 阶段2：运行
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

配套的Nginx配置示例：

server {
  listen 80;
  location / {
    root /usr/share/nginx/html;
    index index.html;
    try_files $uri $uri/ /index.html;
  }
}

GitHub Actions集成

完整的CI/CD工作流配置示例：

name: Vite Deployment
on:
  push:
    branches: [ main ]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: actions/setup-node@v3
      with:
        node-version: 16
    - run: npm install
    - run: npm run build
    - uses: actions/upload-artifact@v3
      with:
        name: dist
        path: dist

  deploy:
    needs: build
    runs-on: ubuntu-latest
    steps:
    - uses: actions/download-artifact@v3
      with:
        name: dist
    - uses: azure/webapps-deploy@v2
      with:
        app-name: 'my-vite-app'
        slot-name: 'production'
        publish-profile: ${{ secrets.AZURE_PUBLISH_PROFILE }}
        package: dist

环境变量管理策略

多环境配置方案：

// vite.config.js
import { loadEnv } from 'vite'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  return {
    define: {
      __APP_ENV__: JSON.stringify(env.APP_ENV)
    }
  }
})

配套的环境文件示例：

# .env.development
VITE_API_BASE=https://dev.example.com/api

# .env.production
VITE_API_BASE=https://api.example.com

部署到Vercel的特殊配置

针对Vercel平台需要额外配置：

// vercel.json
{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ],
  "build": {
    "env": {
      "VITE_API_BASE": "@production_api_base"
    }
  }
}

自动化测试集成

Jest测试集成示例：

// vite.config.js
export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './testSetup.js'
  }
})

CI中的测试阶段配置：

- name: Run tests
  run: |
    npm run test:unit
    npm run test:e2e
  env:
    CI: true

部署回滚机制

通过Git标签实现版本回滚：

# 创建发布标签
git tag -a v1.0.1 -m "Production release 1.0.1"
git push origin --tags

# 回滚操作
git checkout v1.0.0
npm run build
vercel --prod

监控与日志收集

前端错误监控集成：

// src/main.js
import * as Sentry from '@sentry/vue'

const app = createApp(App)
Sentry.init({
  app,
  dsn: process.env.VITE_SENTRY_DSN,
  release: process.env.VITE_COMMIT_SHA
})

多阶段部署策略

分阶段发布配置示例：

- name: Deploy to staging
  if: github.ref == 'refs/heads/develop'
  uses: actions/deploy-pages@v1
  with:
    target: staging
    token: ${{ secrets.GH_PAGES_TOKEN }}

- name: Deploy to production  
  if: github.ref == 'refs/heads/main'
  run: |
    npm run build
    aws s3 sync dist/ s3://prod-bucket --delete

安全防护措施

CSP策略配置示例：

// vite.config.js
import { defineConfig } from 'vite'
import vitePluginCsp from 'vite-plugin-csp'

export default defineConfig({
  plugins: [
    vitePluginCsp({
      policies: {
        'default-src': ["'self'"],
        'script-src': ["'self'", "'unsafe-inline'"],
        'style-src': ["'self'", "'unsafe-inline'"]
      }
    })
  ]
})

性能优化实践

预渲染关键路径配置：

// vite.config.js
import { defineConfig } from 'vite'
import prerender from 'vite-plugin-prerender'

export default defineConfig({
  plugins: [
    prerender({
      staticDir: path.join(__dirname, 'dist'),
      routes: ['/', '/about', '/contact']
    })
  ]
})

多区域部署方案

AWS多区域部署脚本：

#!/bin/bash
# 构建
npm run build

# 同步到各区域
aws s3 sync dist/ s3://us-east-1-bucket --delete
aws s3 sync dist/ s3://eu-west-1-bucket --delete
aws cloudfront create-invalidation --distribution-id $CDN_ID --paths "/*"