Een API bouwen met Azure Functions
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 het als host fungeert voor uw web-app én API die is gebouwd met Azure Functions. Met Azure Static Web Apps worden de statische activa van uw web-app wereldwijd gedistribueerd en wordt uw API gehost in Azure Functions. Hierdoor profiteert u van de beschikbaarheid en snelheid die van wereldwijde distributie van uw web-app-activa. Wat u niet krijgt, is ook belangrijk.
U hoeft geen volledige server te configureren en te onderhouden voor uw front-end of back-end. Deze functie is de zoete plek voor Azure Static Web Apps: u krijgt het gemak om uw app en API te publiceren met minimale configuratie en onderhoud.
Azure Functions fungeert als uw route-eindpunten, vereist geen volledige back-end-server om te configureren of onderhouden, en biedt mogelijkheden voor automatisch in- en uitschalen op basis van de vraag. 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 terug 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 gebruikers items uit hun lijst ophalen, toevoegen, bijwerken en verwijderen. Het is dus logisch dat uw API eindpunten heeft die overeenkomen met deze behoeften.
Dit zijn de vier eindpunten:
| Methoden | Route-eindpunten | Volledig API-eindpunt |
|---|---|---|
| GET | products |
api/products |
| POSTEN | products |
api/products |
| PUT | products/:id |
api/products/:id |
| DELETE | products/:id |
api/products/:id |
U ziet dat uw HTTP GET-aanvragen worden doorgestuurd naar api/producten. 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 maken voor de web-app
Tot dusver hebt u een front-end-framework gebruikt. Binnenkort voegt u een API toe en verbindt u deze met uw front-end-app. De opslagplaats bevat een Api-project met een niet-voltooid Azure Functions-project en HTTP-eindpunten voor het plaatsen, posten en verwijderen van uw producten. De HTTP GET-functie ontbreekt in de API. U voltooit de API van het Azure Functions-project en voegt de ontbrekende functie toe. Vervolgens verbindt u uw API met uw front-endweb-app.
Voorbeeld van wijzigingen in uw web-app bekijken
Voordat u wijzigingen aanbrengt in een app, is het een goed idee om een nieuwe vertakking te maken voor de wijzigingen. U voert verschillende wijzigingen aan wanneer u de API voor uw app voltooit, dus u maakt een vertakking voor deze wijzigingen.
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 beide in een preview-URL. Met deze preview-URL kunt u uw web-app laten uitvoeren met Azure Static Web Apps, maar ook een tweede URL weergeven met de resultaten van uw pull-aanvraag.
De communicatie tussen uw web-app en API configureren
Wanneer u uw API lokaal uitvoert, 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 actie CORS (Cross-Origin Resource Sharing) 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 via een omgekeerde proxy met uw API op Azure kan communiceren. Een omgekeerde proxy zorgt ervoor dat uw web-app en API uit hetzelfde webdomein lijken te komen. U hoeft CORS dus alleen in te stellen wanneer u lokaal uitvoert.
Volgende stappen
U bent nu klaar om uw API te maken en uw HTTP-eindpunten voor uw lijst met apps te configureren.