CI/CD integration specification

CI/CD is an indispensable part of modern frontend engineering, improving code quality and delivery efficiency through automated workflows. Engineering standards ensure consistency in team collaboration and reduce human errors, while integration standards define the complete path from code submission to deployment.

Core Concepts of CI/CD

Continuous Integration (CI) emphasizes frequently merging code changes into the main branch and validating them through automated testing. Continuous Delivery (CD) ensures that code is always ready for deployment to production. Common CI/CD tools in frontend projects include GitHub Actions, GitLab CI, and Jenkins.

A typical CI workflow includes the following steps:

1. Code submission triggers the build
2. Run static code analysis (e.g., ESLint)
3. Execute unit tests
4. Generate build artifacts
5. Deploy to a testing environment

// Example of .github/workflows/ci.yml
name: Frontend CI
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js
      uses: actions/setup-node@v1
      with:
        node-version: '16.x'
    - run: npm ci
    - run: npm run lint
    - run: npm test
    - run: npm run build

Key Engineering Standards

Branch Management Strategy

Adopt Git Flow or Trunk-Based Development strategies. Feature branches should follow the feature/xxx naming convention, and bugfix branches should use fix/xxx. The main branch (main/master) should have protection rules to prevent direct pushes.

# Example of creating a feature branch
git checkout -b feature/user-authentication

Commit Message Standards

Use the Conventional Commits format, with types such as feat, fix, docs, and style. Commit messages should clearly describe changes:

feat(auth): add Google OAuth integration
fix(button): correct hover state styling

Code Quality Gates

Set quality checkpoints in the CI workflow:

1. ESLint checks must pass
2. Unit test coverage must be at least 80%
3. Build artifact size limit (e.g., no more than 2MB)

// Example of jest.config.js configuration
module.exports = {
  collectCoverage: true,
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 80,
      lines: 80,
      statements: 80
    }
  }
}

Special Considerations for Frontend CI/CD

Environment Variable Management

Separate development, testing, and production environment variables. Use .env files with dotenv for loading, but inject sensitive information via Secrets in CI.

// Example of environment variable handling in webpack.config.js
const webpack = require('webpack');
const dotenv = require('dotenv');

module.exports = () => {
  const env = dotenv.config().parsed;
  return {
    plugins: [
      new webpack.DefinePlugin({
        'process.env': JSON.stringify(env)
      })
    ]
  }
}

Build Artifact Optimization

Include build optimization steps in the CI workflow:

• Code Splitting
• Tree Shaking
• Image compression
• Generate sourcemaps (only for testing environments)

// Example of optimization configuration in vite.config.js
export default defineConfig({
  build: {
    minify: 'terser',
    sourcemap: process.env.NODE_ENV !== 'production',
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom']
        }
      }
    }
  }
})

Caching Strategy

Leverage the CI system's caching mechanism to speed up builds:

• Cache node_modules
• Cache intermediate artifacts from build tools (e.g., Vite, Webpack)
• Cache test results

# Example of GitHub Actions caching
- name: Cache node modules
  uses: actions/cache@v2
  with:
    path: '**/node_modules'
    key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}

Deployment Standards

Progressive Rollout

Adopt blue-green deployment or canary release strategies to reduce risks. Control traffic switching via load balancers to ensure zero-downtime deployments.

# Example of canary release using kubectl
kubectl set image deployment/frontend frontend=image:v2
kubectl scale deployment frontend --replicas=3

Rollback Mechanism

Each deployment should generate a unique version number, and historical build artifacts should be retained. Quickly revert to the previous stable version if needed.

// Example of version number generation
const version = `${process.env.GIT_SHA}-${new Date().toISOString()}`
console.log(`App Version: ${version}`)

Health Checks

Run smoke tests automatically after deployment to verify core functionality. Set up health check endpoints for monitoring systems.

// Example of healthcheck.js
const express = require('express')
const app = express()

app.get('/health', (req, res) => {
  res.status(200).json({
    status: 'UP',
    version: process.env.APP_VERSION
  })
})

app.listen(3000)

Monitoring and Feedback

Build Monitoring

Collect CI/CD pipeline metrics:

• Build success rate
• Build duration
• Test pass rate
• Deployment frequency

Error Tracking

Integrate error monitoring tools like Sentry to capture runtime errors and associate them with specific deployment versions.

// Example of Sentry initialization
import * as Sentry from '@sentry/react'
import { BrowserTracing } from '@sentry/tracing'

Sentry.init({
  dsn: 'YOUR_DSN',
  release: process.env.RELEASE,
  integrations: [new BrowserTracing()],
  tracesSampleRate: 0.2
})

Notification Mechanism

Trigger notifications for critical events:

• Build failures
• Successful deployments
• Health check anomalies Notification channels include Slack, email, or enterprise messaging apps.

# Example of build failure notification
- name: Notify Slack
  if: failure()
  uses: rtCamp/action-slack-notify@v2
  env:
    SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
    SLACK_MESSAGE: "Build failed: ${{ github.workflow }} #${{ github.run_number }}"

Multi-Environment Management

Environment Configuration

Create separate configurations for different environments:

• Development: Enable hot reloading and detailed logs
• Testing: Mock APIs and full test suites
• Production: Minimized code and performance optimizations

// Example of environment-specific logic
const getApiBaseUrl = () => {
  switch(process.env.NODE_ENV) {
    case 'development':
      return 'http://localhost:3000/api'
    case 'production':
      return 'https://api.example.com'
    default:
      return 'https://staging-api.example.com'
  }
}

Database Migration

For frontend local storage solutions (e.g., IndexedDB), implement data migration strategies. Version data structures and provide migration scripts.

// Example of IndexedDB version migration
const request = indexedDB.open('myDB', 3)
request.onupgradeneeded = (event) => {
  const db = event.target.result
  if (event.oldVersion < 1) {
    db.createObjectStore('users', { keyPath: 'id' })
  }
  if (event.oldVersion < 2) {
    const store = event.target.transaction.objectStore('users')
    store.createIndex('email', 'email', { unique: true })
  }
}

Security Practices

Dependency Security Scanning

Integrate npm audit or Snyk in CI to check for dependency vulnerabilities and block deployments with high-risk issues.

# Example of npm audit integration
- name: Audit dependencies
  run: |
    npm audit --audit-level=high
    if [ $? -ne 0 ]; then
      echo "Dependency vulnerabilities found"
      exit 1
    fi

Sensitive Information Protection

Avoid storing API keys and other sensitive information in code repositories. Use the CI system's Secret management feature to inject environment variables at runtime.

// Example of securely accessing sensitive configuration
const apiKey = process.env.PAYMENT_API_KEY || ''

Content Security Policy

Generate CSP headers during builds to restrict resource loading sources. Loosen policies for development environments and enforce strict restrictions in production.

// Example of CSP middleware
const csp = require('helmet-csp')
app.use(csp({
  directives: {
    defaultSrc: ["'self'"],
    scriptSrc: ["'self'", "'unsafe-inline'"],
    styleSrc: ["'self'", "'unsafe-inline'"],
    imgSrc: ["'self'", "data:"]
  }
}))

Performance Benchmarks

Build Performance Monitoring

Track key metrics:

• Cold build time
• Incremental build time
• Artifact size trends Set thresholds to trigger alerts.

# Example of build time monitoring
- name: Record build time
  uses: actions/github-script@v5
  with:
    script: |
      const time = Date.now() - new Date('${{ job.started_at }}').getTime()
      core.setOutput('duration', time)

Runtime Performance

Integrate Lighthouse CI to ensure key performance metrics meet standards:

• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• Time to Interactive (TTI)

// Example of lighthouse-ci configuration
module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000'],
      numberOfRuns: 3
    },
    assert: {
      assertions: {
        'categories:performance': ['error', {minScore: 0.9}],
        'categories:accessibility': ['error', {minScore: 0.95}]
      }
    }
  }
}