Come realizzare una pipeline di continuous delivery per un’applicazione front-end Angular.

I servizi

• Un bucket S3 per archiviare tutti i file front-end      
• Una distribuzione CloudFront per servire il contenuto del bucket agli utenti finali      
• Route53 per configurare e utilizzare un dominio personalizzato per l'applicazione      

• CodeDeploy come repository Git privato
• CodePipeline come orchestrator per la pipeline di CD
• CodeBuild per eseguire la build della soluzione Angular.
• Una funzione Lambda personalizzata per creare un invalidazione sulla distribuzione CloudFront ad ogni deploy      

L'architettura

I passaggi della pipeline

Source

Build

version: '0.2'
phases:
  install:
    runtime-versions:
      nodejs: 12
  pre_build:
    commands:
      - echo "Prebuild, installing npm dependencies"
      - npm install
  build:
    commands:
      - echo "Starting the build step"
      - npm run build
      - echo "Finished"
artifacts:
  name: "BuildOutput"
  files:
    - '**/*'
  base-directory: 'dist'

Deploy

CloudFront Invalidation

import boto3
import os
 
from botocore.exceptions import ClientError
 
cloudfront_client = boto3.client('cloudfront')
codepipeline_client = boto3.client('codepipeline')
 
 
def lambda_handler(event, context):
   try:
       cdn_id = os.environ["CDN"]
       cloudfront_client.create_invalidation(
           DistributionId=cdn_id,
           InvalidationBatch={
               'Paths': {
                   'Quantity': 1,
                   'Items': [
                       '/*'
                   ],
               },
               'CallerReference': event['CodePipeline.job']['id']
           }
       )
 
       codepipeline_client.put_job_success_result(jobId=event['CodePipeline.job']['id'])
   except ClientError as e:
       print("Boto3 exception", e)
       codepipeline_client.put_job_failure_result(
           jobId=event['CodePipeline.job']['id'],
           failureDetails={
               'type': 'JobFailed',
               'message': e.response
           })
   except Exception as e:
       print("Error", e)
       codepipeline_client.put_job_failure_result(
           jobId=event['CodePipeline.job']['id'],
           failureDetails={
               'type': 'JobFailed',
               'message': e.args
           })

Come costruire la soluzione

1. Innanzitutto, è necessario creare un bucket S3 privato per il front-end.
   1. Segui la procedura guidata, assicurati di selezionare le opzioni per rendere privato il bucket.
   2. Non è necessario scegliere il nome del bucket come il nome di dominio completo (FQDN) dell’applicazione perché serviremo il contenuto utilizzando CloudFront
2. Crea una distribuzione CloudFront.
   1. Seleziona il bucket creato nel primo passaggio come origine.
   2. Seleziona l'opzione per consentire a CloudFront di gestire la bucket policy, in questo modo la procedura guidata creerà una policy perfettamente sicura e valida per il bucket, che consente alla distribuzione di servirne i contenuti mantenendo il bucket privato allo stesso tempo.
   3. Reindirizzare tutti gli errori alla pagina index, questo è fondamentale per il funzionamento del router di Angular.
   4. NOTA: se non state creando l'infrastruttura nella regione us-east-1, attendete fino a 2 ore dopo il deploy prima di testarla. Ciò è dovuto al modo in cui funziona la propagazione dei DNS tra S3 e CloudFront al momento in cui stiamo scrivendo. Un bucket S3 appena creato, in qualsiasi altra region AWS, produce un redirect http temporaneo che impedisce la corretta integrazione dei due servizi. Una volta atteso il TTL la soluzione funzionerà correttamente senza alcuna modifica.
3. Creare la funzione Lambda per invalidare la CDN.
   1. Puoi copiare e incollare il codice dell'esempio sopra.
   2. Se si utilizza il codice di esempio, aggiungere una variabile di ambiente denominata "CDN" e valorizzarla con l'id della distribuzione CloudFront.
   3. Assicurati di creare un nuovo ruolo IAM per la funzione, con tutte le autorizzazioni del ruolo BasicLambdaExecution, oltre a:
      1. cloudfront: CreateInvalidation sulla distribuzione CloudFront
      2. codepipeline: PutJobSuccessResult su *
      3. codepipeline: PutJobFailureResult su *
   4. Prendi nota del nome della funzione Lambda e dell'ARN per dopo.
4. Crea una nuova CodePipeline
   1. Seguire la procedura guidata e aggiungere lo step di source, selezionare il repository CodeCommit e il ramo git desiderato.
   2. Aggiungi uno step di build, crea un nuovo progetto CodeBuild seguendo la procedura guidata
      1. Seleziona un'immagine standard di Ubuntu
      2. Creare o selezionare un ruolo di servizio CodeBuild standard
      3. Lasciare tutte le impostazioni predefinite e proseguire
   3. Aggiungi uno step di deploy
      1. Seleziona deploy S3
      2. Segui la procedura guidata per configurarlo in modo da inviare l'output di generazione sul bucket del front-end
   4. Infine, aggiungi l'ultimo passaggio, scegli Invoke -> AWS Lambda
      1. Seleziona la funzione Lambda creata nel passaggio precedente
      2. Lascia tutti i parametri al loro valore predefinito
5. Completa la creazione della pipeline e testala. La pipeline dovrebbe avviarsi non appena si completa la creazione.

• Pipelines di CD/CI cross-account con AWS CodePipeline
• Come creare CI/CD Pipeline flessibili su AWS con Fargate e SQS
• Creare e mantenere un’infrastruttura AWS Serverless con Troposphere e CodePipeline