Multi‑Cloud Angular 20+ Delivery: AWS, Azure, and GCP Patterns with GitHub Actions, Jenkins, and Azure DevOps

Why Multi‑Cloud Angular Delivery Matters in 2025

AWS Strategy: S3/CloudFront for SPA, and SSR with Lambda@Edge or ECS

# Build (Nx)
npx nx run web:build:production

# Upload to S3
aws s3 sync dist/apps/web s3://my-app-prod --delete --cache-control max-age=31536000,immutable --exclude index.html
aws s3 cp dist/apps/web/index.html s3://my-app-prod/index.html \
  --cache-control no-cache, no-store, must-revalidate

# Invalidate CloudFront
aws cloudfront create-invalidation --distribution-id E123ABC --paths "/index.html" "/assets/*"

Key metrics to watch: CloudFront cache hit ratio (>95%), LCP (<2.5s), hydration time (<400ms on mid-tier devices). Wire these to CloudWatch dashboards for every release.

Azure Strategy: Static Web Apps/Front Door and App Service for SSR

# azure-pipelines.yml (excerpt)
stages:
- stage: Build
  jobs:
  - job: build
    pool: { vmImage: 'ubuntu-latest' }
    steps:
    - script: npm ci && npx nx run web:build:production
      displayName: Build web
    - publish: dist/apps/web
      artifact: web
- stage: Deploy_Prod
  dependsOn: Build
  jobs:
  - deployment: prod
    environment: prod
    strategy:
      runOnce:
        deploy:
          steps:
          - download: current
            artifact: web
          - task: AzureCLI@2
            inputs:
              azureSubscription: $(AZ_CONN)
              scriptType: bash
              scriptLocation: inlineScript
              inlineScript: |
                az storage blob upload-batch \
                  --account-name $(STORAGE) \
                  -d '$web' -s $(Pipeline.Workspace)/web \
                  --content-cache-control 'max-age=31536000,immutable' \
                  --pattern '!index.html'
                az storage blob upload \
                  --account-name $(STORAGE) \
                  -c '$web' -f $(Pipeline.Workspace)/web/index.html \
                  -n index.html --content-cache-control 'no-cache'
                az cdn endpoint purge -g $(RG) -n $(CDN) --profile-name $(CDN_PROFILE) --content-paths '/index.html' '/assets/*'

Measure: Front Door latency per region, SWA/Storage egress costs, and App Insights Availability >99.9% after slot swaps.

GCP Strategy: Firebase Hosting or Cloud Run for SSR

// firebase.json (excerpt)
{
  "hosting": {
    "public": "dist/apps/web",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [{ "source": "**", "destination": "/index.html" }],
    "headers": [
      { "source": "**/*.@(js|css)", "headers": [{"key":"Cache-Control","value":"public,max-age=31536000,immutable"}] },
      { "source": "/index.html", "headers": [{"key":"Cache-Control","value":"no-cache"}] }
    ]
  }
}

# Cloud Run SSR deploy
gcloud run deploy web-ssr --source . --region us-central1 --allow-unauthenticated \
  --set-env-vars NODE_ENV=production

Track: Firebase logs for 404s, Core Web Vitals in GA4, and preview-to-prod lead time.

CI/CD That Spans Clouds: GitHub Actions Matrix, Nx, and OIDC

name: deploy-multicloud
on:
  push:
    branches: [ main ]
permissions:
  id-token: write
  contents: read
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        cloud: [aws, azure, gcp]
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - name: Cache npm
        uses: actions/cache@v4
        with:
          path: ~/.npm
          key: npm-${{ hashFiles('package-lock.json') }}
      - run: npm ci
      - name: Build affected (Nx)
        run: npx nx affected --target=build --base=origin/main~1 --head=HEAD --parallel
      - name: Lighthouse CI
        run: npx @lhci/cli autorun || echo "LHCI warnings only"
      - name: Cypress smoke
        run: npx cypress run --spec "cypress/e2e/smoke.cy.ts"
      - name: Configure cloud auth
        if: matrix.cloud == 'aws'
        uses: aws-actions/configure-aws-credentials@v4
        with:
          role-to-assume: ${{ secrets.AWS_ROLE }}
          aws-region: us-east-1
      - name: Configure Azure login
        if: matrix.cloud == 'azure'
        uses: azure/login@v2
        with:
          client-id: ${{ secrets.AZURE_CLIENT_ID }}
          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
      - name: GCP auth
        if: matrix.cloud == 'gcp'
        uses: google-github-actions/auth@v2
        with:
          workload_identity_provider: ${{ secrets.GCP_WIP }}
          service_account: ${{ secrets.GCP_SA }}
      - name: Deploy
        run: |
          if [ "${{ matrix.cloud }}" = "aws" ]; then ./scripts/deploy-aws.sh; fi
          if [ "${{ matrix.cloud }}" = "azure" ]; then ./scripts/deploy-azure.sh; fi
          if [ "${{ matrix.cloud }}" = "gcp" ]; then ./scripts/deploy-gcp.sh; fi

With Nx caching and matrix parallelism, I typically shave 35–55% off CI time. Ship gates (a11y AA, Lighthouse thresholds, bundle budgets) catch issues before the CDN does.

Jenkins and Azure DevOps Pipelines That Don’t Fight You

// Jenkinsfile (excerpt)
pipeline {
  agent any
  options { timestamps() }
  stages {
    stage('Install') { steps { sh 'npm ci' } }
    stage('Build') { steps { sh 'npx nx run web:build:production' } }
    stage('Test') { steps { sh 'npx cypress run --spec cypress/e2e/smoke.cy.ts' } }
    stage('Deploy AWS') {
      when { expression { return params.DEPLOY_AWS } }
      steps { sh './scripts/deploy-aws.sh' }
    }
    stage('Deploy Azure') {
      when { expression { return params.DEPLOY_AZURE } }
      steps { sh './scripts/deploy-azure.sh' }
    }
    stage('Deploy GCP') {
      when { expression { return params.DEPLOY_GCP } }
      steps { sh './scripts/deploy-gcp.sh' }
    }
  }
}

Whether it’s Jenkins behind the firewall or Azure DevOps in a regulated environment, keep deploy logic in repo scripts so teams can reproduce locally.

Environment, Secrets, and Feature Flags Across Clouds

// app/runtime-config.service.ts
import { Injectable, signal } from '@angular/core';
export type RuntimeConfig = { apiBase: string; realtimeWs?: string; release: string };
@Injectable({ providedIn: 'root' })
export class RuntimeConfigService {
  private _cfg = signal<RuntimeConfig>({ apiBase: '', release: '' });
  cfg = this._cfg.asReadonly();
  async load() {
    const res = await fetch('/assets/runtime-config.json', { cache: 'no-store' });
    this._cfg.set(await res.json());
  }
}

// assets/runtime-config.json (prod example)
{ "apiBase": "https://api.example.com", "realtimeWs": "wss://ws.example.com", "release": "2025.02.01" }

This keeps your Angular 20+ build portable across AWS/Azure/GCP while SignalStore-driven services can read endpoints at runtime.

CDN Rules and Zero‑Downtime Releases

Expectations I set: 0 downtime for SPA, <60s rollback for SSR, <5% cache-miss during rollout, and LCP within budget after purge. Instrument this via CloudWatch, App Insights, and Cloud Monitoring dashboards triggered post‑deploy.

When to Hire an Angular Developer for Multi‑Cloud Delivery

Example Delivery Metrics to Commit