swa

Anmelden an Azure

Authentifizieren Sie sich bei Azure, um ein Bereitstellungstoken für Azure Static Web Apps mithilfe des Befehls swa deploy abzurufen.

Konfiguriert ein neues Azure Static Web Apps-Projekt.

Konfiguriert ein neues Azure Static Web Apps-Projekt mit der Static Web Apps-Befehlszeilenschnittstelle. Der interaktive Modus fordert Sie zur Eingabe eines Konfigurationsnamens auf und erkennt Ihre Projekteinstellungen und die verwendeten Frameworks. Nach Abschluss wird eine neue statische Web-App erstellt und eine Datei vom Typ „swa-cli.config.json“ im aktuellen Verzeichnis generiert. Sie können swa init mehrmals ausführen, um unterschiedliche Konfigurationen für Ihr Projekt zu erstellen. Dies wird ggf. empfohlen, wenn Sie an einem Monorepo arbeiten und verschiedene Projekte konfigurieren möchten. Die generierte Konfigurationsdatei wird in jedem Befehl verwendet, den Sie mit der Static Web Apps-Befehlszeilenschnittstelle ausführen. Wenn Sie über mehrere benannte Konfigurationen verfügen, können Sie das positionelle Argument oder die Option --config-name verwenden, um anzugeben, welche Konfiguration Sie verwenden möchten. Das folgende Beispiel stellt eine vom Befehl init generierte Konfiguration dar:

  "$schema": "https://aka.ms/azure/static-web-apps-cli/schema",
  "configurations": {
    "myApp": {
      "appLocation": ".",
      "apiLocation": "api",
      "outputLocation": "dist",
      "appBuildCommand": "npm run build",
      "apiBuildCommand": "npm run build --if-present",
      "run": "npm run dev",
      "appDevserverUrl": "http://localhost:8080"
    }
  }
} ```

Starten Sie den Azure Static Web Apps-Emulator aus einem Verzeichnis, oder binden Sie ihn an einen ausgeführten Entwicklungsserver.

Bereitstellen über einen Ordner

Die CLI wird standardmäßig gestartet und stellt statische Inhalte aus dem aktuellen Arbeitsverzeichnis ./ bereit:

swa start

Wenn sich der Artefaktordner Ihrer statischen App unter einem anderen Ordner (z. B. ./my-dist) befindet, führen Sie die CLI aus, und geben Sie diesen Ordner an:

swa start ./my-dist

Bereitstellen über einen Entwicklungsserver

Bei der lokalen Entwicklung Ihrer Front-End-App ist es häufig hilfreich, den Entwicklungsserver zu verwenden, der im Rahmen der CLI Ihres Front-End-Frameworks bereitgestellt wird. Mit der Framework-Befehlszeilenschnittstelle können Sie integrierte Features wie „livereload“ und HMR (Hot Module Replacement) verwenden. Führen Sie die folgenden beiden Schritte aus, um die SWA-Befehlszeilenschnittstelle mit Ihrem lokalen Entwicklungsserver zu verwenden:

1. Starten Sie den lokalen Entwicklungsserver wie gewohnt. Verwenden Sie bei Verwendung von Angular beispielsweise ng serve (oder npm start).
2. Führen Sie in einem separaten Terminal swa start mit dem vom Entwicklungsserver bereitgestellten URI im folgenden Format aus:

swa start http://<APP_DEV_SERVER_HOST>:<APP_DEV_SERVER_PORT>

Hier ist eine Liste der Standardports und Befehle, die von einigen beliebten Entwicklungsservern verwendet werden:

Anstatt einen Entwicklungsserver separat zu starten, können Sie den Startbefehl für die CLI angeben.

# npm start script (React)
swa start http://localhost:3000 --run "npm start"

# dotnet watch (Blazor)
swa start http://localhost:5000 --run "dotnet watch run"

# Jekyll
swa start http://localhost:4000 --run "jekyll serve"

# custom script
swa start http://localhost:4200 --run "./startup.sh"

Greifen Sie dann über http://localhost:4280 auf die Anwendung mit den emulierten Diensten zu.

Bereitstellen der Front-End-App und der API

Wenn Ihr Projekt API-Funktionen enthält, überprüft die CLI, ob Azure Functions Core Tools installiert und verfügbar sind. Andernfalls lädt die CLI die richtige Version der Azure Functions Core Tools herunter und installiert sie.

Automatisches Starten des API-Servers

Führen Sie die CLI aus, und geben Sie den Ordner an, der das API-Back-End enthält (ein gültiges Azure Functions-App-Projekt):

# static content plus an API
swa start ./my-dist --api-location ./api

# front-end dev server plus an API
swa start http://localhost:3000 --api-location ./api

Manuelles Starten des API-Servers

Wenn Sie Ihr Back-End lokal entwickeln, ist es manchmal hilfreich, Azure Functions Core Tools separat auszuführen, um Ihre API bereitzustellen. Auf diese Weise können Sie integrierte Features wie Debuggen und Unterstützung für einen umfangreichen Editor verwenden. Führen Sie die folgenden beiden Schritte aus, um die Befehlszeilenschnittstelle mit Ihrem lokalen Entwicklungsserver für das API-Back-End zu verwenden:

1. Starten Sie Ihre API mithilfe von Azure Functions Core Tools (func host start), oder starten Sie das Debuggen in VS Code.
2. Führen Sie in einem separaten Terminal die SWA-Befehlszeilenschnittstelle mit dem Flag --api-location und dem URI des lokalen API-Servers im folgenden Format aus:

swa start ./my-dist --api-location http://localhost:7071

Datenbankverbindungen

Um die Anwendung mit einer Datenbankverbindung zu starten, verwenden Sie den Parameter --data-api-location, und verweisen Sie auf den Ordner, der die Datei staticwebapp.database.config.json enthält.

swa start ./src --data-api-location swa-db-connections

Erstellt die Anwendung. Wenn Sie über eine Node.js-Anwendung verfügen, werden zuerst Abhängigkeiten installiert.

Häufige Anwendungsfälle: Installieren von Abhängigkeiten für die Front-End-App und API und Ausführen der Buildbefehle für beide, reine Erstellung des Front-End- oder API-Projekts, wenn das andere keinen Buildschritt umfasst.

Stellen Sie das aktuelle Projekt in Azure Static Web Apps bereit.

Gängige Anwendungsfälle:

1. Bereitstellen einer Front-End-App ohne API
2. Bereitstellen einer Front-End-App mit API
3. Bereitstellen einer Blazor-App

Bereitstellungstoken

Die SWA-Befehlszeilenschnittstelle unterstützt die Bereitstellung mithilfe eines Bereitstellungstokens. Dies ist häufig bei der Bereitstellung über eine CI/CD-Umgebung hilfreich. Sie haben verschiedene Möglichkeiten, ein Bereitstellungstoken abzurufen:

• Über das Azure-Portal: Start → Statische Web-App → Ihre Instanz → Übersicht → Bereitstellungstoken verwalten

• Wenn Sie die Azure CLI verwenden, können Sie das Bereitstellungstoken Ihres Projekts mit dem folgenden Befehl abrufen:

  az staticwebapp secrets list --name <APPLICATION_NAME> --query "properties.apiKey"
  

• Wenn Sie die Azure Static Web Apps-Befehlszeilenschnittstelle verwenden, können Sie den folgenden Befehl verwenden:

  swa deploy --print-token
  

  Sie können diesen Wert dann mit --deployment-token <TOKEN> verwenden oder eine Umgebungsvariable namens SWA_CLI_DEPLOYMENT_TOKEN erstellen und auf das Bereitstellungstoken festlegen.

  Wichtig: Speichern Sie das Bereitstellungstoken nicht in einem öffentlichen Repository. Dieser Wert muss geheim bleiben.

Bereitstellen einer Front-End-App ohne API

Sie können eine Front-End-Anwendung ohne API in Azure Static Web Apps bereitstellen, indem Sie die folgenden Schritte ausführen:

1. Wenn Ihre Front-End-Anwendung einen Buildschritt erfordert, führen Sie swa build aus, oder verweisen Sie auf die Anwendungsbuildanweisungen.
   
   Option 1: Führen Sie im Buildordner, den Sie bereitstellen möchten, den Bereitstellungsbefehl aus:

cd build/
swa deploy

Hinweis: Der Ordner build muss den statischen Inhalt Ihrer App enthalten, die Sie bereitstellen möchten. Option 2: Sie können auch einen bestimmten Ordner bereitstellen:

1. Wenn Ihre Front-End-Anwendung einen Buildschritt erfordert, führen Sie swa build aus, oder verweisen Sie auf die Anwendungsbuildanweisungen.
2. Stellen Sie Ihre App bereit:

swa deploy ./my-dist

Bereitstellen einer Front-End-App mit API

Führen Sie die folgenden Schritte aus, um sowohl die Front-End-App als auch eine API für Azure Static Web Apps bereitzustellen:

1. Wenn Ihre Front-End-Anwendung einen Buildschritt erfordert, führen Sie swa build aus, oder verweisen Sie auf die Anwendungsbuildanweisungen.
2. Stellen Sie sicher, dass die Version der API-Sprachlaufzeit in der Datei staticwebapp.config.json ordnungsgemäß festgelegt ist, z. B.:

{
  "platform": {
    "apiRuntime": "node:16"
  }
}

Hinweis: Wenn Ihr Projekt nicht über eine Datei vom Typ staticwebapp.config.json verfügt, fügen Sie eine im Ordner outputLocation hinzu.

1. Stellen Sie Ihre App bereit:

swa deploy ./my-dist --api-location ./api

Bereitstellen einer Blazor-App

Führen Sie die folgenden Schritte aus, um eine Blazor-App mit einer optionalen API in Azure Static Web Apps bereitzustellen:

1. Erstellen Sie Ihre Blazor-App im Releasemodus:

dotnet publish -c Release -o bin/publish

2. Führen Sie im Stamm Ihres Projekts den deploy-Befehl aus:

swa deploy ./bin/publish/wwwroot --api-location ./Api

Bereitstellen unter Verwendung von swa-cli.config.json

Hinweis: Der Pfad für outputLocation muss relativ zu appLocation sein. Wenn Sie die Konfigurationsdatei swa-cli.config.json in Ihrem Projekt verwenden und über einen einzelnen Konfigurationseintrag verfügen, verwenden Sie eine Konfiguration wie die folgende:

{
  "configurations": {
    "my-app": {
      "appLocation": "./",
      "apiLocation": "api",
      "outputLocation": "frontend",
      "start": {
        "outputLocation": "frontend"
      },
      "deploy": {
        "outputLocation": "frontend"
      }
    }
  }
}

Anschließend können Sie Ihre Anwendung bereitstellen, indem Sie die folgenden Schritte ausführen:

1. Wenn Ihre Front-End-Anwendung einen Buildschritt erfordert, führen Sie swa build aus, oder verweisen Sie auf die Anwendungsbuildanweisungen.
2. Stellen Sie Ihre App bereit:

swa deploy

Wenn Sie über mehrere Konfigurationseinträge verfügen, können Sie mithilfe der Eintrags-ID angeben, welcher verwendet werden soll:

swa deploy my-otherapp

Generieren und bearbeiten Sie die Konfiguration der Static Web Apps-Datenbankverbindungen.

Verwenden Sie swa db init, um den Beispielordner swa-db-connections zusammen mit einer Konfigurationsdatei vom Typ staticwebapp.database.config.json zu generieren. Wenn Sie eine Cosmos DB for NoSQL-Datenbank verwenden, generiert dies auch die Beispielschemadatei staticwebapp.database.schema.gql.