Multi‑Cloud Angular 20+ Delivery That Doesn’t Blink: AWS, Azure, and GCP with GitHub Actions, Jenkins, and Azure DevOps (OIDC, CDN, Zero‑Downtime)

A Real Multi‑Cloud Angular Delivery Story: One Build, Three Clouds, Zero Downtime

Why Multi‑Cloud Angular 20+ Delivery Matters in 2025

Build Once with Nx; Deploy Many with Cloud‑Specific Edges

# Nx workspace
npx nx build web --configuration=production
# Result: dist/web with hashed assets for immutable caching

// example runtime config pattern
export interface AppRuntimeConfig { apiBaseUrl: string; release: string; }
export const runtimeConfig = fetch('/assets/runtime-config.json').then(r => r.json()) as Promise<AppRuntimeConfig>;

Caching rules:

• assets/*: Cache-Control: public, max-age=31536000, immutable
• index.html: Cache-Control: no-store, must-revalidate

SPA Routing and Rewrite Rules on Each Cloud

AWS CloudFront Function to handle SPA routes:

function handler(event) {
  var req = event.request;
  if (!req.uri.includes('.') && !req.uri.endsWith('/')) {
    req.uri += '/';
  }
  if (req.uri.endsWith('/')) {
    req.uri += 'index.html';
  }
  return req;
}

GitHub Actions OIDC to AWS, Azure, and GCP

name: deploy_web_multi_cloud
on:
  push:
    branches: [main]
permissions:
  contents: read
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - run: npm ci
      - run: npx nx build web --configuration=production
      - uses: actions/upload-artifact@v4
        with:
          name: web-dist
          path: dist/web

  aws:
    needs: build
    runs-on: ubuntu-latest
    permissions:
      id-token: write
      contents: read
    steps:
      - uses: actions/download-artifact@v4
        with: { name: web-dist, path: dist/web }
      - uses: aws-actions/configure-aws-credentials@v4
        with:
          role-to-assume: arn:aws:iam::123456789012:role/gha-deployer
          aws-region: us-east-1
      - run: |
          aws s3 sync dist/web s3://myapp-prod/ --delete \
            --cache-control "public,max-age=31536000,immutable" \
            --exclude "index.html"
          aws s3 cp dist/web/index.html s3://myapp-prod/index.html \
            --cache-control "no-store, must-revalidate"
          aws cloudfront create-invalidation --distribution-id E123ABC --paths "/*"

  azure:
    needs: build
    runs-on: ubuntu-latest
    permissions:
      id-token: write
      contents: read
    steps:
      - uses: actions/download-artifact@v4
        with: { name: web-dist, path: dist/web }
      - uses: azure/login@v2
        with:
          client-id: ${{ secrets.AZURE_CLIENT_ID }}
          tenant-id: ${{ secrets.AZURE_TENANT_ID }}
          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
      - run: |
          az storage blob upload-batch --destination '$web' --source dist/web \
            --account-name mystorageacct --content-cache-control 'public,max-age=31536000,immutable'
          # overwrite index.html with no-cache
          az storage blob upload --file dist/web/index.html --container-name '$web' \
            --name index.html --account-name mystorageacct \
            --content-cache-control 'no-store, must-revalidate' --overwrite
          az afd endpoint purge --content-paths "/*" --profile-name my-afd --resource-group rg-web

  gcp:
    needs: build
    runs-on: ubuntu-latest
    permissions:
      id-token: write
      contents: read
    steps:
      - uses: actions/download-artifact@v4
        with: { name: web-dist, path: dist/web }
      - uses: google-github-actions/auth@v2
        with:
          workload_identity_provider: projects/12345/locations/global/workloadIdentityPools/gh-pool/providers/gh-provider
          service_account: gh-deployer@myproj.iam.gserviceaccount.com
      - uses: google-github-actions/setup-gcloud@v2
      - run: |
          gsutil -m rsync -r dist/web gs://myapp-site
          # set caching headers
          gsutil -m setmeta -h "Cache-Control:public,max-age=31536000,immutable" gs://myapp-site/**
          gsutil setmeta -h "Cache-Control:no-store, must-revalidate" gs://myapp-site/index.html
          gcloud compute url-maps invalidate-cdn-cache my-cdn --path "/*"

Jenkins and Azure DevOps Pipelines That Play Nice with Multi‑Cloud

// Jenkinsfile
pipeline {
  agent any
  options { timestamps() }
  stages {
    stage('Build') {
      steps {
        checkout scm
        sh 'npm ci'
        sh 'npx nx build web --configuration=production'
        stash includes: 'dist/web/**', name: 'web-dist'
      }
    }
    stage('Deploy AWS') {
      environment {
        // Prefer short‑lived creds from Vault or withAWS(role: ...)
        AWS_ACCESS_KEY_ID = credentials('aws_access_key_id')
        AWS_SECRET_ACCESS_KEY = credentials('aws_secret_access_key')
        AWS_DEFAULT_REGION = 'us-east-1'
      }
      steps {
        unstash 'web-dist'
        sh 'aws s3 sync dist/web s3://myapp-prod/ --delete --exclude "index.html" --cache-control "public,max-age=31536000,immutable"'
        sh 'aws s3 cp dist/web/index.html s3://myapp-prod/index.html --cache-control "no-store, must-revalidate"'
        sh 'aws cloudfront create-invalidation --distribution-id E123ABC --paths "/*"'
      }
    }
  }
}

# azure-pipelines.yml
trigger:
- main
pool:
  vmImage: 'ubuntu-latest'

stages:
- stage: Build
  jobs:
  - job: Build
    steps:
    - task: NodeTool@0
      inputs: { versionSpec: '20.x' }
    - script: |
        npm ci
        npx nx build web --configuration=production
      displayName: Build
    - publish: dist/web
      artifact: web-dist

- stage: DeployAWS
  jobs:
  - job: AWS
    steps:
    - download: current
      artifact: web-dist
    - task: AWSShellScript@1
      inputs:
        awsCredentials: 'aws-oidc-service-connection'
        regionName: 'us-east-1'
        scriptType: 'inline'
        inlineScript: |
          aws s3 sync $(Pipeline.Workspace)/web-dist s3://myapp-prod/ --delete --exclude "index.html" --cache-control "public,max-age=31536000,immutable"
          aws s3 cp $(Pipeline.Workspace)/web-dist/index.html s3://myapp-prod/index.html --cache-control "no-store, must-revalidate"
          aws cloudfront create-invalidation --distribution-id E123ABC --paths "/*"

SSR or Static: Choosing the Right Rendering per Cloud

Measure hydration with Angular DevTools and send to GA4/Firebase Performance. If SSR reduces p75 LCP/TTFB materially (>15%), keep it; otherwise, avoid complexity.

Observability, Guardrails, and Rollbacks

# Sample Lighthouse CI in GitHub Actions
- name: Lighthouse CI
  run: |
    npx @lhci/cli autorun --collect.url=https://aws.myapp.com \
      --assert.preset=lighthouse:recommended --upload.target=temporary-public-storage

Tip: run synthetic checks per region (us-east-1, eu-west, ap-southeast) so you can compare clouds apples‑to‑apples.

When to Hire an Angular Developer for Legacy Rescue

How an Angular Consultant Approaches Multi‑Cloud Rollouts

Key Takeaways and Next Steps