github/azure-static-web-apps

Was macht azure-static-web-apps?

Hilft bei der Erstellung, Konfiguration und Bereitstellung von Azure Static Web Apps mithilfe der SWA-CLI. Verwenden Sie es beim Bereitstellen statischer Websites in Azure, Einrichten der lokalen SWA-Entwicklung, Konfigurieren von staticwebapp.config.json, Hinzufügen von Azure Functions-APIs zu SWA oder Einrichten von GitHub Actions CI/CD für Static Web Apps.

Verwendung

Dieser Skill wird durch Anforderung von Hilfe bei Azure Static Web Apps Aufgaben aktiviert. Beispielaufforderungen:

• "Erstelle ein neues Azure Static Web App Projekt in meinem aktuellen Verzeichnis"
• "Konfiguriere staticwebapp.config.json für Routen und Umleitungen"
• "Füge eine Azure Function API zu meiner statischen Web App hinzu"
• "Richte GitHub Actions CI/CD für mein SWA Projekt ein"
• "Hilfe bei der lokalen Entwicklung mit Azure Static Web Apps"

Voraussetzungen

• Azure CLI und SWA CLI installiert (npm install -g @azure/static-web-apps-cli)
• Ein Azure Konto mit aktiver Rolle
• (Optional) GitHub Repository für CI/CD Konfiguration

Hauptbefehle

Aktion	Befehl
Neues Projekt initialisieren	swa init
Lokale Entwicklung starten	swa start
In Azure bereitstellen	swa deploy
Konfiguration validieren	swa build

Konfigurationsreferenz

Die Datei staticwebapp.config.json steuert Routing, Authentifizierung und API-Endpunkte. Wichtige Felder:

• routes: Definiert URL-Muster und Antwortregeln
• navigationFallback: Fallback für clientseitiges Routing
• responseOverrides: Überschreibt HTTP-Antworten für bestimmte Statuscodes
• globalHeaders: Setzt globale Header für alle Anfragen
• auth: Konfiguriert Authentifizierungsanbieter (Azure AD, Facebook, Google, X)
• platform: Plattformeinstellungen (API Sprachlaufzeit, Version)
• networking: Firewall- und CORS-Regeln

API Integration

Azure Functions können als Serverless-APIs zu SWA hinzugefügt werden. Dazu:

1. Erstellen Sie ein Azure Functions Projekt im Stammverzeichnis
2. Konfigurieren Sie die api_location im Build-Konfigurationsabschnitt der SWA
3. Verwenden Sie swa start --api-location ./api für die lokale Entwicklung

CI/CD mit GitHub Actions

Beispiel-Workflow für GitHub Actions:

name: Azure Static Web Apps CI/CD

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

jobs:
  build_and_deploy_job:
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v3
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: "/"
          api_location: "api"
          output_location: "build"

Fehlerbehebung

• Lokaler Server startet nicht: Stellen Sie sicher, dass Port 4280 frei ist
• API feuert nicht lokal: Überprüfen Sie die api_location Pfad
• Bereitstellung schlägt fehl: Überprüfen Sie die Ausgabepfade (output_location)
• Authentifizierung funktioniert nicht: Stellen Sie sicher, dass auth-provider Werte in staticwebapp.config.json korrekt sind

Best Practices

• Verwenden Sie Umgebungsvariablen (SWA_CLI_DEPLOY_ENVIRONMENT) für verschiedene Umgebungen
• Führen Sie swa build vor der Bereitstellung aus, um Konfigurationsfehler zu erkennen
• Aktivieren Sie Staging-Umgebungen für Pull Requests im GitHub Actions Workflow
• Cachen Sie Build-Artefakte, um die CI/CD Zeit zu reduzieren