Cloud deployment and CI/CD integration

Cloud Deployment and CI/CD Integration

Vite.js, as a modern front-end build tool, naturally aligns with cloud deployment and CI/CD processes due to its fast startup and hot-reloading features. Through automated building, testing, and deployment, developers can achieve efficient iteration. Below is a detailed explanation from a practical perspective.

Basic Environment Configuration

Before starting, the following environmental elements need to be prepared:

1. Cloud service account (e.g., AWS/Azure/Vercel)
2. GitHub/GitLab code repository
3. Containerization tool Docker (optional)

Example of a typical project structure:

my-vite-project/  
├── vite.config.js  
├── package.json  
├── Dockerfile  # Containerization configuration  
└── .github/workflows  # CI process configuration  

Vite Production Build Optimization

Special attention is required for static asset handling in production builds:

// vite.config.js  
export default defineConfig({  
  build: {  
    assetsInlineLimit: 4096,  // Inline resources under 4KB  
    chunkSizeWarningLimit: 1000,  
    rollupOptions: {  
      output: {  
        manualChunks(id) {  
          if (id.includes('node_modules')) {  
            return 'vendor'  
          }  
        }  
      }  
    }  
  }  
})  

Containerized Deployment Solution

Typical configuration for Docker container deployment:

# Stage 1: Build  
FROM node:16 as builder  
WORKDIR /app  
COPY package*.json ./  
RUN npm install  
COPY . .  
RUN npm run build  

# Stage 2: Run  
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;"]  

Example of a corresponding Nginx configuration:

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

GitHub Actions Integration

Example of a complete CI/CD workflow configuration:

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  

Environment Variable Management Strategy

Multi-environment configuration solution:

// 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)  
    }  
  }  
})  

Example of corresponding environment files:

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

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

Special Configuration for Vercel Deployment

Additional configuration required for the Vercel platform:

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

Automated Testing Integration

Example of Jest testing integration:

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

Testing phase configuration in CI:

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

Deployment Rollback Mechanism

Version rollback using Git tags:

# Create a release tag  
git tag -a v1.0.1 -m "Production release 1.0.1"  
git push origin --tags  

# Rollback operation  
git checkout v1.0.0  
npm run build  
vercel --prod  

Monitoring and Log Collection

Front-end error monitoring integration:

// 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  
})  

Multi-Stage Deployment Strategy

Example of phased release configuration:

- 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  

Security Measures

Example of CSP policy configuration:

// 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'"]  
      }  
    })  
  ]  
})  

Performance Optimization Practices

Critical path pre-rendering configuration:

// 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']  
    })  
  ]  
})  

Multi-Region Deployment Solution

AWS multi-region deployment script:

#!/bin/bash  
# Build  
npm run build  

# Sync to multiple regions  
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 "/*"