Delen via

API-ondersteuning in Azure Static Web Apps met Azure-app Service

  • Artikel

Azure-app Service is een beheerd platform voor het hosten van webtoepassingen die code uitvoeren op servers. Azure-app Service ondersteunt veel runtimes en frameworks, waaronder Node.js, ASP.NET Core, PHP, Java en Python.

Wanneer u uw Azure-app Service-web-app koppelt aan uw statische web-app, worden aanvragen naar uw statische web-app met een route die begint met /api dezelfde route in de Azure-app Service-app geproxieerd.

Wanneer een App Service-app is gekoppeld aan een statische web-app, accepteert de App Service-app standaard alleen aanvragen die via de gekoppelde statische web-app worden geproxied. Een Azure-app Service-app kan slechts worden gekoppeld aan één statische web-app tegelijk.

Alle Azure-app Service-hostingabonnementen zijn beschikbaar voor gebruik met Azure Static Web Apps.

API-opties voor Static Web Apps omvatten de volgende Azure-services:

Zie het overzicht van API's voor meer informatie.

Notitie

Voor de integratie met Azure-app Service is het Static Web Apps Standard-plan vereist.

Back-endintegratie wordt niet ondersteund in statische Web Apps-pull-aanvraagomgevingen.

Vereisten

Als u een App Service wilt koppelen aan uw statische web-app, moet u een bestaande App Service-resource en een statische web-app hebben.

Bron Omschrijving
Azure App Service Als u nog geen web-app hebt, volgt u de stappen in de handleiding Een web-app maken in Azure .
Bestaande statische web-app Als u er nog geen hebt, volgt u de stappen in de aan de slag-handleiding om een statische Web-app van No Framework te maken.

voorbeeld

Overweeg een bestaand Azure-app Service-exemplaar dat een eindpunt beschikbaar maakt via de volgende locatie.

https://my-web-app.azurewebsites.net/api/getProducts

Zodra de koppeling is gemaakt, hebt u toegang tot hetzelfde eindpunt via het api pad vanuit uw statische web-app, zoals wordt weergegeven in deze voorbeeld-URL.

https://red-sea-123.azurestaticapps.net/api/getProducts

Beide URL's verwijzen naar hetzelfde API-eindpunt. Het eindpunt op de App Service moet het /api voorvoegsel hebben, omdat Static Web Apps overeenkomt met aanvragen voor /api en proxy's het volledige pad naar de gekoppelde resource.

Als u een web-app wilt koppelen als de API-back-end voor een statische web-app, voert u de volgende stappen uit:

  1. Ga in Azure Portal naar de statische web-app.

  2. Selecteer API's in het navigatiemenu.

  3. Zoek de omgeving waarnaar u het API Management-exemplaar wilt koppelen. Selecteer Koppeling.

  4. Selecteer Web-app in het resourcetype Back-end.

  5. Selecteer in Abonnement het abonnement met de Azure-app Service-app die u wilt koppelen.

  6. Selecteer in Resourcenaam de Azure-app Service-app.

  7. Selecteer Koppeling.

Wanneer het koppelingsproces is voltooid, worden aanvragen naar routes die /api beginnen met de gekoppelde App Service-app geproxied.

Toegang tot Azure-app Service beheren

Uw App Service-app is geconfigureerd met een id-provider die Azure Static Web Apps (Linked) alleen verkeer toestaat dat wordt geproxied via de statische web-app. Als u uw App Service-app toegankelijk wilt maken voor andere toepassingen, werkt u de verificatieconfiguratie bij om een andere id-provider toe te voegen of wijzigt u de beveiligingsinstellingen om niet-geverifieerde toegang toe te staan.

Volg deze stappen om een web-app los te koppelen van een statische web-app:

  1. Ga in Azure Portal naar de statische web-app.

  2. Selecteer API's in het navigatiemenu.

  3. Zoek de omgeving die u wilt ontkoppelen en selecteer de naam van de web-app.

  4. Selecteer Ontkoppelen.

Wanneer het ontkoppelingsproces is voltooid, worden aanvragen om te routes die beginnen, /api niet meer naar uw App Service-app geproxied.

Notitie

Om te voorkomen dat uw App Service-app per ongeluk beschikbaar wordt gemaakt voor anoniem verkeer, wordt de id-provider die door het koppelingsproces is gemaakt, niet automatisch verwijderd. U kunt de id-provider met de naam Azure Static Web Apps (gekoppeld) verwijderen uit de verificatie-instellingen van de App Service-app.

Verificatie verwijderen uit de App Service-resource

Volg deze stappen om de id-provider te verwijderen om uw App Service-resource in staat te stellen anoniem verkeer te ontvangen:

  1. Navigeer in Azure Portal naar de App Service-resource.

  2. Selecteer Verificatie in het navigatiemenu.

  3. Verwijder in de lijst met id-providers de id-provider die is gerelateerd aan de Static Web Apps-resource.

  4. Selecteer Verificatie verwijderen om verificatie te verwijderen en anoniem verkeer naar uw App Service-resource toe te staan.

Uw App Service-resource kan nu anoniem verkeer ontvangen.

Volgende stappen

API-overzicht