Delen via

Bring Your Own Functions in Azure Static Web Apps

  • Artikel

Azure Static Web Apps biedt API-integratie waarmee u front-endwebtoepassingen kunt bouwen die afhankelijk zijn van back-end-API's voor gegevens en services. De twee API-integratieopties zijn: beheerde functies en bring your own backends. Zie het overzicht voor meer informatie over de verschillen tussen deze opties.

In dit artikel wordt beschreven hoe u een bestaande Azure Functions-app koppelt aan een Azure Static Web Apps-resource.

Notitie

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

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

Vereisten

Als u een functie-app wilt koppelen aan uw statische web-app, moet u een bestaande Azure Functions-resource en een statische web-app hebben.

Bron Beschrijving
Azure Functions Als u er nog geen hebt, volgt u de stappen in de handleiding Aan de slag met Azure Functions .
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.

Opmerking

Overweeg een bestaande Azure Functions-app die een eindpunt beschikbaar maakt via de volgende locatie.

https://my-functions-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 eindpunt-URL's verwijzen naar dezelfde functie. Het eindpunt in de functie-app moet het /api voorvoegsel hebben, omdat Static Web Apps overeenkomt met aanvragen en /api proxy's voor het hele pad naar de gekoppelde resource.

Beheerde functies verwijderen uit uw Static Web Apps-resource (indien aanwezig)

Voordat u een bestaande Functions-app koppelt, moet u eerst de configuratie van uw statische web-app aanpassen om beheerde functies te verwijderen als u er een hebt.

  1. Stel api_location de waarde in op een lege tekenreeks ("") in het configuratiebestand van de werkstroom.

  1. Open uw Static Web Apps-exemplaar in Azure Portal.

  2. Selecteer API's in het menu Instellingen.

  3. Selecteer Koppeling in de rij Productie om het venster Nieuwe back-end koppelen te openen.

    Voer de volgende instellingen in.

    Instelling Weergegeven als
    Resourcetype back-end Selecteer Functie-app.
    Abonnement Selecteer de naam van uw Azure-abonnement.
    Resourcenaam Selecteer de naam van de Azure Functions-app.
    Back-endsite Selecteer de sitenaam voor de Azure-functie.

  4. Selecteer Koppeling.

De Azure Functions-app is nu toegewezen aan de /api route van uw statische web-app.

Belangrijk

Zorg ervoor dat u de api_location waarde instelt op een lege tekenreeks ("") in het configuratiebestand van de werkstroom voordat u een bestaande Functions-toepassing koppelt. Aanroepen gaan er ook vanuit dat de externe functie-app het standaardroutevoorvoegsel api behoudt. Veel apps verwijderen dit voorvoegsel in de host.json. Zorg ervoor dat het voorvoegsel aanwezig is in de configuratie, anders mislukt de aanroep.

Implementatie

U bent verantwoordelijk voor het instellen van een implementatiewerkstroom voor uw Azure Functions-app.

Volg deze stappen om een functie-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 functie-app.

  4. Selecteer Ontkoppelen.

Wanneer het ontkoppelingsproces is voltooid, worden aanvragen om te beginnen met routes /api niet meer geproxied naar uw Azure Functions-app.

Notitie

Om te voorkomen dat uw functie-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 functie-app.

Verificatie verwijderen uit de Azure Functions-resource

Volg deze stappen om de id-provider te verwijderen om uw Azure Functions-app in staat te stellen anoniem verkeer te ontvangen:

  1. Navigeer in Azure Portal naar de Azure Functions-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 Azure Functions-resource toe te staan.

Uw functie-app kan nu anoniem verkeer ontvangen.

Beveiligingsbeperkingen

  • Verificatie en autorisatie: als verificatie- en autorisatiebeleidsregels nog niet zijn ingesteld voor uw bestaande Functions-app, heeft de statische web-app exclusieve toegang tot de API. Als u uw Functions-app toegankelijk wilt maken voor andere toepassingen, voegt u een andere id-provider toe of wijzigt u de beveiligingsinstellingen om niet-geverifieerde toegang toe te staan.

    Notitie

    Als u verificatie en autorisatie inschakelt in uw gekoppelde Functions-app, moet deze gebruikmaken van Azure-app serviceverificatie en autorisatieprovider versie 2.

  • Vereiste openbare toegankelijkheid: een bestaande Functions-app moet de volgende beveiligingsconfiguraties niet toepassen.

    • Het IP-adres van de Functions-app beperken.
    • Verkeer beperken via private link of service-eindpunten.

  • Functietoegangssleutels: Als uw functie een toegangssleutel vereist, moet u de sleutel aanroepen van de statische app naar de API opgeven.

Beperkingen

  • Er is slechts één Azure Functions-app beschikbaar voor één statische web-app.
  • De api_location waarde in de werkstroomconfiguratie moet worden ingesteld op een lege tekenreeks.
  • Niet ondersteund in statische web-apps-pull-aanvraagomgevingen.
  • Hoewel uw Azure Functions-app kan reageren op verschillende triggers, heeft de statische web-app alleen toegang tot functies via HTTP-eindpunten.

Volgende stappen

Een API toevoegen