Entwickeln einer Daten-API mit Azure Static Web Apps

Abgeschlossen

Statische Web-Apps sind ein Konzept im Websitedesign, das mittlerweile sehr beliebt ist. Sie bestehen aus Inhalten, die direkt an den Browser eines Benutzers gesendet werden, wobei kein Code auf dem Server ausgeführt werden muss. Statische Web-Apps bestehen aus HTML und CSS. Sie umfassen häufig JavaScript-Code, der clientseitig ausgeführt wird, und nicht auf dem Server. Viele Webentwickler sind der Meinung, dass statische Web-Apps:

• Schnell mit Frameworks wie Bootstrap, Jekyll und AngularJS entwickelt werden können.
• Einfach zu skalieren sind, da keine Zustandsänderungen auf dem Server vorgenommen werden.
• Die Trennung zwischen Benutzeroberflächencode und Back-End-Funktionen fördern.

Azure Static Web Apps ist ein Dienst in Azure, der das Codieren und Bereitstellen statischer Web-Apps in Azure für die Produktion vereinfacht. Azure Static Web Apps unterstützt die kontinuierliche Bereitstellung, indem ein Code-Repository in GitHub oder Azure DevOps überwacht wird. Wenn Sie eine Änderung am Websitecode vornehmen und Ihre Änderung an das Repository übertragen, erkennt Azure Static Web Apps die Änderung, erstellt die neue Website automatisch und stellt sie in Azure bereit. Ihre Änderung den Benutzern sofort zur Verfügung gestellt.

Da der Daten-API-Generator (Data API Builder, DAB) für die nahtlose Zusammenarbeit mit Azure Static Web Apps konzipiert ist, ist das Hosten Ihrer Datenbank-APIs in diesem Dienst problemlos möglich. Sie müssen nur die Konfigurationsdatei verwenden, um DAB über Ihre Azure Static Web Apps-Instanz zu informieren und in einem Repository bereitzustellen. Azure Static Web Apps hosten Ihre API, und Benutzer können mit dem Aufrufen ihrer Methoden beginnen.

Erstellen einer statischen Web-App

Navigieren Sie zunächst zum Azure-Portal , und wählen Sie "Ressource erstellen" aus. Geben Sie in der Suchleiste statische Web App ein. Wenn die Statische Web App-Karte angezeigt wird, wählen Sie sie aus, und wählen Sie dann "Erstellen" aus.

Wählen Sie als Nächstes Ihr Abonnement und entweder eine vorhandene Ressourcengruppe aus, oder erstellen Sie eine neue. Geben Sie im Textfeld "Name " einen beschreibenden Namen für Ihre App ein. Sie müssen den Plantyp auswählen. Für persönliche Projekte können Sie den kostenlosen Plan verwenden, während für Produktions-Apps der Standard-Plan empfohlen wird.

Geben Sie unter "Bereitstellungsdetails" den Typ des Repositorys an, das Ihre App enthält. Sie müssen sich bei GitHub anmelden oder das Repository und die Verzweigung in Azure DevOps auswählen. Überprüfen Sie schließlich Ihre Einstellungen, indem Sie "Überprüfen" und "Erstellen" auswählen und dann " Erstellen" auswählen, um den Vorgang abzuschließen.

Erstellen einer Konfigurationsdatei für den Daten-API-Generator

Um Ihre Datenbank-API in Azure Static Web Apps bereitzustellen, müssen Sie die DAB-Konfigurationsdatei ordnungsgemäß erstellen. Dafür stehen zwei Befehlszeilentools zur Verfügung:

• swa: Verwenden Sie diese CLI, um eine neue DAB-Konfigurationsdatei zu initialisieren.
• dab: Verwenden Sie diese CLI, um der Datei eine oder mehrere Datenbanken hinzuzufügen.

Bevor Sie beginnen, klonen Sie entweder das GitHub-Repository auf Ihren lokalen Computer, oder verwenden Sie GitHub Codespaces, um eine Eingabeaufforderung in GitHub selbst zu öffnen.

1. Führen Sie den folgenden Befehl aus, um die DAB-Konfigurationsdatei im Stammordner des Repositorys zu initialisieren.

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

   Ersetzen Sie <database type> durch Ihren Datenbankserver. Wenn Ihre Datenbank beispielsweise in der Azure SQL-Datenbank gehostet wird, verwenden Sie mssql. Wenn sie sich in MySQL befindet, verwenden Sie mysql.

2. Führen Sie den folgenden Befehl aus, um der Konfigurationsdatei eine Datenbank hinzuzufügen.

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

   Ersetzen Sie <database-name> durch einen beschreibenden Namen und <schema>.<table> durch den Schema- und Tabellennamen in Ihrer Datenbank.

Mit diesen Schritten wird eine Konfigurationsdatei im Repository mit dem Namen "swa-db-connections/staticwebapp.database.config.json" erstellt. Überprüfen Sie diese Datei, bevor Sie Ihre Änderungen am Repository committen.

Konfigurieren der Verbindung zur Datenbank

Um die Verbindung mit der Datenbank in Ihrer statischen Web-App zu konfigurieren, öffnen Sie zunächst die statische Web-App im Azure-Portal. Navigieren Sie zum Abschnitt "Einstellungen" , und wählen Sie "Datenbankverbindung" aus. Wählen Sie unter "Produktion" die Verknüpfung einer vorhandenen Datenbank aus. Wählen Sie den entsprechenden Datenbanktyp, die Ressourcengruppe und den Datenbanknamen aus. Wählen Sie schließlich Ihren bevorzugten Authentifizierungstyp aus, und verknüpfen Sie die Datenbank.

Hinweis

Es wird empfohlen, eine systemseitig zugewiesene verwaltete Identität oder eine benutzerseitig zugewiesene verwaltete Identität zur Authentifizierung zu verwenden, da die Verbindungszeichenfolge keinen Autorisierungsschlüssel enthält.

Überprüfen des Zugriffs auf die API

Um den Zugriff auf die API zu überprüfen, öffnen Sie zunächst die statische Web-App, die Sie im Azure-Portal erstellt haben. Navigieren Sie zum Abschnitt "Essentials ", und wählen Sie die URL aus, um die Website zu durchsuchen. Fügen Sie /data-api in der Adressleiste des Browsers zur URL hinzu und drücken Sie die Eingabetaste.

Es sollte eine Seite angezeigt werden, die angibt, dass der DAB-Container fehlerfrei ist. Um Entitäten aus Ihrer Datenbank zu durchsuchen, fügen Sie /data-api/rest/ an die URL an. Dadurch wird eine HTTP GET-Anforderung gesendet und die JSON-Antwort angezeigt.