Een CI/CD-pijplijn maken in Azure Pipelines voor Node.js met Azure DevOps Starter

In deze quickstart maakt u een PWA (NodeJS Progressive Web App) met behulp van GatsbyJS en de vereenvoudigde azure DevOps Starter-aanmaakervaring. Wanneer u klaar bent, hebt u een pijplijn voor continue integratie (CI) en continue levering (CD) voor uw PWA in Azure Pipelines. Azure DevOps Starter stelt in wat u nodig hebt voor het ontwikkelen, implementeren en bewaken.

Vereiste voorwaarden

Een Azure-account met een actief abonnement. Gratis een account maken
Een Azure DevOps-organisatie .

DevOps Starter maakt een CI/CD-pijplijn in Azure Pipelines. U kunt een nieuwe Azure DevOps-organisatie maken of een bestaande organisatie gebruiken. DevOps Starter maakt ook Azure-resources in het Azure-abonnement van uw keuze.

Meld u aan bij Azure Portal en selecteer een resource maken in het linkerdeelvenster.
Typ in het zoekvak DevOps Starteren selecteer vervolgens. Klik op toevoegen om een nieuwe te maken.

Een voorbeeldtoepassing en Azure-service selecteren

Selecteer de Node.js voorbeeldtoepassing.
Het standaardvoorbeeldframework is Express.js. Wijzig de selectie in Simple Node.js App en selecteer Vervolgens.
De implementatiedoelen die beschikbaar zijn in deze stap, worden bepaald door het toepassingsframework dat in stap 2 is geselecteerd. In dit voorbeeld is Windows Web App het standaardimplementatiedoel. Laat Web App for Containers ingesteld en selecteer Volgende.

Een projectnaam en een Azure-abonnement configureren

In de laatste stap van de werkstroom voor het maken van DevOps Starter wijst u een projectnaam toe, selecteert u een Azure-abonnement en selecteert u Gereed.
Er wordt een overzichtspagina weergegeven terwijl uw project is gebouwd en uw toepassing wordt geïmplementeerd in Azure. Na een korte periode wordt een project gemaakt in uw Azure DevOps-organisatie met een Git-opslagplaats, een Kanban-bord, een implementatiepijplijn, testplannen en de artefacten die voor uw app zijn vereist.

Uw project beheren

Navigeer naar Alle resources en zoek uw DevOps Starter. Selecteer uw DevOps Starter.
U wordt omgeleid naar een dashboard dat inzicht biedt in de startpagina van uw project, de codeopslagplaats, de CI/CD-pijplijn en een koppeling naar uw actieve app. Selecteer de startpagina van Project om uw toepassing weer te geven in Azure DevOps en selecteer in een ander browsertabblad het toepassingseindpunt om de live-voorbeeld-app weer te geven. We wijzigen dit voorbeeld later om gatsbyJS gegenereerde PWA te gebruiken.
Vanuit uw Azure DevOps-project kunt u teamleden uitnodigen om samen te werken en een Kanban-bord tot stand te brengen om uw werk bij te houden. Zie voor meer informatie hier.

Overzicht van Azure DevOps

Kloon de opslagplaats en installeer uw Gatsby PWA

DevOps Starter maakt een Git-opslagplaats in Azure-opslagplaatsen of GitHub. In dit voorbeeld is een Azure-repository gemaakt. De volgende stap is het klonen van de opslagplaats en het aanbrengen van wijzigingen.

Selecteer Repositories in uw DevOps Project en klik vervolgens op Klonen. Er zijn verschillende mechanismen voor het klonen van de Git-opslagplaats naar uw bureaublad. Kies de oplossing die past bij uw ontwikkelervaring.
Nadat de repo naar uw bureaublad is gekloond, breng wat wijzigingen aan in de startersjabloon. Begin met het installeren van de GatsbyJS CLI vanuit uw terminal.
```
 npm install -g gatsby
```

Navigeer vanuit de terminal naar de hoofdmap van uw opslagplaats. De map moet drie mappen bevatten die er als volgt uitzien:

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

We willen niet alle bestanden in de toepassingsmap omdat we deze vervangen door een Gatsby-starter. Voer de volgende opdrachten op volgorde uit om het te verkleinen.
```
cp .\Application\Dockerfile .
rmdir Application
```

Gebruik de Gatsby CLI om een PWA-voorbeeld te genereren. Voer gatsby new vanuit de terminal uit om de PWA-wizard te starten en selecteer gatsby-starter-blog deze voor uw starterssjabloon. Deze moet er ongeveer uitzien als in dit voorbeeld:

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)

U hebt nu een map met de naam my-gatsby-project. Wijzig de naam in Application en kopieer de naam Dockerfile erin.
```
mv my-gatsby-project Application
mv Dockerfile Application
```
Open in uw favoriete editor het Dockerfile en wijzig de eerste regel van FROM node:8 in FROM node:12. Deze wijziging zorgt ervoor dat uw container gebruikmaakt van Node.js versie 12.x in plaats van versie 8.x. GatsbyJS vereist modernere versies van Node.js.
Open vervolgens het package.json-bestand in de toepassingsmap en bewerk het scriptveld om ervoor te zorgen dat uw ontwikkelings- en productieservers luisteren op alle beschikbare netwerkinterfaces (bijvoorbeeld 0.0.0.0) en poort 80. Zonder deze instellingen kan de container-app-service geen verkeer routeren naar uw Node.js-app die in uw container wordt uitgevoerd. Het scripts veld moet er ongeveer als volgt uitzien. U wilt met name de doelen develop, serve en start wijzigen van hun standaardinstellingen.
```
  "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"
  }
```

Uw CI/CD-pijplijnen bewerken

Voordat u de code in de vorige sectie doorvoert, moet u enkele wijzigingen aanbrengen in uw build- en release-pijplijnen. Bewerk uw build-pijplijn en werk de knooppunttaak bij om Node.js versie 12.x te gebruiken. Stel het veld Taakversie in op 1.x en het veld Versie op 12.x.
In deze quickstart maken we geen unittests en schakelen we die stappen uit in onze build-pijplijn. Wanneer u tests schrijft, kunt u deze stappen opnieuw inschakelen. Klik met de rechtermuisknop om de taken met het label Testafhankelijkheden installeren en Eenheidstests uitvoeren te selecteren en uit te schakelen.
Bewerk uw release-pijplijn.
Net als bij de build-pijplijn wijzigt u de Nodetaak naar 12.x en schakelt u de twee testtaken uit. Uw release moet er ongeveer uitzien als in deze schermopname.
Ga aan de linkerkant van de browser naar het bestand views/index.pug .
Selecteer Bewerken en breng een wijziging aan in de h2-kop. Voer bijvoorbeeld Meteen aan de slag met Azure DevOps Starter in of breng een andere wijziging aan.
Selecteer Doorvoerenen sla de wijzigingen op.
Ga in uw browser naar het DevOps Starter-dashboard.
U zou nu een build in uitvoering moeten zien. De wijzigingen die u hebt aangebracht, worden automatisch gebouwd en geïmplementeerd via een CI/CD-pijplijn.

Uw wijzigingen doorvoeren en de Azure CI/CD-pijplijn onderzoeken

In de vorige twee stappen hebt u een door Gatsby gegenereerde PWA toegevoegd aan uw Git-opslagplaats en uw pijplijnen bewerkt om de code te bouwen en te implementeren. We kunnen de code doorvoeren en de voortgang bekijken via de build- en release-pijplijn.

Voer vanuit de hoofdmap van de Git-opslagplaats van uw project in een terminal de volgende opdrachten uit om uw code naar uw Azure DevOps-project te pushen:
```
git add .
git commit -m "My first Gatsby PWA"
git push
```
Er wordt een build gestart zodra git push deze is voltooid. U kunt de voortgang volgen vanuit het Azure DevOps-dashboard.
Na enkele minuten moeten uw build- en release-pijplijnen zijn voltooid en moet uw PWA worden geïmplementeerd in een container. Klik op de Applicatie-eindpunt link in het dashboard hierboven en u zou een Gatsby-startersproject voor blogs moeten zien.

De hulpbronnen opschonen

U kunt Azure App Service en andere gerelateerde resources verwijderen die u hebt gemaakt wanneer u de resources niet meer nodig hebt. Gebruik de functionaliteit Verwijderen op het DevOps Starter-dashboard.

Volgende stappen

Wanneer u uw CI/CD-proces configureert, worden build- en release-pijplijnen automatisch gemaakt. U kunt deze build- en release-pijplijnen wijzigen om te voldoen aan de behoeften van uw team. Zie voor meer informatie over de CI/CD-pijplijn:

CD-proces aanpassen

Last updated on 2020-03-24