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

I den här snabbstarten skapar du en nodeJS-progressiv webbapp (PWA) 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 vad 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 .

Logga in på Azure Portal

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.

1. Logga in på Azure Portal och välj Skapa en resurs i den vänstra rutan.

   

2. I sökrutan skriver du DevOps Starter och väljer sedan. Klicka på Lägg till för att skapa en ny.

   

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

1. Välj Node.js-exempelprogrammet.

   

2. Exempelramverket som är standard är Express.js. Ändra markeringen till Enkel Node.js app och välj sedan Nästa.

   

3. 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ålet. Låt Web App for Containers vara inställt och välj Nästa.

   

Konfigurera ett projektnamn och en Azure-prenumeration

1. 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.

   

2. 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-tavla, en distributionspipeline, testplaner och de artefakter som krävs av din app.

Hantera ditt projekt

1. Gå till Alla resurser och leta reda på din DevOps Starter. Välj devops-startprogrammet.

   

2. 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 projektet 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.

   

3. Från ditt Azure DevOps-projekt kan du bjuda in gruppmedlemmar att samarbeta och upprätta en Kanban-tavla för att börja spåra ditt arbete. Mer information finns här.

Klona lagringsplatsen och installera 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.

1. Välj Lagringsplatser från DevOps-projektet och klicka sedan på Klona. Det finns olika mekanismer för att klona git-lagringsplatsen till skrivbordet. Välj den som passar din utvecklingsupplevelse.

   

2. 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
   

3. Från terminalen navigerar du till lagringsplatsens rot. 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
   

4. Vi vill inte ha alla filer i programmappen eftersom vi ska ersätta den med en Gatsby-start. Kör följande kommandon i följd för att trimma ned det.

   cp .\Application\Dockerfile .
   rmdir Application
   

5. Använd Gatsby CLI för att generera ett pwa-exempel. 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)
   

6. Nu har du en mapp med namnet my-gatsby-project. Byt namn på den till Application och kopiera till den Dockerfile .

   mv my-gatsby-project Application
   mv Dockerfile Application
   

7. Ö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.

8. Öppna sedan filen package.json i mappen Program 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 dessa inställningar kan containerapptjänsten inte dirigera trafik till din Node.js app som körs i containern. Fältet scripts bör likna det som finns nedan. Mer specifikt vill du ändra developmålen , serveoch 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

1. Innan du checkar in koden i föregående avsnitt gör du några ändringar i dina bygg- och versionspipelines. Redigera din "Bygg-pipeline" och uppdatera node-aktiviteten så att den använder Node.js version 12.x. Ange fältet Aktivitetsversion till 1.x och fältet Version till 12.x.

   

2. I den här snabbstarten skapar vi inte enhetstester och vi inaktiverar dessa steg i vår bygg-pipeline. När du skriver tester kan du återaktivera de här stegen. Högerklicka för att välja de uppgifter som är märkta Installera testberoenden och Kör enhetstester och inaktivera dem.

   

3. Redigera versionspipelinen.

   

4. 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.

   

5. På vänster sida i webbläsaren går du till filen views/index.pug.

6. Välj Redigera och gör en ändring i h2-rubriken. Ange till exempel Kom igång direkt med Azure DevOps Starter eller gör någon annan ändring.

7. Välj Incheckning och spara sedan ändringarna.

8. Gå till DevOps Starter-instrumentpanelen i webbläsaren.
   Du bör nu se att en version håller på att skapas. De ändringar du har gjort skapas och distribueras automatiskt via en CI/CD-pipeline.

Checka in ändringarna och granska Azure CI/CD-pipelinen

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

1. Från roten för projektets git-lagringsplats i en terminal kör du följande kommandon för att push-överföra koden till ditt Azure DevOps-projekt:

   git add .
   git commit -m "My first Gatsby PWA"
   git push
   

2. En version startas så snart den git push är klar. Du kan följa förloppet från Azure DevOps-instrumentpanelen.

3. Efter några minuter bör dina bygg- och versionspipelines slutföras och 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 behöver resurserna längre. Använd funktionen Ta bort på DevOps Starter-instrumentpanelen.

Nästa steg

När du konfigurerar DIN CI/CD-process skapas bygg- och versionspipelines automatiskt. Du kan ändra dessa bygg- och versionspipelines så att de uppfyller behoven i ditt team. Mer information om CI/CD-pipelinen finns i:

Anpassa CD-process