Skapa ett API med Azure Functions
Nu är det dags för dig att skapa ett API för din inköpslisteapp.
Azure Functions
En av de största fördelarna med Azure Static Web Apps är att den är värd för din webbapp och ett API som skapats med Azure Functions tillsammans. Azure Static Web Apps distribuerar globalt din webbapps statiska tillgångar och är värd för ditt API i Azure Functions. Med den här konfigurationen får du den tillgänglighet och hastighet som följer med global distribution av dina webbappstillgångar.
Det du inte får är också viktigt.
Du behöver inte en fullständig server för klientdelen eller serverdelen för att konfigurera och underhålla. Med Azure Static Web Apps får du en bra startpunkt: du får enkelt att publicera appen och API:et med minimal konfiguration och underhåll.
Azure Functions hanterar dina routslutpunkter, kräver inte en fullständig backendserver för att konfigurera eller underhålla och tillhandahåller automatisk skalning ut och in baserat på efterfrågan. De här funktionerna gör Azure Functions till en bra API-partner för din webbapp för inköpslistor som hanterar statiska tillgångar.
Azure Static Web Apps genererar en unik URL för din webbplats, som du hittar på fliken Översikt i portalen. API:et är tillgängligt via samma URL genom att lägga till /api- till URL:en.
Api:et för inköpslistan
Med din inköpslisteapp kan användarna hämta, lägga till, uppdatera och ta bort objekt från listan. Det är därför vettigt att api:et har slutpunkter som matchar dessa behov.
Här är de fyra slutpunkter som du skapar:
| Metoder | Routningsslutpunkter | Fullständig API-slutpunkt |
|---|---|---|
| FÅ | products |
api/products |
| POST | products |
api/products |
| STÄLLA | products/:id |
api/products/:id |
| TA BORT | products/:id |
api/products/:id |
Observera att http GET-begäranden dirigeras till api/products. Prefixet api är reserverat för dina API-slutpunkter i appen. Du kan definiera andra vägar som passar din webbplats, men API- pekar alltid på Azure Functions-appen.
Skapa ett API för webbappen
Hittills har du använt ett front-end-ramverk. Snart kan du lägga till ett API och ansluta det till klientdelsappen. Lagringsplatsen har en api-starter mapp som innehåller ett ofullständigt Azure Functions-projekt och HTTP-slutpunkter för PUT, POST och DELETE av dina produkter.
API:et saknar funktionen HTTP GET. Slutför Azure Functions-projektets API och lägg till funktionen som saknas. Anslut sedan ditt API till klientwebbappen.
Förhandsgranska ändringar i webbappen
Innan du gör ändringar i en app är det bra att skapa en ny gren för ändringarna. Eftersom du gör flera ändringar för att slutföra API:et för din app bör du skapa en gren för dessa ändringar.
När du har slutfört ändringarna vill du se dem köras innan du bestämmer dig för att sammanfoga ändringarna. När du har skapat en pull-begäran från din nya gren till huvudgrenen bygger GitHub Actions din app och ditt API och distribuerar dem till en förhandsgransknings-URL. Med den här funktionen kan du låta webbappen köras med Azure Static Web Apps, men även se en andra förhandsgranskningsinstans med resultatet från din pull-begäran.
Kommunicera mellan webbappen och API:et
När du kör ditt API lokalt med Azure Functions körs det som standard på port 7071. Webbappen körs på en annan lokal port. När din webbapp försöker göra en HTTP-begäran från sin port till din API:s port 7071 kallas begäran en resursdelning mellan olika ursprung (CORS). Webbläsaren förhindrar att HTTP-begäran slutförs om inte API-servern tillåter att begäran fortsätter.
När du publicerar till Azure Static Web Apps behöver du inte bekymra dig om CORS. Azure Static Web Apps konfigurerar automatiskt din app så att den kan kommunicera med ditt API i Azure med hjälp av en omvänd proxy. En omvänd proxy är det som gör att webbappen och API:et kan visas från samma webbdomän. Så du behöver bara konfigurera CORS när du kör lokalt.
Nästa steg
Nu är du redo att skapa ditt API och konfigurera DINA HTTP-slutpunkter för din inköpslisteapp.