Erstellen einer neuen statischen Web-App in Azure mit Node.js

Artikel
05/02/2023

Azure Static Web Apps ist ein Dienst, der auf der Grundlage eines Coderepositorys automatisch umfassende Web-Apps erstellt und in Azure bereitstellt.

Client-Apps: Statische Web-Apps werden in der Regel mithilfe von Bibliotheken und Frameworks wie Angular, React, Svelte, Vue oder Blazor erstellt, für die kein serverseitiges Rendering erforderlich ist.
APIs: API-Endpunkte werden mithilfe einer serverlosen Architektur gehostet, wodurch kein vollständiger Back-End-Server mehr benötigt wird.

Videoserie:

Beispiele:

Communitybeispiele für Static Web Apps eignen sich sehr gut, um einen Code zu finden, den Sie als Ausgangspunkt für Ihr Projekt verwenden können.
Startprojekte für statische Web-Apps sind eine weitere hervorragende Möglichkeit, um Ihr Projekt zu starten.

Was ist eine statische Web-App?

Eine statische Azure-Web-App ist eine gehostete App mit den generierten statischen Clientdateien und den optionalen API-Endpunkten. Bei der Erstellung der statischen Web-App schließen Sie erforderliche Informationen für eine GitHub-Aktion ein, sodass die statischen Dateien aus Ihrem GitHub-Repository erstellt und in Azure bereitgestellt werden können.

Erstellen Sie die statische Web-App mit einer der folgenden Methoden:

Verwenden der Static Web Apps-Befehlszeilenschnittstelle

Die Static Web Apps-Befehlszeilenschnittstelle wird auch als SWA CLI bezeichnet und fungiert als lokales Entwicklungstool für Azure Static Web Apps. Sie haben damit folgende Möglichkeiten:

Bereitstellen statischer App-Ressourcen oder Proxys für Ihren App-Entwicklungsserver
Verarbeiten von API-Anforderungen oder Verwenden als Proxy für APIs, die in Azure Functions Core Tools ausgeführt werden
Emulieren von Authentifizierung und Autorisierung
Emulieren der Static Web Apps-Konfiguration (einschließlich Routing)

Einschließen von APIs für eine Full-Stack-App

APIs für Azure Functions werden optional in Static Web Apps bereitgestellt und befinden sich in der Regel in einem Ordner namens /api. Diese Funktionen ermöglichen die Entwicklung einer Full-Stack-Website, ohne sich mit der serverseitigen Konfiguration einer gesamten Webhostingumgebung befassen zu müssen. Weitere Informationen finden Sie im JavaScript-Entwicklerhandbuch für Azure Functions.

Beispiele:

Communitybibliothek mit Beispielen (serverlos)

Entwickeln mit Visual Studio Code

Verwenden Sie die Erweiterung für Static Web Apps von Visual Studio Code, um Ihre lokale Ordnerstruktur und die anfänglichen Abhängigkeiten zu erstellen.

Forken Sie eines der GitHub-Vorlagenrepositorys für Ihre Client- und API-Auswahl, oder erstellen Sie ein neues Repository.
Erstellen Sie in VS Code eine neue statische Web-App.
Wählen Sie in den Erstellungsschritten Ihren Repositoryfork und Ihren Branch aus.

Wenn Sie Daten an dieses Repository und diesen Branch pushen, wird Ihr Code auch in der statischen Web-App bereitgestellt. Zu diesem Zweck wird üblicherweise ein Branch namens live oder deploy verwendet.
Wählen Sie in den Erstellungsschritten die Projektstruktur, den Speicherort des Anwendungscodes und das Buildverzeichnis aus.

Wenn Ihre Ordnerstruktur der typischen Ordnerstruktur für den Projekttyp folgt, können Sie in der Regel die Standardwerte verwenden.
Nach Abschluss der Erstellungsschritte verfügt Ihr Repositoryfork über eine GitHub-Aktion zur Erstellung und Bereitstellung in Ihrer statischen Web-App, die sich im Verzeichnis /.github/workflows befindet.

Im Anschluss finden Sie einige Tutorials, in denen die Azure Static Web Apps-Erweiterung verwendet wird:

Konfigurieren von Clientumgebungsvariablen

Durch die GitHub-Aktion werden Umgebungsvariablen gesteuert, die zur Buildzeit in Ihr Projekt eingefügt werden. Diese clientseitigen Variablen müssen in im YAML-Code der GitHub-Aktion im Abschnitt env konfiguriert werden. Geheime Schlüssel sollten in GitHub-Geheimnissen gespeichert und in den env Abschnitt übernommen werden.

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - master
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - master

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v0.0.1-preview
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_<GENERATED_HOSTNAME> }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "search-website" # App source code path
          api_location: "search-website/api" # Api source code path - optional
          output_location: "build" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######
        env: # Add environment variables here
          # Inject vars at build time
          myvarname: 'myvarvalue' 
          # Inject secrets at build time from GitHub Secrets
          password: ${{ secrets.PASSWORD }}

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v0.0.1-preview
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_<GENERATED_HOSTNAME> }}
          action: "close"

Konfigurieren von API-Umgebungsvariablen

Die API-Umgebungsvariablen sind Laufzeitvariablen, die über das Azure-Portal oder über die Azure CLI konfiguriert werden.

Azure-Portal: Unter Einstellungen > Konfiguration
VSCode-Erweiterung: Unter Produktion > Anwendungseinstellungen
Azure CLI: Mithilfe von az staticwebapp appsettings set

Bereitstellung in Azure

Die Bereitstellung einer statischen Web-App in Azure beginnt mit dem Pushen von Daten an den spezifischen Branch des Quellcoderepositorys, der in der GitHub-Aktion unter pull_requests:branches angegeben ist. Bei dem Pushvorgang von Ihrem lokalen Computer muss das Repository oder der Fork eines Repositorys der statischen Web-App verwendet werden. Wenn Ihr GitHub-Benutzerkonto nicht über die Berechtigung zum Pushen an den angegebenen Branch im angegebenen Organisationsrepository verfügt (beispielsweise die GitHub-Organisation Ihres Unternehmens), müssen Sie das Repository forken und dann Ihre GitHub-Aktion für die Verwendung dieses Forks konfigurieren.

Ermitteln des Bereitstellungserfolgs anhand der GitHub-Aktion

View deployment success from the GitHub Action.

Aktivieren von Protokollen

Aktivieren Sie im Azure-Portal Application Insights für Ihre statische Web-App, um Protokollierungsdaten zu erfassen. Durch die integrierte Protokollierung von Application Insights werden große Mengen an Informationen für Sie gesammelt, ohne dass Sie dazu Ihren Code ändern müssen.

Entwickeln einer benutzerdefinierten Protokollierung

Um ihrer App benutzerdefinierte Protokollierung zu Application Insights hinzuzufügen, fügen Sie das @microsoft/applicationinsights-web npm-Paket hinzu, und fügen Sie dann den JavaScript-Code hinzu, um benutzerdefinierte Informationen zu erfassen.

import { ApplicationInsights } from '@microsoft/applicationinsights-web'

const appInsights = new ApplicationInsights({ config: {
  instrumentationKey: 'YOUR_INSTRUMENTATION_KEY_GOES_HERE'
  /* ...Other Configuration Options... */
} });
appInsights.trackTrace({message: 'some trace'});

Nächste Schritte

Weitere Informationen zu Static Web Apps finden Sie hier.
Informationen zum Hinzufügen einer API in Static Web Apps finden Sie hier.