Introduktion

  • 2 minuter

Ditt företag lanserar en webbapp med en inköpslista. Användarna kan lägga till, redigera, visa och ta bort objekt från sina listor via webbplatsen.

Det är viktigt att appen och API:et lagras säkert, att de är tillgängliga globalt och att de publiceras automatiskt. I stället för att bygga upp en webbserver för att hantera alla dessa problem bestämmer du dig för att använda en värdlösning som hanterar dina tillgångar och API enkelt, utan mycket konfiguration.

Vad är Azure Static Web Apps?

Azure Static Web Apps löser svåra problem, från källkod till global tillgänglighet.

Medan du fortsätter att fokusera på att utveckla din app bygger och är Azure Static Web Apps automatiskt värd för den från GitHub eller Azure DevOps.

Statiska webbappar skapas vanligtvis med hjälp av bibliotek och ramverk som Angular, React, Svelte eller Vue. Dessa appar består av HTML, CSS, JavaScript och bildtillgångar. I en traditionell webbserverarkitektur hanteras dessa filer från en enskild server längs alla nödvändiga API-slutpunkter.

Med Azure Static Web Apps separeras statiska tillgångar från en traditionell webbserver och hanteras i stället från olika platser runtom i världen. Den här distributionen gör det snabbare att hantera filer eftersom filerna är fysiskt närmare slutanvändarna. API-slutpunkter, som är valfria, är värdbaserade med en serverlös arkitektur, vilket gör att du inte behöver ha någon server.

Modellen för Azure Static Web Apps innebär att du får exakt det du behöver, varken mer eller mindre.

Diagram showing the static Apps overview model.

När du skapar en Azure Static Web Apps-resurs konfigurerar Azure ett GitHub Actions- eller Azure DevOps-arbetsflöde i appens källkodslagringsplats. Arbetsflödet övervakar en valfri gren. När du skickar incheckningar eller skapar pull-begäranden till den övervakade grenen skapar och distribuerar arbetsflödet automatiskt din app och dess API till Azure.

Azure är värd för och hanterar din webbapp. Azure Functions ger API-funktioner på serverdelen med automatisk skalning efter behov.

Valfria API:er

Azure Static Web Apps är den idealiska lösningen för att betjäna rent statiskt innehåll, men har också utmärkt stöd för statiska webbappar som behöver API: er i bakgrunden. Du kan vara värd för din statiska webbapp med eller utan ett API.

Azure är värd för och hanterar din webbapp medan Azure Functions ger API-funktioner på serverdelen med automatisk skalning efter behov.

Nyckelfunktioner

  • Globalt distribuerad webbvärd placerar statiskt innehåll som HTML, CSS, JavaScript och bilder närmare dina användare.
  • Integrerat API-stöd som tillhandahålls av Azure Functions.
  • Förstklassiga GitHub- och Azure DevOps-integreringsändringar i lagringsplatsens utlösarversioner och distributioner.
  • Kostnadsfria SSL-certifikat, som förnyas automatiskt.
  • Unika url:er för förhandsversion för att förhandsgranska pull-begäranden.

Utbildningsmål

I den här modulen skapar, ändrar och distribuerar du en webbapp och ett API till Azure Static Web Apps.

Välj din egen väg

Den här modulen innehåller fyra varianter av exempelprogrammet som du kan välja mellan: Angular, React, Svelte och Vue. Kraften i Azure Static Web Apps är att alla dessa smaker bara fungerar.

Startkoden innehåller de fyra apparna och startpunkten för ett API som du använder senare.

├ angular-app  👈 The Angular client app
├ api-starter  👈 The API starter app. You use this later.
├ react-app    👈 The React client app
├ svelte-app   👈 The Svelte client app
└ vue-app      👈 The Vue client app

Det här ska du göra

När du har valt din klientapp kommer du att:

  1. Bygga och distribuera webbappen automatiskt till Azure från en GitHub-lagringsplats med hjälp av GitHub Actions.
  2. Skapa ditt API med Azure Functions.
  3. Ändra webbappen för att göra HTTP-begäranden till ditt API.
  4. Bygga och distribuera webbappen automatiskt till Azure från en GitHub-lagringsplats med hjälp av GitHub Actions.
  5. Slutligen utforskar och startar du programmet, som du ser i följande bild.

A screenshot illustrating the angular sample application.

A screenshot illustrating the react sample application.

A screenshot illustrating the svelte sample application.

A screenshot illustrating the vue sample application.

Nästa steg

Nu kanske du tänker att du behöver skapa Azure-resurserna först, men Azure Static Web Apps är anpassat till ditt normala arbetsflöde. Det är mer naturligt att börja med koden i GitHub först och sedan skapa resurser i Azure.