Übersicht zur Bereitstellung von JavaScript-Anwendungen in Azure

Um Ihre JavaScript-basierte App in Azure bereitzustellen, verschieben Sie eine Datei oder einen Satz von Dateien in Azure, die über einen HTTP-Endpunkt bereitgestellt werden sollen. Der Vorgang zum Verschieben der Dateien wird als Bereitstellung bezeichnet.

Voraussetzungen

• Azure-Abonnement – Erstellen eines kostenlosen Kontos
• Node.js LTS.
• Ein GitHub-Konto, wenn Sie beabsichtigen, aus einem GitHub-Repository zu deployen.

Bereitstellungstools

Azure bietet verschiedene Bereitstellungstools an, die unterschiedlichen Anforderungen entsprechen. Im Folgenden finden Sie einige gängige Methoden:

Andere Bereitstellungstools sind basierend auf dem jeweiligen Dienst vorhanden. Beispielsweise unterstützt Azure App-Dienst eine Vielzahl von Bereitstellungstools:

• Aus ZIP-Datei
• Mit FTP
• Dropbox oder OneDrive
• Lokales Git
• cURL
• SSH

Sie können den App-Service mit einer der bereitgestellten Methoden neu bereitstellen, auch wenn Sie diese Methode nicht für die ursprüngliche Bereitstellung verwendet haben. Möglicherweise verfügen Sie vor der erneuten Bereitstellung über eine Konfiguration, wenn Sie Methoden wechseln.

Azure-Hostingdienste für JavaScript-Apps

Wählen Sie zunächst den Hostingdienst aus, der Ihrer App am besten entspricht. Nachdem Sie einen Dienst ausgewählt haben, verwenden Sie den empfohlenen Bereitstellungspfad, um schneller zum richtigen Lernprogramm zu gelangen.

Weitere Informationen zum Auswählen des richtigen Hostingdiensts finden Sie unter Hostinganwendungen in Azure.

Bereitstellungsmethoden mit Werkzeugen

Nachdem Sie einen Hostingdienst ausgewählt haben, wählen Sie die Bereitstellungsmethode aus, die ihrer Funktionsweise entspricht.

• Erstellen vor der Bereitstellung: Für komplexe oder langwierige Builds packen Sie Ihre Anwendung in eine ZIP-Datei und stellen Sie sie bereit. Mit einem Bereitstellungspaket können Sie den Build vor der Bereitstellung steuern und testen.
• Während der Bereitstellung erstellen: Verwenden Sie für einfachere Builds die von Azure bereitgestellte Umgebungsvariable SCM_DO_BUILD_DURING_DEPLOYMENT=true, um Ihre App während der Bereitstellung zu erstellen.

Wenn Sie für App Service bereitstellen, stehen auch andere Bereitstellungsmethoden zur Verfügung:

Bereitstellungs-Slots in Azure App Service ermöglichen es Ihnen, separate Umgebungen für Staging und Produktion zu erstellen. Mithilfe von Slots können Sie Ihre App in einer Stagingumgebung testen, bevor Sie sie App in den Produktionsslot überführen. Dadurch wird eine reibungslose und fehlerfreie Bereitstellung sichergestellt. Erfahren Sie mehr über Bereitstellungsslots.

Verwenden Sie keine Bereitstellungsslots, um Bereitstellungszwecke zu kombinieren. Alle Bereitstellungsslots nutzen den App-Dienst gemeinsam, sodass Sie sicherstellen müssen, dass die Datenverkehrsmuster und die beabsichtigte Verwendung aller Slots identisch sind. Wenn Sie eine gehostete Test- oder Staging-Umgebung benötigen, sollte dies ein separater App-Service sein.

Bereitstellen mit der Azure Developer CLI

Für den schnellsten End-to-End-Pfad zur Bereitstellung Azure Ressourcen und bereitstellen Ihrer App beginnen Sie mit der Azure Developer CLI (azd).

Die Azure Developer CLI vereinfacht den Prozess der Bereitstellung Ihrer App für Azure. Führen Sie die folgenden Schritte aus:

1. Installieren Sie die Azure Developer CLI.

2. Suchen Sie ein vorhandenes Projekt , das viele der gleichen Ressourcen verwendet, die Ihr Projekt verwendet.

3. Initialisieren Sie eine lokale Version des Projekts für die Verwendung als Infrastrukturvorlage für Ihr eigenes Projekt.

4. Erstellen Sie die Ressourcen, und stellen Sie den Code in Azure bereit.

   azd auth login
   azd init --template <template-name>
   azd up
   

Verwenden Sie diesen Pfad, wenn Sie einen Workflow für Infrastruktur, Bereitstellung und wiederholbare Umgebungen benötigen.

Bereitstellen mit Visual Studio Code

Wenn Sie einen geführten Bereitstellungsfluss in Ihrem Editor wünschen, verwenden Sie die Azure Erweiterungen für Visual Studio Code.

Führen Sie die folgenden Schritte aus, um Ihre App Service-App mithilfe von Visual Studio Code bereitzustellen oder erneut bereitzustellen:

1. Installieren Sie die zugehörigen Azure Erweiterungen, z. B. Azure App Service oder Azure Functions.

2. Öffnen Sie den Azure-Explorer. Wählen Sie das Azure-Symbol auf der Hauptseitenleiste aus, oder verwenden Sie die Tastenkombination (UMSCHALT + ALT + A).

3. Wählen Sie in der Gruppe "Ressource" Ihr Abonnement und Ihren Dienst aus.

4. Klicken Sie mit der rechten Maustaste auf Ihren Dienst, und wählen Sie anschließend In Web-App bereitstellen ... aus.

   

Dienstspezifische nächste Schritte

Nachdem Sie einen Hostingdienst und eine Bereitstellungsmethode ausgewählt haben, fahren Sie mit dem dienstspezifischen Pfad fort, der Ihrer App entspricht.

In Azure Static Web Apps bereitstellen

Azure Static Web Apps ist ideal für moderne Webanwendungen, die mit JavaScript-Frameworks erstellt wurden. Bereitstellung:

1. Installieren Sie die Azure Static Web Apps-Erweiterung für Visual Studio Code.
2. Erstellen Sie Ihre Anwendung lokal, um sicherzustellen, dass sie wie erwartet funktioniert.
3. Öffnen Sie in Visual Studio Code den Azure-Explorer, und suchen Sie Azure Static Web Apps.
4. Klicken Sie mit der rechten Maustaste auf Ihr Abonnement, und wählen Sie dann "Statische Web App erstellen" aus.
5. Folgen Sie den Anweisungen, um Ihr GitHub-Repository zu verbinden. Azure erstellt automatisch einen GitHub Actions-Workflow.
6. Führen Sie Push-Änderungen an Ihrem Repository aus, um automatische Bereitstellungen auszulösen.

Weitere Informationen finden Sie unter Bereitstellen Ihrer Web-App in Azure Static Web Apps.

Bereitstellung in Azure App Service

Azure App Service eignet sich gut, wenn Sie verwaltetes Hosting für eine Web-App oder API benötigen. Sie können mithilfe von azd, Visual Studio Code, Azure CLI oder GitHub Actions bereitstellen.

Sie können ihren App-Dienst erneut bereitstellen, indem Sie eine der verfügbaren Methoden verwenden, auch wenn Sie diese Methode nicht zum ursprünglichen Bereitstellen verwendet haben. Möglicherweise benötigen Sie eine Konfiguration, bevor Sie sie erneut bereitstellen, wenn Sie Methoden wechseln.

Beginnen Sie für einen dienstspezifischen Bereitstellungspfad mit einem der folgenden Lernprogramme:

• Bereitstellen einer Node.js- und MongoDB-Web-App für Azure App Service
• Bereitstellen in App Service mithilfe von GitHub Actions
• Bereitstellung für App Service aus ZIP-Paketen

Bereitstellen mit Azure CLI

Führen Sie die folgenden Schritte aus, um Ihre JavaScript-App mithilfe des Azure CLI bereitzustellen:

1. Installieren Sie die Azure CLI, wenn Sie dies noch nicht haben.

2. Melden Sie sich bei Ihrem Azure-Konto an.

   az login
   

3. Erstellen oder verwenden Sie einen vorhandenen App Service-Plan und App-Dienst.

   az appservice plan create --name <plan-name> --resource-group <resource-group> --sku B1 --is-linux
   az webapp create --resource-group <resource-group> --plan <plan-name> --name <app-name> --runtime "NODE|20-lts"
   

4. Stellen Sie Ihren Anwendungscode als ZIP-Datei oder aus einem lokalen Git-Repository bereit.

   Für die ZIP-Bereitstellung:

   az webapp deployment source config-zip --resource-group <resource-group> --name <app-name> --src <path-to-zip>
   

   Für die lokale Git-Bereitstellung:

   az webapp deployment source config-local-git --resource-group <resource-group> --name <app-name>
   az webapp config appsettings set --resource-group <resource-group> --name <app-name> --settings DEPLOYMENT_BRANCH='main'
   git remote add azure <git-url>
   git push azure main
   

Bereitstellen mit GitHub Actions

GitHub Actions automatisiert Ihren Bereitstellungsprozess, wenn Sie Änderungen an Ihr GitHub Repository übertragen. So richten Sie GitHub Actions für Azure Bereitstellung ein:

1. Erstellen Sie in Ihrem GitHub-Repository ein .github/workflows/ Verzeichnis, falls es nicht vorhanden ist.

2. Erstellen Sie eine Workflowdatei (z. B azure-deploy.yml. ), die Ihre Bereitstellungsschritte definiert.

3. Verwenden Sie eine Azure Anmeldeaktion, um sich bei Azure zu authentifizieren. Empfohlen: Verwenden Sie OpenID Connect (OIDC) für erhöhte Sicherheit, anstatt Anmeldeinformationen als geheime Schlüssel zu speichern.

   Option A: OpenID Connect (empfohlen)

   permissions:
     id-token: write
     contents: read
   
   - name: Azure Login
     uses: azure/login@v2
     with:
       client-id: ${{ secrets.AZURE_CLIENT_ID }}
       tenant-id: ${{ secrets.AZURE_TENANT_ID }}
       subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
   
   - name: Deploy to Azure Web App
     uses: azure/webapps-deploy@v3
     with:
       app-name: <app-name>
       package: '.'
   

   Anweisungen zum Einrichten finden Sie unter Konfigurieren von OpenID Connect mit GitHub Actions.

   Option B: Authentifizierung anhand von Anmeldeinformationen (veraltet)

   - name: Azure Login
     uses: azure/login@v2
     with:
       creds: ${{ secrets.AZURE_CREDENTIALS }}
   
   - name: Deploy to Azure Web App
     uses: azure/webapps-deploy@v3
     with:
       app-name: <app-name>
       package: '.'
   

4. Fügen Sie Bereitstellungsschritte hinzu, die für Ihren Hostingdienst (App Service, Static Web Apps oder Container-Apps) geeignet sind.

5. Committen und pushen Sie die Workflow-Datei in Ihr Repository, um automatische Bereitstellungen zu aktivieren.

Ausführlichere Anleitungen finden Sie unter Bereitstellen mit GitHub Actions.

Bereitstellen auf Azure Functions

Azure Functions eignet sich gut für ereignisgesteuerte JavaScript-Apps und serverlose APIs.

Bereitstellen in Visual Studio Code:

1. Installieren Sie die Azure Functions-Erweiterung.
2. Öffnen Sie den Azure Explorer, und wählen Sie Ihr Azure-Abonnement aus.
3. Erstellen oder auswählen Sie Ihre Funktions-App.
4. Verwenden Sie die Erweiterungsbefehle, um Ihr lokales Projekt zu veröffentlichen.

Anleitungen zum Dienst finden Sie in der Azure Functions-Dokumentation und der Funktionsübersicht.

Bereitstellen von Azure Container Apps

Azure Container Apps bietet serverloses Containerhosting für JavaScript-Anwendungen. Bereitstellung:

1. Containern Sie Ihre Anwendung mithilfe von Docker. Erstellen Sie einen Dockerfile im Projektstamm.
2. Erstellen und testen Sie Ihren Container lokal.
3. Übertragen Sie Ihr Containerimage in die Azure-Containerregistrierung.
4. Verwenden Sie die Azure Container Apps-Erweiterung oder Azure CLI, um Ihre Container-App zu erstellen und bereitzustellen.

Eine vollständige Anleitung finden Sie in der Übersicht über JavaScript für Azure-Container-Apps.

Buildschritte

Nachdem Sie Ihren Dienst- und Bereitstellungspfad ausgewählt haben, entscheiden Sie, wann der Build erfolgen soll.

Je nach Komplexität und Bereitstellungsanforderungen Ihrer Anwendung können Sie Ihre JavaScript-App entweder vor oder während der Bereitstellung erstellen:

• Erstellen vor der Bereitstellung: Für komplexe oder langwierige Builds packen Sie Ihre Anwendung in eine ZIP-Datei und stellen Sie sie bereit. Ein Bereitstellungspaket bietet Ihnen die Kontrolle über den Buildprozess und ermöglicht es Ihnen, es vor der Bereitstellung zu testen.
• Erstellen während der Bereitstellung: Verwenden Sie für einfachere Builds die Azure bereitgestellte UmgebungsvariableSCM_DO_BUILD_DURING_DEPLOYMENT=true, um Ihre App während der Bereitstellung zu erstellen.

Bereitstellungsslots

Verwenden Sie Bereitstellungsslots, sobald Sie eine App Service-App in Betrieb haben und einen sichereren Freigabeprozess benötigen.

Bereitstellungs-Slots in Azure App Service ermöglichen es Ihnen, separate Umgebungen für Staging und Produktion zu erstellen. Mithilfe von Slots können Sie Ihre App in einer Stagingumgebung testen, bevor Sie sie mit dem Produktionsplatz austauschen, um eine reibungslose und fehlerfreie Bereitstellung sicherzustellen.

Verwenden Sie keine Bereitstellungsslots, um Bereitstellungszwecke zu kombinieren. Alle Bereitstellungsplätze teilen den App-Dienst, daher müssen Sie sicherstellen, dass die Datenverkehrsmuster und die beabsichtigte Verwendung aller Slots identisch sind. Wenn Sie eine gehostete Test- oder Phasenumgebung benötigen, verwenden Sie einen separaten App-Dienst.

Herstellen einer Verbindung mit Ihrer von Azure gehosteten Umgebung

• Informationen zum manuellen oder gelegentlichen Zugriff auf Ihre gehosteten Umgebungen finden Sie im Abschnitt zum Anzeigen von Dateien in Ihrer in Azure gehosteten Umgebung.
• Für den automatisierten oder konsistenten Zugriff sollten Sie die Schritte zum Einrichten einer der Bereitstellungsmethoden in Erwägung ziehen.

Dateien in der Azure-gehosteten Umgebung anzeigen

Es gibt mehrere Möglichkeiten, die Dateien in Ihrer gehosteten Azure Web App oder Funktions-App sofort anzuzeigen. Wenn Sie Slots in Ihrer gehosteten Ressource verwenden, müssen Sie sicherstellen, dass Sie sich am richtigen Platz befinden, bevor Sie Dateien anzeigen.

• Anzeigen von Dateien im Azure-Portal: Wählen Sie unter „Entwicklungstools“ für Ihre Hostingressource die Option Konsole aus.

• Dateien in der VS Code-Erweiterung anzeigen – wählen Sie das symbol Azure in der Aktivitätsleiste aus. Wählen Sie im Abschnitt "Ressourcen" Ihr Abonnement und Ihren Dienst aus. Unter dem Knoten Dateien werden Ihre Remotedateien angezeigt.

  • Azure App Service und Azure Functions Erweiterungen bieten beide eine Ansicht von Remotedateien.

  

HTTP-Endpunkt im Azure-Portal anzeigen

Zeigen Sie Ihren HTTP-Endpunkt über die Seite "Übersicht" des Diensts im Azure-Portal an.

Verwandte Inhalte

• Tutorials zur Bereitstellung mit Visual Studio Code
• App-Hosting auf Azure
• Dokumentation zu Azure Static Web Apps
• Dokumentation zu Azure-Container-Apps
• Dokumentation zu Azure App Service
• Dokumentation zu Azure Functions