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

Bereitstellungsmethoden

Azure bietet verschiedene Bereitstellungsmethoden für unterschiedliche Anforderungen. Im Folgenden finden Sie einige gängige Methoden:

Andere Bereitstellungsmethoden sind basierend auf dem spezifischen Dienst vorhanden. Der Azure-App-Dienst unterstützt z. B. eine Vielzahl von Bereitstellungsmethoden:

• 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. Bei Verwendung einer anderen Methode müssen vor der erneuten Bereitstellung ggf. ein paar Konfigurationsschritte ausgeführt werden.

Azure-Hostingdienste für JavaScript-Apps

Azure bietet mehrere Hostingdienste, die für unterschiedliche JavaScript-Anwendungsszenarien optimiert sind:

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

Buildschritte

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

Bereitstellungsslots

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

Die Azure Developer CLI (azd) vereinfacht den Prozess der Bereitstellung Ihrer App in Azure. Führen Sie die folgenden Schritte aus:

1. Installieren Sie die Azure Developer CLI.

2. Suchen eines vorhandenen Projekts, 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.

   azd init --template <template-name>
   

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

   azd up
   

Bereitstellen mit Visual Studio Code

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

1. Installieren Sie die zugehörigen Azure-Erweiterungen, z. B. AzureApp 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 "Ressourcen" 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.

   

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 nach Azure Static Web Apps.
4. Klicken Sie mit der rechten Maustaste auf Ihr Abonnement, und wählen Sie "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.

Bereitstellen in Azure Container Apps

Azure Container Apps bietet serverloses Containerhosting für JavaScript-Anwendungen. So stellen Sie Folgendes bereit:

1. Containern Sie Ihre Anwendung mit Docker. Erstellen Sie eine Dockerfile-Datei 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.

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 Azure-Symbol 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 Extensions bieten beide eine Ansicht der 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