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.

När du skapar appen är dina första problem att appen och API:et hanteras på ett säkert sätt, är globalt tillgängliga och publiceras automatiskt. I stället för att konfigurera en webbserver för att hantera 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 ofta med hjälp av WebAssembly-ramverk som Blazor och JavaScript-ramverk och -bibliotek. Dessa appar består av HTML, CSS, JavaScript och bildtillgångar. Under en traditionell webbserverarkitektur hanteras dessa filer från en enda server tillsammans med 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 ä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.

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. Varje gång 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 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örstklassig GitHub- och Azure DevOps-integrering som utlöser byggen och distributioner med varje ändring av lagringsplatsen.
  • Kostnadsfria SSL-certifikat, som förnyas automatiskt.
  • Unika förhandsgransknings-URL:er 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.

Den här modulen innehåller ett Blazor-exempelprogram och ett API skrivet i C#.

Det här ska du göra

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

  1. Skapa och kör ditt Blazor-program.
  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.

A set of four screenshots illustrating the four sample applications.

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.