Freigeben über

Bereitstellen Ihrer Web-App in Azure Static Web Apps

  • Artikel

In diesem Artikel erstellen Sie eine neue Web-App mit dem von Ihnen gewählten Framework, führen sie lokal aus und stellen sie dann in Azure Static Web Apps bereit.

Voraussetzungen

Um die Schritte dieses Tutorials abzuschließen, benötigen Sie Folgendes:

Resource Beschreibung
Azure-Abonnement Falls Sie über keins verfügen, können Sie ein kostenloses Konto erstellen.
Node.js Installieren Sie Version 20.0 oder höher.
Azure-Befehlszeilenschnittstelle Installieren Sie Version 2.6x oder höher.

Sie benötigen auch einen Text-Editor. Für die Arbeit mit Azure wird Visual Studio Code empfohlen.

Sie können die in diesem Artikel erstellte App auf der Plattform Ihrer Wahl ausführen, einschließlich Linux, macOS, Windows oder dem Windows-Subsystem für Linux.

Web-App erstellen

  1. Öffnen Sie ein Terminalfenster.

  1. Wählen Sie ein geeignetes Verzeichnis für Ihren Code aus, und führen Sie dann die folgenden Befehle aus.

    npm create vite@latest swa-vanilla-demo -- --template=vanilla
cd swa-vanilla-demo
npm install
npm run dev

    Während Sie diese Befehle ausführen, druckt der Entwicklungsserver die URL Ihrer Website. Wählen Sie den Link aus, um ihn in Ihrem Standardbrowser zu öffnen.

    Screenshot der generierten Vanilla-Webanwendung

  1. Wählen Sie ein geeignetes Verzeichnis für Ihren Code aus, und führen Sie dann die folgenden Befehle aus.

    npx --package @angular/cli@latest ng new swa-angular-demo --ssr=false --defaults
cd swa-angular-demo
npm start

    Während Sie diese Befehle ausführen, druckt der Entwicklungsserver die URL Ihrer Website. Wählen Sie den Link aus, um ihn in Ihrem Standardbrowser zu öffnen.

    Screenshot der generierten Angular-Webanwendung

  1. Wählen Sie ein geeignetes Verzeichnis für Ihren Code aus, und führen Sie dann die folgenden Befehle aus.

    npm create vite@latest swa-react-demo -- --template react
cd swa-react-demo
npm install
npm run dev

    Während Sie diese Befehle ausführen, druckt der Entwicklungsserver die URL Ihrer Website. Wählen Sie den Link aus, um ihn in Ihrem Standardbrowser zu öffnen.

    Screenshot der generierten React-Webanwendung

  1. Wählen Sie ein geeignetes Verzeichnis für Ihren Code aus, und führen Sie dann die folgenden Befehle aus.

    npm create vite@latest swa-vue-demo -- --template vue
cd swa-vue-demo
npm install
npm run dev

    Während Sie diese Befehle ausführen, druckt der Entwicklungsserver die URL Ihrer Website. Wählen Sie den Link aus, um ihn in Ihrem Standardbrowser zu öffnen.

    Screenshot der generierten Vue-Webanwendung

  1. Drücken Sie Cmd/STRG+C, um den Entwicklungsserver zu beenden.

Erstellen einer statischen Web-App auf Azure

Sie können eine statische Web-App mithilfe des Azure-Portals, der Azure CLI, Azure PowerShell oder Visual Studio Code (mit der Azure Static Web Apps-Erweiterung) erstellen. In diesem Lernprogramm wird die Azure CLIverwendet.

  1. Anmelden bei der Azure CLI:

    az login

    Standardmäßig öffnet dieser Befehl einen Browser, um den Vorgang abzuschließen. Die Azure CLI unterstützt verschiedene Anmeldemethoden, wenn diese Methode in Ihrer Umgebung nicht funktioniert.

  2. Wenn Sie über mehrere Abonnements verfügen, müssen Sie möglicherweise ein Abonnement auswählen. Sie können Ihr aktuelles Abonnement mit dem folgenden Befehl anzeigen:

    az account show

    Zum Auswählen eines Abonnements können Sie den Befehl az account set ausführen.

    az account set --subscription "<SUBSCRIPTION_NAME_OR_ID>"

  3. Erstellen Sie eine Ressourcengruppe.

    Ressourcengruppen werden verwendet, um Azure-Ressourcen zusammen zu gruppieren.

    az group create -n swa-tutorial -l centralus --query "properties.provisioningState"

    Der Parameter -n bezieht sich auf den Websitenamen, und der Parameter -l ist der Azure-Standortname. Der Befehl endet mit --query "properties.provisioningState", sodass nur eine Erfolgs- oder Fehlermeldung zurückgegeben wird.

  4. Erstellen Sie eine statische Web-App in Ihrer neu erstellten Ressourcengruppe.

    az staticwebapp create -n swa-demo-site -g swa-tutorial --query "defaultHostname"

    Der Parameter -n bezieht sich auf den Websitenamen, und der Parameter -g bezieht sich auf den Namen der Azure-Ressourcengruppe. Stellen Sie sicher, dass Sie den gleichen Ressourcengruppennamen wie im vorherigen Schritt angeben. Ihre statische Web-App wird global verteilt, daher ist der Standort für die Bereitstellung Ihrer App nicht wichtig.

    Der Befehl ist so konfiguriert, dass die URL Ihrer Web-App zurückgegeben wird. Sie können den Wert aus Ihrem Terminalfenster in Ihren Browser kopieren, um Ihre bereitgestellte Web-App anzuzeigen.

Konfigurieren für die Bereitstellung

  1. Fügen Sie Ihrem Anwendungscode eine staticwebapp.config.json-Datei mit dem folgenden Inhalt hinzu:

    {
    "navigationFallback": {
        "rewrite": "/index.html"
    }
}

    Wenn Sie eine Fallbackroute definieren, kann Ihre Website die index.html-Datei für alle Anforderungen, die für die Domäne vorgenommen wurden, verarbeiten.

    Überprüfen Sie diese Datei in Ihrem Quellcodeverwaltungssystem (z. B. Git), wenn Sie eines verwenden.

  2. Installieren Sie die Azure Static Web Apps-CLI (SWA) in Ihrem Projekt.

    npm install -D @azure/static-web-apps-cli

    Die SWA-CLI hilft Ihnen, Ihre Website lokal zu entwickeln und zu testen, bevor Sie sie in der Cloud bereitstellen.

  3. Erstellen Sie eine neue Datei für Ihr Projekt, und nennen Sie sie swa-cli.config.json.

    In der swa-cli.config.json-Datei wird beschrieben, wie Sie Ihre Website erstellen und bereitstellen.

    Nachdem diese Datei erstellt wurde, können Sie den Inhalt mithilfe des Befehls npx swa init generieren.

    npx swa init --yes

  4. Erstellen Sie Ihre Anwendung für die Verteilung.

    npx swa build

  5. Verwenden Sie die SWA-CLI, um sich bei Azure anzumelden.

    npx swa login --resource-group swa-tutorial --app-name swa-demo-site

    Verwenden Sie denselben Ressourcengruppennamen und statischen Web-App-Namen, den Sie im vorherigen Abschnitt erstellt haben. Wenn Sie versuchen, sich anzumelden, wird ein Browser geöffnet, um den Vorgang bei Bedarf abzuschließen.

Warnung

Angular v17 und höher platziert die verteilungsfähigen Dateien in einem Unterverzeichnis des Ausgabepfads, den Sie auswählen können. Die SWA-CLI kennt nicht den spezifischen Speicherort des Verzeichnisses. Die folgenden Schritte zeigen, wie Sie diesen Pfad richtig festlegen.

Suchen Sie die generierte index.html-Datei in Ihrem Projekt im Ordner dist/swa-angular-demo/browser.

  1. Legen Sie die SWA_CLI_OUTPUT_LOCATION-Umgebungsvariable auf das Verzeichnis fest, das die index.html-Datei enthält:

    export SWA_CLI_OUTPUT_LOCATION="dist/swa-angular-demo/browser"

Bereitstellen Ihrer Website in Azure

Stellen Sie Ihren Code in Ihrer statischen Web-App bereit:

npx swa deploy --env production

Es kann einige Minuten dauern, bis die Anwendung bereitgestellt wird. Nach Abschluss wird die URL Ihrer Website angezeigt.

Screenshot des Befehls „Bereitstellen“

Auf den meisten Systemen können Sie die URL der Website auswählen, um sie in Ihrem Standardbrowser zu öffnen.

Bereinigen von Ressourcen (optional)

Wenn Sie nicht mit anderen Tutorials fortfahren, entfernen Sie die Azure-Ressourcengruppe und die Ressourcen:

az group delete -n swa-tutorial

Wenn Sie eine Ressourcengruppe entfernen, löschen Sie alle Ressourcen, die sie enthält. Diese Aktion kann nicht rückgängig gemacht werden.

Nächste Schritte

Hinzufügen von Authentifizierung

Zugehöriger Inhalt