Een API bouwen met Azure Functions

  • 3 minuten

Nu is het tijd om een API te maken voor uw boodschappenlijst-app.

Azure Functions

Een van de grootste voordelen van Azure Static Web Apps is dat uw web-app en een API die samen met Azure Functions is gebouwd, worden gehost. Azure Static Web Apps distribueert wereldwijd de statische assets van uw web-app en host uw API in Azure Functions. Met deze installatie krijgt u de beschikbaarheid en snelheid die wordt geleverd met wereldwijde distributie van uw web-app-assets.

Wat je niet krijgt, is ook belangrijk.

U hebt geen volledige server nodig voor uw front-end of back-end om deze te configureren en te onderhouden. Met Azure Static Web Apps hebt u de sweet spot bereikt: u krijgt het gemak om uw app en API te publiceren met minimale configuratie en onderhoud.

Azure Functions dient uw route-eindpunten, vereist geen volledige back-endserver om te configureren of te onderhouden en biedt automatisch uitschalen en inschalen op basis van aanvraag. Dankzij deze functies is Azure Functions een geweldige API-partner voor uw web-app voor boodschappenlijsten die statische assets bedient.

Azure Static Web Apps genereert een unieke URL voor uw site, die u kunt vinden op het tabblad Overzicht in de portal. De API is beschikbaar via dezelfde URL door deze /api toe te voegen aan de URL.

Uw boodschappenlijst-API

Met uw boodschappenlijst-app kunnen personen items uit hun lijst ophalen, toevoegen, bijwerken en verwijderen. Het is dus logisch dat uw API eindpunten moet hebben die voldoen aan deze behoeften.

Dit zijn de vier eindpunten die u maakt:

Methoden Route-eindpunten Volledig API-eindpunt
TOEVOEGEN products api/products
VERZENDEN products api/products
ZETTEN products/:id api/products/:id
VERWIJDEREN products/:id api/products/:id

U ziet dat uw HTTP GET-aanvragen worden doorgestuurd naar api/products. Het api voorvoegsel is gereserveerd voor uw API-eindpunten in de app. U kunt eventuele andere routes definiëren om aan de behoeften van uw site te voldoen, maar api verwijst altijd naar de Azure Functions-app.

Een API voor de web-app maken

Tot nu toe hebt u een front-endframework gebruikt. Binnenkort kunt u een API toevoegen en deze verbinden met uw front-end-app. Uw opslagplaats heeft een api-starter map met een onvolledig Azure Functions-project en HTTP-eindpunten voor PUT, POST en DELETE van uw producten. De API ontbreekt de HTTP GET-functie. Voltooi de API van het Azure Functions-project en voeg de ontbrekende functie toe. Verbind vervolgens uw API met uw front-endweb-app.

Voorbeelden van wijzigingen in uw web-app bekijken

Voordat u wijzigingen aanbrengt in een app, is het raadzaam om een nieuwe vertakking te maken voor de wijzigingen. Omdat u verschillende wijzigingen aanbrengt om de API voor uw app te voltooien, moet u een vertakking voor deze wijzigingen maken.

Nadat u de wijzigingen hebt aangebracht, wilt u deze zien worden uitgevoerd voordat u besluit de wijzigingen samen te voegen. Zodra u een pull-aanvraag van uw nieuwe vertakking naar de hoofdvertakking hebt gemaakt, bouwt de GitHub Action uw app en API en implementeert deze naar een preview-URL. Met deze functie kunt u uw web-app laten draaien met Azure Static Web Apps, maar ook een tweede preview-exemplaar bekijken met de resultaten van uw pull-aanvraag.

Communiceren tussen uw web-app en API

Wanneer u uw API lokaal uitvoert met Azure Functions, wordt deze standaard uitgevoerd op poort 7071. Uw web-app wordt uitgevoerd op een andere lokale poort. Wanneer uw web-app een HTTP-aanvraag probeert te doen van de poort naar poort 7071 van uw API, wordt de aanvraag Cross-Origin Resource Sharing (CORS) genoemd. Uw browser voorkomt dat de HTTP-aanvraag wordt voltooid, tenzij de API-server de aanvraag toestaat om door te gaan.

Wanneer u publiceert naar Azure Static Web Apps, hoeft u zich geen zorgen te maken over CORS. Met Azure Static Web Apps wordt uw app automatisch geconfigureerd, zodat deze kan communiceren met uw API in Azure met behulp van een omgekeerde proxy. Een omgekeerde proxy is wat ervoor zorgt dat uw web-app en API afkomstig zijn van hetzelfde webdomein. U hoeft CORS dus alleen in te stellen wanneer u lokaal werkt.

Volgende stappen

U bent nu klaar om uw API te maken en uw HTTP-eindpunten te configureren voor uw boodschappenlijst-app.