Erstellen einer CI/CD-Pipeline in Azure Pipelines für Node.js mit Azure DevOps Starter

In dieser Schnellstartanleitung erstellen Sie eine progressive NodeJS-Web-App (PWA) mit GatsbyJS und der vereinfachten Azure DevOps Starter-Erstellung. Wenn Sie fertig sind, verfügen Sie über eine Pipeline für kontinuierliche Integration (CI) und kontinuierliche Lieferung (CD) für Ihre PWA in Azure Pipelines. Azure DevOps Starter richtet ein, was Sie für die Entwicklung, Bereitstellung und Überwachung benötigen.

Voraussetzungen

Ein Azure-Konto mit einem aktiven Abonnement. Sie können kostenlos ein Konto erstellen.
Eine Azure DevOps-Organisation .

DevOps Starter erstellt eine CI/CD-Pipeline in Azure Pipelines. Sie können eine neue Azure DevOps-Organisation erstellen oder eine vorhandene Organisation verwenden. DevOps Starter erstellt auch Azure-Ressourcen im Azure-Abonnement Ihrer Wahl.

Melden Sie sich beim Azure-Portal an, und wählen Sie im linken Bereich die Option "Ressource erstellen" aus.
Geben Sie im Suchfeld DevOps Starterein, und wählen Sie dann aus. Klicken Sie auf Hinzufügen von, um eine neue zu erstellen.

Auswählen einer Beispielanwendung und eines Azure-Diensts

Wählen Sie die Node.js Beispielanwendung aus.
Das Standardbeispielframework ist Express.js. Ändern Sie die Auswahl in "Einfache Node.js App ", und wählen Sie dann "Weiter" aus.
Die in diesem Schritt verfügbaren Bereitstellungsziele werden vom in Schritt 2 ausgewählten Anwendungsframework bestimmt. In diesem Beispiel ist Windows Web App das Standardbereitstellungsziel. Lassen Sie Web App für Container unverändert und klicken Sie auf Weiter.

Konfigurieren eines Projektnamens und eines Azure-Abonnements

Im letzten Schritt des DevOps Starter Creation-Workflows weisen Sie einen Projektnamen zu, wählen ein Azure-Abonnement und dann "Fertig" aus.
Auf einer Zusammenfassungsseite wird angezeigt, während Ihr Projekt erstellt und Ihre Anwendung in Azure bereitgestellt wird. Nach einem kurzen Zeitraum wird ein Projekt in Ihrer Azure DevOps-Organisation erstellt, das ein Git-Repo, ein Kanban-Board, eine Bereitstellungspipeline, Testpläne und die artefakte umfasst, die von Ihrer App benötigt werden.

Verwalten Ihres Projekts

Navigieren Sie zu "Alle Ressourcen" , und suchen Sie Ihren DevOps Starter. Wählen Sie Ihren DevOps Starter aus.
Sie werden zu einem Dashboard geleitet, das Einblicke in Ihre Projekthomepage, das Code-Repository, die CI/CD-Pipeline und einen Link zu Ihrer ausgeführten App bietet. Wählen Sie die Project-Homepage aus, um Ihre Anwendung in Azure DevOps anzuzeigen, und wählen Sie auf einer anderen Browserregisterkarte den Anwendungsendpunkt aus, um die Livebeispiel-App anzuzeigen. Wir ändern dieses Beispiel später so, dass GatsbyJS-generierte PWA verwendet wird.
Aus Ihrem Azure DevOps-Projekt können Sie Teammitglieder einladen, zusammenzuarbeiten und ein Kanban-Board einzurichten, um ihre Arbeit nachzuverfolgen. Weitere Informationen finden Sie hier.

Übersicht über Azure DevOps

Klonen Sie das Repository und installieren Sie Ihre PWA von Gatsby.

DevOps Starter erstellt ein Git-Repository in Azure Repos oder GitHub. In diesem Beispiel wurde ein Azure Repo erstellt. Der nächste Schritt besteht darin, das Repository zu klonen und Änderungen vorzunehmen.

Wählen Sie Repos aus Ihrem DevOps-Projekt aus, und klicken Sie dann auf Klonen. Es gibt verschiedene Mechanismen zum Klonen des Git-Repositorys auf Ihrem Desktop. Wählen Sie das, das Ihrer Entwicklungserfahrung entspricht.
Nachdem das Repository auf Ihrem Desktop geklont wurde, nehmen Sie einige Änderungen an der Startvorlage vor. Installieren Sie zunächst die GatsbyJS CLI von Ihrem Terminal aus.
```
 npm install -g gatsby
```

Navigieren Sie vom Terminal zum Stammverzeichnis Ihres Repositorys. Er sollte drei Ordner enthalten, die wie folgt aussehen:

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

Wir möchten nicht alle Dateien im Anwendungsordner, da wir sie durch einen Gatsby-Starter ersetzen werden. Führen Sie die folgenden Befehle in Sequenz aus, um sie zu kürzen.
```
cp .\Application\Dockerfile .
rmdir Application
```

Verwenden Sie die Gatsby CLI, um eine Beispiel-PWA zu generieren. Führen Sie gatsby new vom Terminal aus, um den PWA-Assistenten zu starten, und wählen Sie gatsby-starter-blog als Startvorlage aus. Es sollte diesem Beispiel ähneln:

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)

Sie haben jetzt einen Ordner mit dem Namen my-gatsby-project. Benennen Sie es in Application um, und kopieren Sie Dockerfile hinein.
```
mv my-gatsby-project Application
mv Dockerfile Application
```
Öffnen Sie in Ihrem bevorzugten Editor die Dockerfile-Datei, und ändern Sie die erste Zeile von FROM node:8 zu FROM node:12. Diese Änderung stellt sicher, dass Ihr Container Node.js Version 12.x anstelle von Version 8.x verwendet. GatsbyJS erfordert modernere Versionen von Node.js.
Öffnen Sie als Nächstes die datei package.json im Anwendungsordner, und bearbeiten Sie das Skriptfeld , um sicherzustellen, dass Ihre Entwicklungs- und Produktionsserver auf alle verfügbaren Netzwerkschnittstellen (z. B. 0.0.0.0) und Port 80 lauschen. Ohne diese Einstellungen kann der Container-App-Dienst den Datenverkehr nicht an Ihre Node.js App weiterleiten, die in Ihrem Container ausgeführt wird. Das scripts Feld sollte dem ähnlich sein, was unten ist. Insbesondere möchten Sie die Ziele develop, serve und start von ihren Standardwerten ändern.
```
  "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"
  }
```

Bearbeiten von CI/CD-Pipelines

Bevor Sie den Code im vorherigen Abschnitt übernehmen, nehmen Sie einige Änderungen an Ihren Build- und Releasepipelinen vor. Bearbeiten Sie Ihre "Build-Pipeline" und aktualisieren Sie die "Node-Aufgabe", um die Version Node.js 12.x zu verwenden. Legen Sie das Feld "Vorgangsversion " auf 1.x und das Feld "Version " auf 12.x fest.
In dieser Schnellstartanleitung erstellen wir keine Komponententests, und wir deaktivieren diese Schritte in unserer Buildpipeline. Wenn Sie Tests schreiben, können Sie diese Schritte erneut aktivieren. Klicken Sie mit der rechten Maustaste, um die Aufgaben mit der Bezeichnung "Testabhängigkeiten installieren" und "Komponententests ausführen " auszuwählen und sie zu deaktivieren.
Bearbeiten Sie Ihre Releasepipeline.
Ändern Sie wie bei der Buildpipeline die Knotenaufgabe so, dass sie 12.x verwendet, und deaktivieren Sie die beiden Testaufgaben. Ihre Version sollte diesem Screenshot ähneln.
Wechseln Sie auf der linken Seite des Browsers zur Datei "views/index.pug ".
Wählen Sie Bearbeitenaus, und ändern Sie dann die h2-Überschrift. Geben Sie beispielsweise "Erste Schritte" sofort mit Azure DevOps Starter ein, oder nehmen Sie eine andere Änderung vor.
Wählen Sie Commit und speichern Sie dann Ihre Änderungen.
Wechseln Sie in Ihrem Browser zum DevOps Starter-Dashboard.
Nun sollten Sie einen laufenden Build sehen. Die von Ihnen vorgenommenen Änderungen werden automatisch über eine CI/CD-Pipeline erstellt und bereitgestellt.

Übertragen Sie Ihre Änderungen und überprüfen Sie die Azure CI/CD-Pipeline.

In den vorherigen beiden Schritten haben Sie ihrem Git-Repository einen von Gatsby generierten PWA hinzugefügt und Ihre Pipelines bearbeitet, um den Code zu erstellen und bereitzustellen. Wir können den Code übernehmen und den Fortschritt durch die Build- und Releasepipeline beobachten.

Führen Sie im Stammverzeichnis des Git-Repositorys Ihres Projekts in einem Terminal die folgenden Befehle aus, um Ihren Code an Ihr Azure DevOps-Projekt zu übertragen:
```
git add .
git commit -m "My first Gatsby PWA"
git push
```
Sobald git push abgeschlossen ist, wird ein Build gestartet. Sie können den Fortschritt aus dem Azure DevOps-Dashboard verfolgen.
Nach ein paar Minuten sollten Die Build- und Releasepipelines abgeschlossen sein, und Ihre PWA sollte in einem Container bereitgestellt werden. Klicken Sie im obigen Dashboard auf den Link "Anwendungsendpunkt ", und es sollte ein Gatsby-Startprojekt für Blogs angezeigt werden.

Bereinigen von Ressourcen

Sie können Azure App Service und andere verwandte Ressourcen löschen, die Sie erstellt haben, wenn Sie die Ressourcen nicht mehr benötigen. Verwenden Sie die Funktionen Löschen im DevOps Starter-Dashboard.

Nächste Schritte

Wenn Sie Ihren CI/CD-Prozess konfigurieren, werden Build- und Release-Pipelines automatisch erstellt. Sie können diese Build- und Releasepipelines ändern, um die Anforderungen Ihres Teams zu erfüllen. Weitere Informationen zur CI/CD-Pipeline finden Sie unter:

CD-Prozess anpassen

Last updated on 2020-03-24

Freigeben über