Skapa en CI/CD-pipeline i Azure Pipelines för Node.js med Azure DevOps Starter

I den här snabbstarten skapar du en PWA (NodeJS Progressive Web App) med GatsbyJS och den förenklade skapandeupplevelsen för Azure DevOps Starter. När du är klar har du en pipeline för kontinuerlig integrering (CI) och kontinuerlig leverans (CD) för din PWA i Azure Pipelines. Azure DevOps Starter konfigurerar det du behöver för att utveckla, distribuera och övervaka.

Förutsättningar

Ett Azure-konto med en aktiv prenumeration. Skapa ett konto utan kostnad.
En Azure DevOps-organisation .

DevOps Starter skapar en CI/CD-pipeline i Azure Pipelines. Du kan skapa en ny Azure DevOps-organisation eller använda en befintlig organisation. DevOps Starter skapar även Azure-resurser i valfri Azure-prenumeration.

Logga in på Azure-portalen och välj Skapa en resurs i den vänstra rutan.
I sökrutan skriver du DevOps Starteroch väljer sedan. Klicka på Lägg till för att skapa en ny.

Välj ett exempelprogram och En Azure-tjänst

Välj Node.js exempelprogrammet.
Standardramverket är Express.js. Ändra markeringen till Enkel Node.js app och välj sedan Nästa.
De distributionsmål som är tillgängliga i det här steget styrs av det programramverk som valts i steg 2. I det här exemplet är Windows Web App standarddistributionsmål. Lämna Web App for Containers inställt och välj Nästa.

Konfigurera ett projektnamn och en Azure-prenumeration

I det sista steget i arbetsflödet för att skapa DevOps Starter tilldelar du ett projektnamn, väljer en Azure-prenumeration och väljer Klar.
En sammanfattningssida visas när projektet skapas och programmet distribueras till Azure. Efter en kort period skapas ett projekt i din Azure DevOps-organisation som innehåller en git-lagringsplats, en Kanban-styrelse, en distributionspipeline, testplaner och de artefakter som krävs av din app.

Hantera projektet

Gå till Alla resurser och leta reda på din DevOps Starter. Välj din DevOps Starter.
Du dirigeras till en instrumentpanel som ger insyn i projektets startsida, kodlagringsplats, CI/CD-pipelinen och en länk till din app som körs. Välj startsidan för projekt för att visa ditt program i Azure DevOps och välj programslutpunkten på en annan webbläsarflik för att visa liveexempelappen. Vi ändrar det här exemplet senare för att använda GatsbyJS-genererad PWA.
Från ditt Azure DevOps-projekt kan du bjuda in gruppmedlemmar att samarbeta och upprätta en Kanban-styrelse för att börja spåra ditt arbete. Mer information finns här.

Översikt över Azure DevOps

Klona arkivet och installera din Gatsby PWA

DevOps Starter skapar en git-lagringsplats i Azure Repos eller GitHub. Det här exemplet har skapat en Azure-lagringsplats. Nästa steg är att klona lagringsplatsen och göra ändringar.

Välj Lagringsplatser från Ditt DevOps-projekt och klicka sedan på Klona. Det finns olika mekanismer för att klona git-lagringsplatsen till skrivbordet. Välj den som passar din utvecklingsupplevelse.
När lagringsplatsen har klonats till skrivbordet gör du några ändringar i startmallen. Börja med att installera GatsbyJS CLI från terminalen.
```
 npm install -g gatsby
```

Från terminalen navigerar du till roten av repon. Den bör innehålla tre mappar som ser ut så här:

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

Vi vill inte att alla filer i programmappen ska ersättas med en Gatsby-start. Kör följande kommandon i följd för att trimma ned det.
```
cp .\Application\Dockerfile .
rmdir Application
```

Använd Gatsby CLI för att generera ett exempel på PWA. Kör gatsby new från terminalen för att starta PWA-guiden och välj gatsby-starter-blog för startmallen. Det bör likna det här exemplet:

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)

Nu har du en mapp med namnet my-gatsby-project. Byt namn på den till Application och kopiera Dockerfile in i den.
```
mv my-gatsby-project Application
mv Dockerfile Application
```
Öppna Dockerfile i din favoritredigerare och ändra den första raden från FROM node:8 till FROM node:12. Den här ändringen säkerställer att containern använder Node.js version 12.x i stället för version 8.x. GatsbyJS kräver modernare versioner av Node.js.
Öppna sedan filen package.json i programmappen och redigera skriptfältet för att säkerställa att utvecklings- och produktionsservrarna lyssnar på alla tillgängliga nätverksgränssnitt (till exempel 0.0.0.0) och port 80. Utan de här inställningarna kan inte containerapptjänsten dirigera trafik till din Node.js app som körs i containern. Fältet scripts bör likna det som finns nedan. Specifikt vill du ändra målen för develop, serve och start från deras standardvärden.
```
  "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"
  }
```

Redigera DINA CI/CD-pipelines

Innan du skickar in koden i föregående avsnitt, gör några ändringar i dina bygg- och release-pipelines. Redigera din "build pipeline" och uppdatera Node-uppgiften så att den använder Node.js version 12.x. Ange fältet Aktivitetsversion till 1.x och fältet Version till 12.x.
I den här snabbstarten skapar vi inte enhetstester och inaktiverar dessa steg i vår byggpipeline. När du skriver tester kan du återaktivera de här stegen. Högerklicka om du vill välja de uppgifter som är märkta Installera testberoenden och Kör enhetstester och inaktivera dem.
Redigera versionspipeline.
Precis som med bygg-pipelinen ändrar du node-aktiviteten så att den använder 12.x och inaktiverar de två testuppgifterna. Din version bör likna den här skärmbilden.
Till vänster i webbläsaren går du till filen views/index.pug .
Välj Redigeraoch ändra sedan h2-rubriken. Ange till exempel Kom igång direkt med Azure DevOps Starter eller gör någon annan ändring.
Välj Commitoch spara sedan ändringarna.
I webbläsaren går du till DevOps Starter-instrumentpanelen.
Nu bör du se att ett bygg pågår. De ändringar du har gjort skapas och distribueras automatiskt via en CI/CD-pipeline.

Genomför ändringarna och granska Azure CI/CD-pipelinen

I de föregående två stegen lade du till en Gatsby-genererad PWA till din git-lagringsplats och redigerade dina pipelines för att skapa och distribuera koden. Vi kan checka in koden och se hur den utvecklas via bygg- och versionspipelinen.

Från roten för projektets git-lagringsplats i en terminal kör du följande kommandon för att skicka koden till ditt Azure DevOps-projekt:
```
git add .
git commit -m "My first Gatsby PWA"
git push
```
En build startas så snart git push är klar. Du kan följa förloppet från Azure DevOps-instrumentpanelen.
Efter några minuter bör dina bygg- och utgivningspipelines slutföras och din PWA ska distribueras till en container. Klicka på länken Programslutpunkt från instrumentpanelen ovan så bör du se ett Gatsby-startprojekt för bloggar.

Rensa resurser

Du kan ta bort Azure App Service och andra relaterade resurser som du skapade när du inte längre behöver resurserna. Använd funktionen Ta bort på DevOps Starter-instrumentpanelen.

Nästa steg

När du konfigurerar CI/CD-processen skapas automatiskt bygg- och versionspipelines. Du kan ändra dessa bygg- och versionspipelines så att de uppfyller teamets behov. För mer information om CI/CD-pipelinen, se:

Anpassa CD-processen

Last updated on 2020-03-24

Dela via