Erstellen und Bereitstellen einer Node.js-App

In diesem Artikel wird gezeigt, wie Sie Azure-Pipelines verwenden, um eine Pipeline zu erstellen, die eine Node.js Anwendung in Azure App Service mit fortlaufender Integration (CI) und fortlaufender Bereitstellung (CD) erstellt und bereitstellt. CI/CD reduziert Ausfallzeiten und Fehlerrisiken, indem Ihre App automatisch erstellt und bereitgestellt wird, wenn ein Commit für Ihr App-Code-Repository vorliegt.

Voraussetzungen

Forken der Beispielanwendung

1. Wechseln Sie in GitHub zum Node.js Hello World-Repository, und wählen Sie Fork im oberen Menü aus.

   

2. Wählen Sie Ihre GitHub-Organisation als Fork-Eigentümer aus, falls sie noch nicht ausgewählt ist, und wählen Sie dann Fork erstellen aus.

   

Der Browser wechselt zu Ihrem neuen Fork unter URL https://github.com/<owner>/nodejs-docs-hello-world.

Erstellen und Bereitstellen der App Service-Web-App

Erstellen Sie Ihre Azure App Service-Web-App mithilfe von Cloud Shell im Azure-Portal. Um Cloud Shell zu verwenden, melden Sie sich beim Azure-Portal an, und wählen Sie auf der oberen Symbolleiste die Schaltfläche "Cloud Shell" aus.

Die Cloud Shell wird am unteren Rand des Browsers angezeigt. Stellen Sie sicher, dass Bash im Dropdownmenü als Umgebung ausgewählt ist.

Erstellen und Bereitstellen der Web-App

1. Klonen Sie in Cloud Shell Ihr geforktes Repository nach Azure mit dem folgenden Befehl, und ersetzen Sie dabei <your-forked-repository-url> durch die URL Ihres geforkten Repositorys.

   git clone <your-forked-repository-url>
   

2. Wechseln Sie in das Verzeichnis des geklonten Repositories.

   cd nodejs-docs-hello-world
   

3. Führen Sie den Befehl "az webapp up" aus, um eine App Service-Web-App bereitzustellen und das erste Deployment auszuführen. Das --sku F1 Argument erstellt die Web-App auf dem Preisniveau "Kostenlos", was keine Kosten verursacht.

   Wird az webapp up ohne name Parameter ausgeführt, wird automatisch ein zufällig generierter Web-App-Name zugewiesen, der in Azure eindeutig ist. Sie können den Parameter --name <web-app-name> auch verwenden, um einen beliebigen Namen zuzuweisen, der in Azure eindeutig ist, wie z. B. einen persönlichen oder Firmennamen mit einem App-Bezeichner, wie z. B. --name <your-name>-nodeapp.

   az webapp up --sku F1 --name <app-name>
   

Der az webapp up Befehl erkennt die App als Node.js-App und führt die folgenden Aktionen aus:

1. Erstellt eine Standardressourcengruppe.
2. Erstellt einen Standardmäßigen App Service-Plan.
3. Erstellt eine Web-App mit dem zugewiesenen Namen und der URL <your-web-app-name>.azurewebsites.net.
4. ZIP stellt alle Dateien aus dem aktuellen Arbeitsverzeichnis bereit, wobei die Buildautomatisierung aktiviert ist.
5. Speichert die Parameter lokal in der AZURE/Config-Datei zwischen, sodass Sie diese beim Bereitstellen aus dem Projektordner mit az webapp up oder anderen az webapp Befehlen nicht erneut angeben müssen.

Sie können die Standardaktionen mit Ihren eigenen Werten überschreiben, indem Sie die Befehlsparameter verwenden. Weitere Informationen finden Sie unter az webapp up.

Der Befehl erzeugt Statusmeldungen während der Ausführung. Nachdem die Website erfolgreich gestartet wurde, können Sie den Link auswählen You can launch the app at https://<your-web-app-name>.azurewebsites.net , um zur Hello World-Web-App zu wechseln.

Der az webapp up Befehl erzeugt die folgende JSON-Ausgabe für die Beispielweb-App:

{
  "URL": "<your-web-app-url>",
  "appserviceplan": "<your-app-service-plan-name>",
  "location": "<your-azure-region>",
  "name": "<your-web-app-name>",
  "os": "Linux",
  "resourcegroup": "<your-resource-group-name>",
  "runtime_version": "node|20-LTS",
  "runtime_version_detected": "10.0",
  "sku": "FREE",
  "src_path": "<repository-source-path>"
}

Erstellen der Pipeline mithilfe einer Vorlage

1. Wählen Sie in Ihrem Azure DevOps-Projekt "Pipelines" im linken Navigationsmenü aus, und wählen Sie dann "Neue Pipeline " oder " Pipeline erstellen" aus, wenn diese Pipeline der erste im Projekt ist.

2. Wählen Sie auf dem Codebildschirm "Wo befindet sich Ihr Code " auf GitHub aus.

3. Wählen Sie auf dem Bildschirm „Repository auswählen“ Ihr verzweigtes nodejs-docs-hello-world-Repository aus.

4. Azure Pipelines erkennt den Code als Node.js-App und schlägt mehrere Pipelinevorlagen auf der Seite "Pipeline konfigurieren" vor. Wählen Sie Node.js Express Web App auf Linux in Azure aus.

5. Wählen Sie auf dem nächsten Bildschirm Ihr Azure-Abonnement und dann "Weiter" aus. Diese Aktion erstellt eine Dienstverbindung mit Ihren Azure-Ressourcen.

6. Wählen Sie auf dem nächsten Bildschirm Ihre Azure Web App aus, und wählen Sie "Überprüfen und Konfigurieren" aus. Azure Pipelines erstellt eine azure-pipelines.yml Datei und zeigt sie im YAML-Pipeline-Editor an.

7. Überprüfen Sie auf dem Bildschirm "YAML-Pipeline überprüfen" den Code für Ihre Pipeline.

   Die Pipeline führt die folgenden Aktionen aus:

   • Legt einen Trigger fest, der für jeden Commit auf die Hauptcode-Verzweigung ausgeführt werden soll.
   • Richtet Variablen für die Dienstverbindung, Web-App, Computerimage und Umgebung ein und verwendet sie.
   • Installiert Node.js auf dem Build-Agent und verwendet npm zum Ausführen und Testen des App-Builds.
   • Verpackt die erstellte App in ein ZIP-Archiv und lädt das ZIP an einen Speicherort hoch.
   • Stellt das ZIP-Paket in der App Service-App bereit und startet die App.

Speichern und Ausführen der Pipeline

1. Nachdem Sie den Code überprüft haben, wählen Sie Speichern und ausführen und Speichern und ausführen erneut, um die Pipeline zu speichern und auszuführen. Die Datei azure-pipelines.yml wird in Ihrem geforkten Repository gespeichert, und der Code wird auf Azure App Service bereitgestellt.

   Hinweis

   Wenn die Pipeline zum ersten Mal ausgeführt wird, fordert sie die Berechtigung für den Zugriff auf die von ihr erstellte Umgebung an. Wählen Sie "Erlauben" aus, um der Pipeline Zugriff auf die Umgebung zu gewähren.

2. Wählen Sie auf der Seite "Zusammenfassung der Ausführung" den Auftrag aus, um die Ausführung der Pipeline zu überwachen und den Build nachzuverfolgen.

3. Wenn die Ausführung erfolgreich ist, wählen Sie die Azure Web App Deploy-Aufgabe aus, und wählen Sie die App-Dienstanwendungs-URL aus, um die bereitgestellte Website anzuzeigen.

   

4. Stellen Sie sicher, dass Sie die Website, die auf dem App-Dienst läuft, unter der URL der bereitgestellten Website sehen.

   

Ausführung eines CI-Builds und einer Bereitstellung

Das trigger: main-Schlüsselwort konfiguriert Ihre Pipeline so, dass sie ausgeführt wird, wenn eine Änderung an dem main-Branch Ihres geforkten Code-Repositories übernommen wird. So führen Sie einen CI-Build aus:

1. Wechseln Sie zu Ihrem geforkten GitHub-Repository und machen Sie eine kleine Änderung in der README.md-Datei.
2. Wählen Sie Änderungen übernehmen aus, und Änderungen übernehmen erneut.
3. Vergewissern Sie sich in den Azure Pipelines, dass Ihre nodejs-docs-hello-world-Pipeline erneut mit der Beschreibung Individual CI ausgeführt wird.

Bereinigen von Ressourcen

Sie können die ressourcen, die Sie für diesen Artikel erstellt haben, löschen, wenn Sie sie nicht mehr benötigen.

• Um die Azure App Service-Ressourcen zu entfernen, führen Sie die folgenden Befehle in der Reihenfolge in Cloud Shell aus. Sie müssen die Web-App löschen, bevor Sie den App-Serviceplan löschen können, und Sie müssen den App-Serviceplan löschen, bevor Sie die Ressourcengruppe löschen können.

  az webapp delete --name <web-app-name> --resource-group <resource-group-name>
  az appservice plan delete --name <app-service-plan-name> --resource-group <resource-group-name>
  az group delete --name <resource-group-name>
  

• Um Ihre Pipeline in Azure Pipelines zu entfernen, wählen Sie die Pipeline aus, wählen Sie oben rechts auf der Pipelineseite das Symbol "Weitere Aktionen " und dann "Löschen" aus. Informationen zum Entfernen Ihres Azure DevOps-Projekts finden Sie unter "Löschen eines Projekts".

• Wenn Sie Ihr GitHub-Repository "forked nodejs-docs-hello-world " löschen möchten, wechseln Sie zum Repository, und wählen Sie " Einstellungen " in der oberen Menüleiste aus. Scrollen Sie zum Ende der Seite, und wählen Sie "Dieses Repository löschen" aus.

Zugehöriger Inhalt

• JavaScript anpassen
• Bereitstellen für den App Service mithilfe von Azure Pipelines