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 tjänsten är värd för både din webbapp och ett API som skapats med Azure Functions! 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 fullständig server för klientdelen eller serverdelen. Den här funktionen är den söta platsen för Azure Static Web Apps: du får enkelt att publicera din app och DITT API 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. API:et är tillgängligt via samma URL genom att lägga /api till url:en.
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 slutpunkterna:
| 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 som passar din webbplats behov, men api pekar alltid på Azure Functions-appen.
Skapa ett API för webbappen
Hittills har du använt ett klientramverk. Snart lägger du till ett API och ansluter det till klientdelsappen. Din lagringsplats innehåller ett Api-projekt med ett ofullständigt Azure Functions-projekt och HTTP-slutpunkter för PUT-, POST- och DELETE-åtgärder för dina produkter. API:et har ingen HTTP GET-funktion. Du slutför Azure Functions-projektets API och lägger till funktionen som saknas och ansluter sedan DITT API till klientwebbappen.
Förhandsgranska ändringar i webbappen
Innan du börjar göra ändringar i en app är det alltid bra att skapa en ny gren för ändringarna. Du gör flera ändringar när du slutför API:et för din app, så du skapar en gren för dessa ändringar.
När du har genomfö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 skapar GitHub-åtgärden appen och API:et och distribuerar dem båda till en förhandsversions-URL. Med den här förhandsgransknings-URL:en kan du låta webbappen köras med Azure Static Web Apps, men även visa en andra URL med resultatet från pull-begäran.
Konfigurera kommunikationen mellan webbappen och API:et
När du kör ditt API lokalt 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 åtgärden 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.