Skapa ett API med Azure Functions

  • 3 minuter

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 webbappens statiska tillgångar globalt och är värd för ditt API i Azure Functions. Det innebär att du får hög tillgänglighet och hastighet tack vare den globala distributionen av webbappens tillgångar.

Det du inte får är också viktigt.

Du behöver inte konfigurera och underhålla en komplett server för klient- och serversidan. 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 vägslutpunkter, tillhandahåller automatisk skalning på begäran och kräver ingen komplett server som behöver konfigureras och underhållas. 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. Nu når API:et genom att lägga till /api i samma URL.

API:et för din inköpslista

De som använder din inköpslisteapp kan hämta, lägga till, uppdatera och ta bort objekt från sin lista. 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 Vägslutpunkter Fullständig API-slutpunkt
GET products api/products
POST products api/products
PUT products/:id api/products/:id
DELETE 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 för att tillgodose behoven för din webbplats, men api pekar alltid till Azure Functions-appen.

Skapa ett API för webbappen

Hittills har du använt ett klientramverk. 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 har ingen HTTP GET-funktion. Slutför Azure Functions-projektets API och lägg till funktionen som saknas. Anslut sedan ditt API till klientwebbappen.

Förhandsgranska ändringar i din webbapp

Innan du börjar göra ändringar i en app är det alltid 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 gjort ändringarna vill du kontrollera att de koden körs korrekt innan du bestämmer dig för att sammanfoga dem. När du har skapat en pull-begäran från din nya gren till huvudgrenen skapar GitHub-åtgärden appen och API:et 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.

Kommunikation mellan webbappen och API

När du kör ditt API lokalt med Azure Functions körs det på port 7071 som standard. Din webbapp 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 API:ets port 7071 kallas begäran resursdelning för korsande 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 på Azure med hjälp av en omvänd proxy. En omvänd proxy är det som gör att din webbapp och ditt API ser ut att komma från samma webbdomän. Därför behöver du bara ställa in CORS vid en lokal körning.

Nästa steg

Nu är du redo att skapa ditt API och konfigurera dina HTTP-slutpunkter för din inköpslisteapp.