Bewerken

Delen via


Host Data API Builder in Azure Static Web Apps (preview)

diagram van de huidige locatie ('Publiceren') in de volgorde van de implementatiehandleiding.

Diagram van de volgorde van de implementatiehandleiding, inclusief deze locaties, in volgorde: Overzicht, Plannen, Voorbereiden, Publiceren, Bewaken en Optimalisatie. De locatie Publiceren is momenteel gemarkeerd.

Host Data API Builder snel in Azure Static Web Apps met behulp van slechts een configuratiebestand. Deze handleiding bevat stappen voor het integreren van Data API Builder met een statische web-app.

In deze handleiding doorloopt u de stappen voor het bouwen van een DAB-configuratiebestand, het bestand hosten als onderdeel van uw toepassing en gebruikt u vervolgens een databaseverbinding in Azure Static Web Apps.

Vereisten

Belangrijk

Ondersteuning voor Data API Builder (DAB) in Azure Static Web Apps met behulp van databaseverbindingen is in preview. Azure Static Web Apps maakt gebruik van een vaste versie van de DAB-engine die kan variëren van de nieuwste stabiele versie van DAB. Als u toegang wilt krijgen tot de nieuwste DAB-functies, kunt u een alternatieve host voor DAB gebruiken met behulp van de nieuwste versie van de engine vanuit GitHub, Microsoft Container Registry (Docker Hub) of NuGet.

  • Bestaande ondersteunde database die kan worden adresseerbaar vanuit Azure.

Een statische web-app maken

Als u wilt beginnen, gebruikt u Azure Portal om een nieuwe Statische Azure-web-app te maken met behulp van de webtoepassing in GitHub.

  1. Meld u aan bij Azure Portal (https://portal.azure.com).

  2. Maak een nieuwe resourcegroep. U gebruikt deze resourcegroep voor alle nieuwe resources in deze handleiding.

    Schermopname van het tabblad Basisinformatie maken op de pagina 'Een resourcegroep maken' in Azure Portal.

    Fooi

    We raden u aan de resourcegroep een naam te geven msdocs-dab-swa. Alle schermafbeeldingen in deze handleiding gebruiken deze naam.

  3. Een statische Azure-web-app maken. Gebruik deze instellingen om de statische web-app te configureren.

    Montuur Waarde
    resourcegroep Selecteer de resourcegroep die u eerder hebt gemaakt
    naam Voer een wereldwijd unieke naam in
    type abonnement Selecteer de beste optie voor uw workload
    bron Selecteer GitHub-
    GitHub-account Een GitHub-account configureren dat toegang heeft tot de opslagplaats van de webtoepassing
    organisatie- Selecteer de bovenliggende organisatie of gebruiker voor de opslagplaats
    opslagplaats Selecteer de naam van de opslagplaats
    Branch- De primaire vertakking selecteren

    Schermopname van het tabblad Basisbeginselen van de pagina Statische web-app maken in Azure Portal.

  4. Wacht tot de implementatie van de statische webtoepassing is voltooid. Er wordt automatisch een GitHub Actions-werkstroom toegevoegd aan uw opslagplaats waarmee de toepassing wordt geïmplementeerd in Azure Static Web Apps telkens wanneer u naar de primaire vertakking pusht.

    Notitie

    Deze initiële implementatie kan enkele minuten duren. U kunt altijd de status van de implementatie controleren in Azure Portal of op het tabblad GitHub Actions in uw opslagplaats.

  5. Navigeer naar de nieuwe statische web-app in Azure Portal.

  6. Gebruik in de sectie Essentials de -URL hyperlink om naar de actieve webtoepassing te navigeren. Controleer of de toepassing wordt uitgevoerd zoals verwacht.

Het DAB-configuratiebestand toevoegen

Gebruik nu de DAB- en SWA-opdrachtregelinterfaces om een nieuw DAB-configuratiebestand te maken en toe te voegen aan de opslagplaats van de webtoepassing.

  1. Open de GitHub-opslagplaats voor uw webtoepassing in de IDE (Integrated Developer Environment) van uw keuze.

    Fooi

    U kunt elke gewenste IDE gebruiken. Als u lokaal aan de toepassing wilt werken, kunt u de opslagplaats klonen naar uw lokale computer. Als u liever in de browser werkt, kunt u GitHub Codespacesgebruiken. Zorg ervoor dat de SWA- en DAB-CLIs in uw ontwikkelomgeving zijn geïnstalleerd.

  2. Open een terminal in de hoofdmap van de opslagplaats.

  3. Gebruik de opdracht swa db van de SWA CLI om een nieuw DAB-configuratiebestand te initialiseren met behulp van het opgegeven databasetype. Met de opdracht maakt u een nieuw bestand met de naam staticwebapp.database.config.json in de map swa-db-connections.

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

    Belangrijk

    Voor sommige databasetypen zijn aanvullende configuratie-instellingen vereist voor initialisatie.

  4. Gebruik de opdracht dab add om ten minste één database-entiteit toe te voegen aan de configuratie. Configureer elke entiteit om alle machtigingen voor anonieme gebruikers toe te staan. Herhaal dab add zo vaak als u wilt voor uw entiteiten.

    dab add "<entity-name>" --source "<schema>.<table>" --permissions "anonymous:*" --config "swa-db-connections/staticwebapp.database.config.json"
    
  5. Open en controleer de inhoud van het bestand swa-db-connections/staticwebapp.database.config.json.

  6. Voer uw wijzigingen door in de opslagplaats en push ze naar de primaire vertakking. Hiermee wordt automatisch een nieuwe implementatie van de webtoepassing geactiveerd. Wacht tot deze laatste implementatie is voltooid voordat u verdergaat met deze handleiding.

De databaseverbinding configureren

Configureer vervolgens de databaseverbinding in Azure Portal om de statische web-app toegang te geven tot de database.

  1. Navigeer opnieuw naar de statische web-app in Azure Portal.

  2. Selecteer de optie Databaseverbinding in de sectie Instellingen van het resourcemenu. Selecteer vervolgens Bestaande database koppelen voor de productieomgeving.

    Schermopname van de optie Databaseverbinding op de pagina Azure Static Web Apps van Azure Portal.

  3. Gebruik deze instellingen in het dialoogvenster Database koppelen om de databaseverbinding te configureren.

    Montuur Waarde
    databasetype Selecteer hetzelfde databasetype dat u hebt gebruikt bij het maken van het DAB-configuratiebestand
    resourcegroep Selecteer de resourcegroep die u eerder in deze handleiding hebt gemaakt
    resourcenaam Selecteer de databaseresource die u wilt koppelen aan de statische web-app
    databasenaam Voer de naam van de database in
    verificatietype Selecteer het type verificatie dat u wilt gebruiken

    Schermopname van het dialoogvenster Database koppelen voor databaseverbindingen op de pagina Azure Static Web Apps van Azure Portal.

    Fooi

    U wordt aangeraden een verbindingsreeks te gebruiken die geen autorisatiesleutels bevat. Gebruik in plaats daarvan beheerde identiteiten en op rollen gebaseerd toegangsbeheer om de toegang tussen uw database en host te beheren. Zie Azure-services die gebruikmaken van beheerde identiteitenvoor meer informatie.

Het eindpunt van de gegevens-API testen

Controleer ten slotte of het eindpunt van de gegevens-API beschikbaar is in de statische web-app.

  1. Navigeer opnieuw naar de statische web-app in Azure Portal.

  2. Gebruik het veld URL in de sectie Essentials om opnieuw naar de website van de statische web-app te bladeren.

  3. Navigeer naar het /data-api pad voor de huidige actieve toepassing. Merk op dat het antwoord nog steeds aangeeft dat de DAB-container in orde is.

    { Healthy }
    
  4. Navigeer naar het https://<your-static-web-app-url>/data-api/<your-rest-path>/<your-entity-name> pad voor de huidige actieve toepassing. Hiermee wordt een HTTP GET- aanvraag voor die set entiteiten weergegeven. Bekijk het JSON-antwoord.

Resources opschonen

Wanneer u de voorbeeldtoepassing of resources niet meer nodig hebt, verwijdert u de bijbehorende implementatie en alle resources.

  1. Navigeer naar de resourcegroep met behulp van Azure Portal.

  2. Selecteer in de opdrachtbalk verwijderen.