Integrazione CI/CD per un'Applicazione Angular con Apollo GraphQL

Codegrind Team•Sep 03 2024

L’integrazione di CI/CD (Continuous Integration e Continuous Deployment) in un progetto Angular con Apollo GraphQL è essenziale per garantire un processo di sviluppo fluido, automatizzato e privo di errori. Con l’aiuto di strumenti come GitHub Actions, è possibile automatizzare il processo di build, test e deployment dell’applicazione, assicurando che ogni modifica al codice venga verificata e distribuita correttamente.

In questa guida, ti mostrerò come configurare una pipeline CI/CD per un’applicazione Angular integrata con Apollo GraphQL utilizzando GitHub Actions.

Prerequisiti

Prima di iniziare, assicurati di avere:

Un progetto Angular configurato e integrato con Apollo Client.
Un repository GitHub dove è ospitato il tuo codice.
Conoscenza di base di Git e GitHub.

Step 1: Configurazione di GitHub Actions per CI/CD

GitHub Actions è uno strumento potente per creare flussi di lavoro automatizzati direttamente nel tuo repository GitHub. Per configurare una pipeline CI/CD per il tuo progetto Angular, inizia creando un file di configurazione per GitHub Actions.

Creazione del Workflow

Crea la Cartella .github/workflows: All’interno del tuo progetto, crea la cartella .github/workflows se non esiste già.
Aggiungi un File di Workflow: All’interno della cartella workflows, crea un file chiamato ci-cd.yml:

name: CI/CD Pipeline

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: "16"

      - name: Install dependencies
        run: npm install

      - name: Run lint
        run: npm run lint

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

      - name: Build application
        run: npm run build --prod

      - name: Upload build artifacts
        uses: actions/upload-artifact@v2
        with:
          name: build
          path: dist/

  deploy:
    runs-on: ubuntu-latest
    needs: build

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Download build artifacts
        uses: actions/download-artifact@v2
        with:
          name: build

      - name: Deploy to Firebase
        uses: w9jds/firebase-action@v1
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Spiegazione del Workflow

Build Job: Questo job esegue una serie di passaggi per assicurarsi che il codice sia corretto e pronto per la produzione:
- Checkout: Recupera il codice dal repository.
- Setup Node.js: Configura la versione di Node.js.
- Install dependencies: Installa tutte le dipendenze necessarie con npm install.
- Lint: Esegue il linting del codice per trovare problemi di stile e sintassi.
- Test: Esegue i test unitari per verificare che il codice funzioni correttamente.
- Build: Crea una versione di produzione dell’applicazione.
- Upload build artifacts: Salva gli artefatti di build per usarli nel job di deploy.
Deploy Job: Questo job viene eseguito solo se il job di build ha successo:
- Checkout: Recupera nuovamente il codice.
- Download build artifacts: Scarica gli artefatti creati nel job di build.
- Deploy: Utilizza Firebase per distribuire l’applicazione (puoi sostituirlo con il tuo servizio di hosting preferito).

Configurazione delle Variabili d’Ambiente

Se stai utilizzando Firebase per il deployment, dovrai aggiungere un Firebase Token come secret nel tuo repository GitHub.

Ottenere il Firebase Token:
- Esegui il comando firebase login:ci sulla tua macchina locale.
- Questo comando ti fornirà un token di accesso.
Aggiungere il Token ai Secrets di GitHub:
- Vai su GitHub, nel tuo repository.
- Vai su Settings > Secrets and variables > Actions.
- Crea un nuovo secret con il nome FIREBASE_TOKEN e incolla il token ottenuto.

Step 2: Configurazione dei Test e del Linting

Test Unitari con Angular

Angular CLI supporta i test unitari utilizzando Karma e Jasmine. Assicurati che i tuoi test siano configurati correttamente nel file karma.conf.js e che possano essere eseguiti in modalità CI (Continuous Integration).

Puoi eseguire i test utilizzando il comando:

npm run test -- --watch=false --browsers=ChromeHeadless

Linting del Codice

Assicurati di avere configurato il linting del codice utilizzando TSLint o ESLint. Puoi eseguire il linting con il comando:

npm run lint

Questo passaggio è fondamentale per mantenere il codice coerente e privo di errori di stile.

Step 3: Configurazione del Deployment

Il deployment finale può essere eseguito su vari servizi di hosting. Nell’esempio sopra, ho utilizzato Firebase, ma puoi adattarlo facilmente ad altri servizi come AWS S3, Netlify, Vercel, ecc.

Deployment su Firebase

Assicurati di aver configurato Firebase nel tuo progetto:

Inizializzare Firebase: Se non l’hai già fatto, esegui firebase init nel tuo progetto per configurare Firebase Hosting.
Aggiornare il File .firebaserc: Questo file definisce il progetto Firebase che verrà utilizzato durante il deployment.

Step 4: Verifica della Pipeline CI/CD

Una volta configurato tutto, ogni volta che esegui un push sul branch main (o quello che hai configurato), la pipeline CI/CD verrà eseguita automaticamente. Questo include la build, il testing, il linting e il deployment dell’applicazione.

Puoi verificare lo stato della pipeline direttamente nella scheda Actions del repository GitHub.

Conclusione

Configurare una pipeline CI/CD per un’applicazione Angular integrata con Apollo GraphQL è un passo fondamentale per automatizzare e migliorare il processo di sviluppo e deployment. Con GitHub Actions, puoi creare flussi di lavoro potenti e personalizzati che ti permettono di rilasciare il codice più velocemente e con maggiore sicurezza. Seguendo questa guida, sarai in grado di impostare una pipeline CI/CD robusta che supporta il tuo flusso di lavoro di sviluppo.