Introduktion

  • 4 minuter

Scenario

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

Webbplatsen och API:erna måste vara säkra för att garantera kundsekretess. Dina användare kommer att finnas över hela världen och du vill att alla ska få fantastisk prestanda. Det skulle passa bättre med en lösning som tar bort så mycket av infrastrukturarbetet, inklusive utveckling och publicering, att du kan koncentrera dig på funktionerna och användarupplevelsen.

Du skulle kunna distribuera dina webbresurser till molnlagring, skapa och tilldela ditt eget SSL-certifikat, skapa ditt API på en molnserver, etablera en omvänd proxy som gör att din app kan ringa till API:t, distribuera appen globalt och konfigurera din egen CI/CD-process.

När du använder Azure Static Web Apps får du alltihop, körklart på en gång.

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. Vid användning av en traditionell webbserverarkitektur hanteras dessa filer från en enda server 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 att det går mycket snabbare att hantera filer eftersom filerna är fysiskt närmare anvä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.

Skärmbild som visar översikten över Static Apps.

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. 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. Så du kan hantera din statiska webbapp med eller utan ett API.

I de här modulövningarna ska du distribuera en app med ditt föredragna webbramverk.

Kommentar

Du kommer att distribuera en app utan API i den här modulen. Se avsnittet Nästa steg i den sista lektionen för information om nästa modul, där du distribuerar ett API tillsammans med din app.

Nyckelfunktioner

  • Globalt distribuerad webbvärdtjänst som placerar statiskt innehåll som HTML, CSS, Java Script och bilder närmare användarna
  • Stöd för integrerat API tillhandahålls av Azure Functions
  • Förstklassig GitHub- och Azure DevOps-integrering där lagringsplatsändringar utlöser byggen och distributioner.
  • 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 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. Det magiska med Azure Static Web Apps är att alla dessa varianter ”bara fungerar”.

Startkoden innehåller de fyra appar som du kommer att använda.

├ angular-app  👈 The Angular client app
├ 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:

  • Skapa och köra klientappen.
  • Bygga och distribuera webbappen automatiskt till Azure från en GitHub-lagringsplats med hjälp av GitHub Actions.
  • Utforska och starta din app – se nedan.

En skärmbild som illustrerar angular-exempelprogrammet.

En skärmbild som illustrerar react-exempelprogrammet.

En skärmbild som illustrerar svelte-exempelprogrammet.

En skärmbild som illustrerar Vue-exempelprogrammet.

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.