Creare una pipeline CI/CD in Azure Pipelines per Node.js con Azure DevOps Starter

In questa guida introduttiva si crea un'app Web progressiva NodeJS usando GatsbyJS e l'esperienza di creazione semplificata di Azure DevOps Starter. Quando hai terminato, si dispone di una pipeline di integrazione continua (CI) e consegna continua (CD) per la PWA in Azure Pipelines. Azure DevOps Starter configura gli elementi necessari per lo sviluppo, la distribuzione e il monitoraggio.

Prerequisiti

Un account Azure con una sottoscrizione attiva. Creare un account gratuito.
Un'organizzazione di Azure DevOps .

DevOps Starter configura una pipeline CI/CD su Azure Pipelines. È possibile creare una nuova organizzazione di Azure DevOps o usare un'organizzazione esistente. DevOps Starter crea anche risorse di Azure nella sottoscrizione di Azure preferita.

Accedere al portale di Azure e nel riquadro sinistro selezionare Crea una risorsa.
Nella casella di ricerca digitare DevOps Startere quindi selezionare . Fare clic su Aggiungi per crearne uno nuovo.

Selezionare un'applicazione di esempio e un servizio di Azure

Selezionare l'applicazione di esempio Node.js.
Il framework di esempio predefinito è Express.js. Modificare la selezione in Simple Node.js App e quindi selezionare Avanti.
Le destinazioni di distribuzione disponibili in questo passaggio sono dettate dal framework dell'applicazione selezionato nel passaggio 2. In questo esempio l'app Web di Windows è la destinazione di distribuzione predefinita. Lasciare l'opzione App Web per contenitori impostata e selezionare Avanti.

Configurare un nome di progetto e una sottoscrizione di Azure

Nel passaggio finale del flusso di lavoro di creazione di DevOps Starter assegnare un nome di progetto, selezionare una sottoscrizione di Azure e selezionare Fine.
Viene visualizzata una pagina di riepilogo durante la compilazione del progetto e l'applicazione viene distribuita in Azure. Dopo un breve periodo, un progetto viene creato nell'organizzazione di Azure DevOps che include un repository Git, una scheda Kanban, una pipeline di distribuzione, piani di test e gli artefatti richiesti dall'app.

Gestione del progetto

Passare a Tutte le risorse e trovare DevOps Starter. Seleziona il tuo DevOps Starter.
Si viene indirizzati a un dashboard che fornisce visibilità sulla home page del progetto, sul repository del codice, sulla pipeline CI/CD e su un collegamento all'app in esecuzione. Selezionare la home page del progetto per visualizzare l'applicazione in Azure DevOps e, in un'altra scheda del browser, selezionare l'endpoint applicazione per visualizzare l'app di esempio in tempo reale. Questo esempio verrà modificato in un secondo momento per utilizzare un PWA generato con GatsbyJS.
Dal progetto Azure DevOps è possibile invitare i membri del team a collaborare e stabilire una bacheca Kanban per iniziare a tenere traccia del lavoro. Per ulteriori informazioni, vedere qui.

Panoramica di Azure DevOps

Clonare il repository e installare Gatsby PWA

DevOps Starter crea un repository Git in Azure Repos o GitHub. Questo esempio ha creato un repository di Azure. Il passaggio successivo consiste nel clonare il repository e apportare modifiche.

Selezionare Repository dal progetto DevOps e quindi fare clic su Clona. Esistono vari meccanismi per clonare il repository Git nel desktop. Scegliere quello più adatto alla tua esperienza di sviluppo.
Dopo aver clonato il repository sul desktop, apportare alcune modifiche al modello di avvio. Inizia installando il CLI di GatsbyJS dal terminale.
```
 npm install -g gatsby
```

Nel terminale, naviga alla radice del tuo repository. Deve contenere tre cartelle simili alla seguente:

Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----        2/23/2020  10:42 PM                Application
d-----        2/23/2020   3:05 PM                ArmTemplates
d-----        2/23/2020   3:05 PM                Tests

Non vogliamo tutti i file nella cartella Application perché abbiamo intenzione di sostituirla con uno starter Gatsby. Esegui i seguenti comandi, in sequenza, per ridurlo.
```
cp .\Application\Dockerfile .
rmdir Application
```

Usare il CLI di Gatsby per generare un esempio di PWA. Eseguire gatsby new dal terminale per avviare la procedura guidata di PWA e selezionare gatsby-starter-blog per il modello di avvio. Dovrebbe essere simile a questo esempio:

c:\myproject> gatsby new
√ What is your project called? ... my-gatsby-project
? What starter would you like to use? » - Use arrow-keys. Return to submit.
    gatsby-starter-default
    gatsby-starter-hello-world
>   gatsby-starter-blog
    (Use a different starter)

Ora è disponibile una cartella denominata my-gatsby-project. Rinominalo in Application e copia il Dockerfile al suo interno.
```
mv my-gatsby-project Application
mv Dockerfile Application
```
Nell'editor preferito aprire il Dockerfile e modificare la prima riga da FROM node:8 a FROM node:12. Questa modifica garantisce che il contenitore usi Node.js versione 12.x anziché la versione 8.x. GatsbyJS richiede versioni più moderne di Node.js.
Aprire quindi il file package.json nella cartella Applicazione e modificare il campo script per assicurarsi che i server di sviluppo e produzione siano in ascolto su tutte le interfacce di rete disponibili (ad esempio, 0.0.0.0) e sulla porta 80. Senza queste impostazioni, il servizio app del contenitore non è in grado di instradare il traffico alla tua app Node.js in esecuzione all'interno del tuo contenitore. Il scripts campo dovrebbe essere simile a quello riportato di seguito. In particolare, desideri modificare le destinazioni develop, serve e start dalle impostazioni predefinite.
```
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop  -H 0.0.0.0 -p 80",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run serve",
    "serve": "npm run build && gatsby serve -H 0.0.0.0 -p 80",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  }
```

Modificare le pipeline CI/CD

Prima di eseguire il commit del codice nella sezione precedente, apportare alcune modifiche alle pipeline di compilazione e versione. Modificare la 'Pipeline di Build' e aggiornare l'attività di Node per utilizzare la versione 12.x Node.js. Impostare il campo Versione attività su 1.x e il campo Versione su 12.x.
In questa guida introduttiva non creiamo test unitari e disabilitiamo queste fasi nella nostra pipeline di compilazione. Quando si scrivono test, è possibile riabilitare questi passaggi. Fare clic con il pulsante destro del mouse per selezionare le attività con l'etichetta Installa dipendenze di test e Esegui test unitari e disabilitarle.
Modifica la pipeline di rilascio.
Come per la pipeline di compilazione, modificare l'attività Node per usare 12.x e disabilitare le due attività di test. Il tuo rilascio dovrebbe assomigliare a questa schermata.
Nel lato sinistro del browser, vai al file views/index.pug.
Selezionare Modifica e quindi apportare una modifica all'intestazione h2. Ad esempio, inserisci Inizia subito con Azure DevOps Starter o apporta altre modifiche.
Selezionare Commite quindi salvare le modifiche.
Nel browser, vai al dashboard di DevOps Starter.
Ora dovresti vedere una costruzione in corso. Le modifiche apportate vengono compilate e distribuite automaticamente tramite una pipeline CI/CD.

Committare le modifiche ed esaminare la pipeline CI/CD di Azure

Nei due passaggi precedenti è stato aggiunto un pwa generato da Gatsby al repository Git e sono state modificate le pipeline per compilare e distribuire il codice. È possibile eseguire il commit del codice e controllarne lo stato di avanzamento tramite la pipeline di compilazione e versione.

Dalla radice del repository Git del progetto in un terminale eseguire i comandi seguenti per eseguire il push del codice nel progetto Azure DevOps:
```
git add .
git commit -m "My first Gatsby PWA"
git push
```
Una compilazione viene avviata non appena git push viene completata. È possibile seguire lo stato di avanzamento dal dashboard di Azure DevOps.
Dopo alcuni minuti, le pipeline di compilazione e rilascio dovrebbero terminare e il PWA dovrebbe essere distribuito in un contenitore. Fare clic sul collegamento Endpoint applicazione nel dashboard precedente e verrà visualizzato un progetto iniziale di Gatsby per i blog.

Pulire le risorse

È possibile eliminare servizio app di Azure e altre risorse correlate create quando non sono più necessarie le risorse. Usa la funzionalità Elimina nel dashboard di DevOps Starter.

Passaggi successivi

Quando si configura il processo CI/CD, le pipeline di compilazione e versione vengono create automaticamente. È possibile modificare queste pipeline di compilazione e versione per soddisfare le esigenze del team. Per altre informazioni sulla pipeline CI/CD, vedere:

Personalizza il processo del CD

Last updated on 2020-03-24

Condividi tramite