Bearbeiten

Freigeben über

Hostdaten-API-Generator in Azure Static Web Apps (Vorschau)

  • Vorgehensweise

Diagramm des aktuellen Speicherorts ('Veröffentlichen') in der Sequenz des Bereitstellungshandbuchs.

Hostdaten-API-Generator schnell in Azure Static Web Apps mit nur einer Konfigurationsdatei. Dieser Leitfaden enthält Schritte zum Integrieren des Daten-API-Generators in eine statische Web-App.

In diesem Leitfaden werden die Schritte zum Erstellen einer DAB-Konfigurationsdatei erläutert, die Datei als Teil Ihrer Anwendung gehostet und dann eine Datenbankverbindung in Azure Static Web Apps verwendet.

Voraussetzungen

Wichtig

Die Unterstützung für den Daten-API-Generator (DAB) in Azure Static Web Apps mit Datenbankverbindungen befindet sich in der Vorschau. Azure Static Web Apps verwendet eine feste Version des DAB-Moduls, die von der neuesten stabilen Version von DAB variieren kann. Um auf die neuesten DAB-Features zuzugreifen, sollten Sie einen alternativen Host für DAB mit der neuesten Version des Moduls von GitHub, Microsoft Container Registry (Docker Hub) oder NuGet in Betracht ziehen.

  • Vorhandene unterstützte Datenbank, die von Azure adressierbar ist.

Erstellen einer statischen Web-App

Verwenden Sie zunächst das Azure-Portal, um eine neue statische Azure Web App mit der Webanwendung in GitHub zu erstellen.

  1. Melden Sie sich beim Azure-Portal an (https://portal.azure.com).

  2. Erstellen Sie eine neue Ressourcengruppe. Sie verwenden diese Ressourcengruppe für alle neuen Ressourcen in diesem Handbuch.

    Screenshot der Registerkarte

    Trinkgeld

    Es wird empfohlen, die Ressourcengruppe msdocs-dab-swazu benennen. Alle Screenshots in diesem Handbuch verwenden diesen Namen.

  3. Erstellen Sie eine statische Azure Web App. Verwenden Sie diese Einstellungen, um die statische Web-App zu konfigurieren.

    Einstellung Wert
    Ressourcengruppe Wählen Sie die Zuvor erstellte Ressourcengruppe aus.
    Name Geben Sie einen global eindeutigen Namen ein.
    Plantyp Wählen Sie die beste Option für Ihre Workload aus.
    Source- GitHub- auswählen
    GitHub-Konto Konfigurieren eines GitHub-Kontos, das Zugriff auf das Webanwendungs-Repository hat
    Organisation Auswählen der übergeordneten Organisation oder des Übergeordneten Benutzers für das Repository
    Repository- Auswählen des Repositorynamens
    Branch- Auswählen der primären Verzweigung

    Screenshot der Registerkarte

  4. Warten Sie, bis die Bereitstellung der statischen Webanwendung abgeschlossen ist. Ihrem Repository wird automatisch ein GitHub-Aktionsworkflow hinzugefügt, der die Anwendung bei jedem Push an die primäre Verzweigung in Azure Static Web Apps bereitstellt.

    Anmerkung

    Diese anfängliche Bereitstellung kann einige Minuten dauern. Sie können immer den Status der Bereitstellung im Azure-Portal oder auf der Registerkarte "GitHub-Aktionen" in Ihrem Repository überprüfen.

  5. Navigieren Sie im Azure-Portal zur neuen statischen Web-App.

  6. Verwenden Sie im Abschnitt Essentials die -URL Link, um zur ausgeführten Webanwendung zu navigieren. Stellen Sie sicher, dass die Anwendung wie erwartet ausgeführt wird.

Hinzufügen der DAB-Konfigurationsdatei

Verwenden Sie nun die DAB- und SWA-Befehlszeilenschnittstellen, um eine neue DAB-Konfigurationsdatei zu erstellen und sie dem Webanwendungs-Repository hinzuzufügen.

  1. Öffnen Sie das GitHub-Repository für Ihre Webanwendung in der integrierten Entwicklerumgebung (IDE) Ihrer Wahl.

    Trinkgeld

    Sie können jede beliebige IDE verwenden. Wenn Sie lokal an der Anwendung arbeiten möchten, können Sie das Repository auf Ihrem lokalen Computer klonen. Wenn Sie lieber im Browser arbeiten möchten, können Sie GitHub Codespacesverwenden. Stellen Sie sicher, dass die SWA- und DAB-CLIs in Ihrer Entwicklungsumgebung installiert sind.

  2. Öffnen Sie ein Terminal im Stammverzeichnis des Repositorys.

  3. Verwenden Sie den Befehl swa db aus der SWA CLI, um eine neue DAB-Konfigurationsdatei mit dem angegebenen Datenbanktyp zu initialisieren. Mit dem Befehl wird eine neue Datei namens staticwebapp.database.config.json im ordner swa-db-connections erstellt.

    swa db init --database-type "<database-type>"

    Wichtig

    Einige Datenbanktypen erfordern zusätzliche Konfigurationseinstellungen für die Initialisierung.

  4. Verwenden Sie den Befehl dab add, um der Konfiguration mindestens eine Datenbankentität hinzuzufügen. Konfigurieren Sie jede Entität, um alle Berechtigungen für anonyme Benutzer zuzulassen. Wiederholen Sie dab add so oft wie für Ihre Entitäten.

    dab add "<entity-name>" --source "<schema>.<table>" --permissions "anonymous:*" --config "swa-db-connections/staticwebapp.database.config.json"

  5. Öffnen und überprüfen Sie den Inhalt der datei swa-db-connections/staticwebapp.database.config.json.

  6. Übernehmen Sie Ihre Änderungen an dem Repository, und übertragen Sie sie an die primäre Verzweigung. Dadurch wird automatisch eine neue Bereitstellung der Webanwendung ausgelöst. Warten Sie, bis diese neueste Bereitstellung abgeschlossen ist, bevor Sie mit diesem Handbuch fortfahren.

Konfigurieren der Datenbankverbindung

Konfigurieren Sie als Nächstes die Datenbankverbindung im Azure-Portal, damit die statische Web-App auf die Datenbank zugreifen kann.

  1. Navigieren Sie erneut im Azure-Portal zur statischen Web-App.

  2. Wählen Sie die Option Datenbankverbindung im Abschnitt Einstellungen des Ressourcenmenüs aus. Wählen Sie dann Vorhandene Datenbank verknüpfen für die Produktionsumgebung aus.

    Screenshot der Option

  3. Verwenden Sie im Dialogfeld Datenbank verknüpfen diese Einstellungen, um die Datenbankverbindung zu konfigurieren.

    Einstellung Wert
    Datenbanktyp Wählen Sie denselben Datenbanktyp aus, den Sie beim Erstellen der DAB-Konfigurationsdatei verwendet haben.
    Ressourcengruppe Wählen Sie die Ressourcengruppe aus, die Sie zuvor in diesem Handbuch erstellt haben.
    Ressourcenname Wählen Sie die Datenbankressource aus, die Sie mit der statischen Web-App verknüpfen möchten.
    Datenbankname Geben Sie den Namen der Datenbank ein.
    Authentifizierungstyp Wählen Sie den Typ der Authentifizierung aus, die Sie verwenden möchten.

    Screenshot des Dialogfelds

    Trinkgeld

    Es wird empfohlen, eine Verbindungszeichenfolge zu verwenden, die keine Autorisierungsschlüssel enthält. Verwenden Sie stattdessen verwaltete Identitäten und rollenbasierte Zugriffssteuerung, um den Zugriff zwischen Ihrer Datenbank und Ihrem Host zu verwalten. Weitere Informationen finden Sie unter Azure-Dienste, die verwaltete Identitätenverwenden.

Testen des Daten-API-Endpunkts

Überprüfen Sie abschließend, ob der Daten-API-Endpunkt in der statischen Web-App verfügbar ist.

  1. Navigieren Sie erneut im Azure-Portal zur statischen Web-App.

  2. Verwenden Sie das Feld URL im Abschnitt Essentials, um erneut zur Website der statischen Web App zu navigieren.

  3. Navigieren Sie zum /data-api Pfad für die aktuelle ausgeführte Anwendung. Beachten Sie, dass die Antwort weiterhin angibt, dass der DAB-Container fehlerfreienist.

    { Healthy }

  4. Navigieren Sie zum https://<your-static-web-app-url>/data-api/<your-rest-path>/<your-entity-name> Pfad für die aktuelle ausgeführte Anwendung. Dadurch wird eine HTTP GET--Anforderung für diese Gruppe von Entitäten ausgestellt. Beobachten Sie die JSON-Antwort.

Bereinigen von Ressourcen

Wenn Sie die Beispielanwendung oder Ressourcen nicht mehr benötigen, entfernen Sie die entsprechende Bereitstellung und alle Ressourcen.

  1. Navigieren Sie mithilfe des Azure-Portals zur Ressourcengruppe.

  2. Wählen Sie in der BefehlsleisteLöschenaus.