Delen via


Quickstart: Data API Builder gebruiken met Azure SQL en Azure Static Web Apps

In deze snelstart implementeert u een AZD-sjabloon (Azure Developer CLI). Met de sjabloon wordt een statische Azure-web-app geïmplementeerd die als host fungeert voor de data-API-opbouwfunctie met behulp van de functie database verbindingen. De sjabloon bevat ook een voorbeeldtoepassing die u als uitgangspunt voor uw oplossingen kunt gebruiken.

Vereisten

Tip

U kunt deze quickstart ook openen in GitHub Codespaces, waarbij alle vereisten voor ontwikkelaars al zijn geïnstalleerd. Neem gewoon uw eigen Azure-abonnement mee. GitHub-accounts hebben gratis recht op opslag- en kernuren. Zie Inbegrepen opslag- en kernuren voor GitHub-accounts voor meer informatie.

Openen in GitHub Codespaces

De sjabloon implementeren

Implementeer eerst alle vereiste services met behulp van de AZD-sjabloon.

  1. Open een terminal in de hoofdmap van het project.

  2. Verifieer bij de Azure Developer CLI met behulp van azd auth login. Volg de stappen die zijn opgegeven door het hulpprogramma om te verifiëren bij de CLI met behulp van uw favoriete Azure-referenties.

    azd auth login
    
  3. Gebruik azd init om het project te initialiseren.

    azd init --template dab-azure-sql-quickstart
    

    Belangrijk

    Als u uitvoert in GitHub Codespaces, kunt u het --template argument veilig weglaten omdat de code al naar uw omgeving is gekloond.

  4. Configureer tijdens de initialisatie een unieke omgevingsnaam.

    Tip

    De omgevingsnaam wordt ook gebruikt als de naam van de doelresourcegroep. Voor deze quickstart kunt u overwegen om te gebruiken msdocs-swa-dab.

  5. Implementeer de Azure Static Web Apps-oplossing met behulp van azd up. Met de Bicep-sjablonen wordt een Azure SQL database geïmplementeerd, samen met de ondersteunende opslag-, identiteits- en hostservices. Er wordt een voorbeeldwebtoepassing geïmplementeerd op de webhost.

    azd up
    
  6. Selecteer tijdens het inrichtingsproces uw abonnement en gewenste locatie. Wacht totdat het inrichtingsproces is voltooid. Het proces kan ongeveer vijf minuten duren.

  7. Zodra de inrichting van uw Azure-resources is voltooid, voert de sjabloon een SUCCES-bericht uit, samen met de duur van de uitvoering.

    SUCCESS: Your application was provisioned and deployed to Azure in 5 minutes 0 seconds.
    

Verbinding met de database configureren

Gebruik nu de functie database verbindingen van Azure Static Web Apps om een verbinding te maken tussen de geïmplementeerde statische web-app en de geïmplementeerde database. Deze functie maakt naadloos gebruik van Data API Builder om verbinding te maken met een actieve Azure SQL database met behulp van de referenties die u opgeeft.

  1. Navigeer naar de Azure Static Web App-resource in de Azure Portal.

  2. Configureer de statische web-app om een databaseverbinding toe te voegen aan de Azure SQL-database met behulp van deze instellingen. Selecteer vervolgens Koppeling.

    Waarde
    Databasetype Azure SQL Database
    Abonnement Selecteer het abonnement dat u hebt gebruikt voor de AZD-implementatie
    Resourcegroep Selecteer de resourcegroep (omgeving) die u hebt gebruikt voor de AZD-implementatie
    Resourcenaam Selecteer de enige SQL-serverresource met het voorvoegsel van srvr-*
    Databasenaam adventureworkslt
    Verificatietype User-assigned managed identity
    Door een gebruiker toegewezen beheerde identiteit *Selecteer de enige beheerde identiteitsresource met het voorvoegsel van ua-id-*

    Schermopname van de databaseverbindingspagina voor een statische web-app in de Azure Portal.

  3. Selecteer nu de optie Bladeren op de resourcepagina om de actieve webtoepassing te bekijken.

    Schermopname van de actieve webtoepassing op Azure Static Web Apps.

Opschonen

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

  1. Verwijder de implementatie uit uw Azure-abonnement.

    azd down
    
  2. Verwijder de actieve coderuimte om uw opslag- en kernrechten te maximaliseren als u GitHub Codespaces gebruikt.

Volgende stap