3 - Firebase Hosting + GitHub Actions: Deploy Automatico

# Installare Firebase CLI globalmente
npm install -g firebase-tools

# Verificare l'installazione
firebase --version

# Login (apre il browser per l'autenticazione)
firebase login

# Per ambienti CI/CD, usare un token
firebase login:ci
# Questo genera un token da salvare come segreto GitHub

# Inizializzare Firebase nel progetto
firebase init hosting
      

{
  "hosting": {
    "public": "dist/my-app/browser",
    "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": "**/*.@(jpg|jpeg|gif|png|svg|webp|ico)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=86400"
          }
        ]
      },
      {
        "source": "**/*.@(woff|woff2|ttf|eot)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000, immutable"
          }
        ]
      },
      {
        "source": "**",
        "headers": [
          {
            "key": "X-Frame-Options",
            "value": "SAMEORIGIN"
          },
          {
            "key": "X-Content-Type-Options",
            "value": "nosniff"
          },
          {
            "key": "X-XSS-Protection",
            "value": "1; mode=block"
          },
          {
            "key": "Referrer-Policy",
            "value": "strict-origin-when-cross-origin"
          }
        ]
      }
    ]
  }
}
      

{
  "hosting": {
    "redirects": [
      {
        "source": "/old-blog/:slug",
        "destination": "/blog/:slug",
        "type": 301
      },
      {
        "source": "/api/**",
        "destination": "https://api.example.com/v1/:splat",
        "type": 302
      },
      {
        "source": "/docs",
        "destination": "https://docs.example.com",
        "type": 301
      }
    ]
  }
}
      

# .github/workflows/firebase-preview.yml
name: Firebase Preview Deploy

on:
  pull_request:
    branches: [main]

jobs:
  build-and-preview:
    name: Build and Deploy Preview
    runs-on: ubuntu-latest
    permissions:
      checks: write
      pull-requests: write
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Run tests
        run: npx ng test --watch=false --browsers=ChromeHeadless

      - name: Build application
        run: npx ng build --configuration=production

      - name: Deploy to Firebase Preview Channel
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
          projectId: my-angular-project
          expires: 7d
      

# .github/workflows/firebase-production.yml
name: Firebase Production Deploy

on:
  push:
    branches: [main]

concurrency:
  group: production-deploy
  cancel-in-progress: false

jobs:
  test:
    name: Run Tests
    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 ng lint
      - run: npx ng test --watch=false --browsers=ChromeHeadless

  build:
    name: Build Application
    runs-on: ubuntu-latest
    needs: test
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - run: npm ci
      - run: npx ng build --configuration=production
      - uses: actions/upload-artifact@v4
        with:
          name: production-build
          path: dist/
          retention-days: 1

  deploy:
    name: Deploy to Production
    runs-on: ubuntu-latest
    needs: build
    environment: production
    steps:
      - uses: actions/checkout@v4
      - uses: actions/download-artifact@v4
        with:
          name: production-build
          path: dist/

      - name: Deploy to Firebase Hosting
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
          channelId: live
          projectId: my-angular-project
      

# Elencare le release recenti
firebase hosting:releases:list --limit 10

# Fare rollback a una release specifica
firebase hosting:rollback --release RELEASE_ID

# Alternativa: clone di una release precedente
firebase hosting:clone SOURCE_SITE:SOURCE_CHANNEL TARGET_SITE:live
      

# .github/workflows/rollback.yml
name: Emergency Rollback

on:
  workflow_dispatch:
    inputs:
      commit-sha:
        description: 'Commit SHA to rollback to'
        required: true
        type: string
      reason:
        description: 'Reason for rollback'
        required: true
        type: string

jobs:
  rollback:
    name: Rollback to Previous Version
    runs-on: ubuntu-latest
    environment: production
    steps:
      - name: Checkout specific commit
        uses: actions/checkout@v4
        with:
          ref: ${{ inputs.commit-sha }}

      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - run: npm ci
      - run: npx ng build --configuration=production

      - name: Deploy rollback version
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
          channelId: live
          projectId: my-angular-project

      - name: Notify team
        run: |
          echo "Rollback completed"
          echo "Commit: ${{ inputs.commit-sha }}"
          echo "Reason: ${{ inputs.reason }}"
      

Record DNS da configurare:

# Verifica proprietà
TXT  @  firebase-hosting-verification=xxxxxxxxxxxxx

# Routing al CDN Firebase
A    @  151.101.1.195
A    @  151.101.65.195

# Sottodominio www (opzionale)
CNAME  www  my-project.web.app
      

{
  "hosting": {
    "headers": [
      {
        "source": "/index.html",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          }
        ]
      },
      {
        "source": "ngsw.json",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache"
          }
        ]
      },
      {
        "source": "**/*.@(js|css)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000, immutable"
          }
        ]
      },
      {
        "source": "**/*.@(jpg|jpeg|png|gif|svg|webp|avif|ico)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=604800"
          }
        ]
      },
      {
        "source": "**/*.@(woff|woff2)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000, immutable"
          }
        ]
      }
    ]
  }
}
      

# Build dell'applicazione
npm run build

# Testare Firebase Hosting in locale
firebase emulators:start --only hosting

# Il sito sarà disponibile su http://localhost:5000
# Questo simula esattamente il comportamento di Firebase Hosting:
# - Rewrites SPA
# - Headers personalizzati
# - Redirect rules
# - Clean URLs

# Alternativa: serve direttamente la directory di build
firebase serve --only hosting