What are the deployment strategies for Module Federation? How to deploy in production environment?

Deployment strategies for Module Federation are crucial for stability and performance in production environments. Here are detailed deployment solutions:

1. Deployment Architecture Design

Independent Deployment Mode:

shell
┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│   Host App  │     │ Remote App 1│     │ Remote App 2│
│  :3000      │     │  :3001      │     │  :3002      │
└──────┬──────┘     └──────┬──────┘     └──────┬──────┘
       │                   │                   │
       └───────────────────┼───────────────────┘
                           │
                    ┌──────▼──────┐
                    │  Load Balancer│
                    └──────┬──────┘
                           │
                    ┌──────▼──────┐
                    │  CDN / Nginx│
                    └─────────────┘

2. Environment Configuration Management

Development Environment Configuration:

javascript
// webpack.config.js
const isDevelopment = process.env.NODE_ENV === 'development'

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      remotes: {
        app2: isDevelopment 
          ? 'app2@http://localhost:3002/remoteEntry.js'
          : 'app2@https://app2.example.com/remoteEntry.js'
      },
      shared: {
        react: { singleton: true, eager: true },
        'react-dom': { singleton: true, eager: true }
      }
    })
  ]
}

Production Environment Configuration:

javascript
// .env.production
REMOTE_APP_URL=https://cdn.example.com
REMOTE_APP_VERSION=1.2.3

// webpack.config.js
const remoteUrl = process.env.REMOTE_APP_URL
const remoteVersion = process.env.REMOTE_APP_VERSION

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      remotes: {
        app2: `app2@${remoteUrl}/app2/${remoteVersion}/remoteEntry.js`
      }
    })
  ]
}

3. CDN Deployment Strategy

Static Asset Upload:

bash
# Use AWS S3 + CloudFront
aws s3 sync ./dist s3://my-bucket/app1/1.0.0/ --delete
aws cloudfront create-invalidation --distribution-id E1234567890 --paths "/*"

# Use Alibaba Cloud OSS
ossutil cp -rf ./dist oss://my-bucket/app1/1.0.0/

# Use Tencent Cloud COS
coscli cp -r ./dist cos://my-bucket/app1/1.0.0/

Nginx Configuration:

nginx
server {
    listen 80;
    server_name app1.example.com;

    # Main application
    location / {
        root /var/www/app1;
        try_files $uri $uri/ /index.html;
    }

    # Remote module entry
    location /remoteEntry.js {
        root /var/www/app1;
        add_header Cache-Control "public, max-age=31536000, immutable";
    }

    # Module files
    location /assets/ {
        root /var/www/app1;
        add_header Cache-Control "public, max-age=31536000, immutable";
    }

    # Enable gzip compression
    gzip on;
    gzip_types text/javascript application/javascript;
}

4. Version Management Strategy

Semantic Versioning:

json
{
  "version": "1.2.3",
  "scripts": {
    "version:patch": "npm version patch && npm run deploy",
    "version:minor": "npm version minor && npm run deploy",
    "version:major": "npm version major && npm run deploy"
  }
}

Version Rollback Mechanism:

bash
# Deployment script deploy.sh
#!/bin/bash

VERSION=$1
BACKUP_DIR="/var/backups/app1"
CURRENT_DIR="/var/www/app1"

# Backup current version
if [ -d "$CURRENT_DIR" ]; then
    cp -r "$CURRENT_DIR" "$BACKUP_DIR/$(date +%Y%m%d_%H%M%S)"
fi

# Deploy new version
cp -r "./dist" "$CURRENT_DIR"

# Health check
if ! curl -f http://localhost:3000/health; then
    echo "Health check failed, rolling back..."
    cp -r "$BACKUP_DIR/latest" "$CURRENT_DIR"
    exit 1
fi

echo "Deployment successful"

5. CI/CD Integration

GitHub Actions Configuration:

yaml
name: Deploy Module Federation

on:
  push:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v2
      
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'
          
      - name: Install dependencies
        run: npm ci
        
      - name: Build
        run: npm run build
        
      - name: Run tests
        run: npm test
        
      - name: Deploy to S3
        uses: jakejarvis/s3-sync-action@master
        with:
          args: --delete
        env:
          AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_REGION: 'us-east-1'
          SOURCE_DIR: 'dist'
          
      - name: Invalidate CloudFront
        uses: chetan/invalidate-cloudfront-action@master
        env:
          DISTRIBUTION: ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }}
          PATHS: '/*'
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_REGION: 'us-east-1'

6. Monitoring and Alerting

Health Check Endpoint:

javascript
// health.js
app.get('/health', (req, res) => {
  const health = {
    status: 'ok',
    timestamp: new Date().toISOString(),
    uptime: process.uptime(),
    memory: process.memoryUsage(),
    remoteModules: {
      app2: {
        loaded: true,
        version: '1.2.3',
        lastUpdated: new Date().toISOString()
      }
    }
  }
  res.json(health)
})

Monitoring Metrics:

javascript
// metrics.js
const Prometheus = require('prom-client')

const httpRequestDuration = new Prometheus.Histogram({
  name: 'http_request_duration_seconds',
  help: 'Duration of HTTP requests in seconds',
  labelNames: ['method', 'route', 'code']
})

const moduleLoadDuration = new Prometheus.Histogram({
  name: 'module_load_duration_seconds',
  help: 'Duration of module loading in seconds',
  labelNames: ['module', 'status']
})

// Usage example
const start = Date.now()
await import('remoteApp/Module')
moduleLoadDuration.observe(
  { module: 'remoteApp/Module', status: 'success' },
  (Date.now() - start) / 1000
)

7. Disaster Recovery

Backup Strategy:

bash
# Regular backup script
#!/bin/bash

BACKUP_DIR="/backups/$(date +%Y%m%d)"
mkdir -p "$BACKUP_DIR"

# Backup all applications
for app in app1 app2 app3; do
    cp -r "/var/www/$app" "$BACKUP_DIR/"
done

# Upload to S3
aws s3 sync "$BACKUP_DIR" s3://my-backups/

Failover Configuration:

nginx
upstream app1_cluster {
    server app1-primary.example.com weight=3;
    server app1-backup.example.com weight=1;
    server app1-dr.example.com backup;
}

server {
    location / {
        proxy_pass http://app1_cluster;
        proxy_next_upstream error timeout invalid_header http_500 http_502 http_503;
        proxy_next_upstream_tries 2;
    }
}

Best Practices Summary:

1. Environment Isolation: Complete isolation of development, testing, and production environments
2. Version Management: Use semantic versioning, support quick rollback
3. CDN Acceleration: Use CDN to distribute static assets, improve loading speed
4. Automated Deployment: Integrate CI/CD, achieve automated deployment process
5. Monitoring and Alerting: Real-time monitoring of application status, timely detection and resolution of issues
6. Backup and Recovery: Regular backups, disaster recovery planning
7. Canary Release: Support canary releases, reduce risk
8. Complete Documentation: Maintain detailed deployment documentation and operation manuals

Through these deployment strategies, Module Federation applications can ensure stability and reliability in production environments.