Självstudie: Skapa en statisk webbapp med Blazor i Azure Static Web Apps

Azure Static Web Apps publicerar en webbplats i en produktionsmiljö genom att skapa appar från en GitHub lagringsplats. I den här självstudien distribuerar du en webbapp till Azure Static Web Apps med hjälp av Azure Portal.

Om du inte har en Azure-prenumeration kan du skapa ett kostnadsfritt utvärderingskonto.

Förutsättningar

• GitHub-konto
• Azure-konto

Programöversikt

Azure Static Web Apps kan du skapa statiska webbprogram som stöds av en serverlös serverdel. Följande självstudie visar hur du distribuerar ett C# Blazor WebAssembly-program som visar väderdata som returneras av ett serverlöst API.

Appen som visas i den här självstudien består av tre olika Visual Studio projekt:

• API: C#-Azure Functions som implementerar API-slutpunkten som tillhandahåller väderinformation till Blazor WebAssembly-appen. WeatherForecastFunction returnerar en matris med WeatherForecast objekt.

• Klient: Blazor WebAssembly-projektet på klientsidan. En reservväg implementeras för att säkerställa att routning på klientsidan fungerar.

• Delad: Innehåller vanliga klasser som refereras av både API- och klientprojekt som gör att data kan flöda från API-slutpunkten till klientwebbappen. Klassen WeatherForecast delas mellan båda apparna.

Tillsammans utgör dessa projekt de delar som krävs för att skapa ett Blazor WebAssembly-program som körs i webbläsaren som stöds av en Azure Functions API-backend.

Reservväg

Programmet exponerar URL:er som /counter och /fetchdata som mappar till specifika vägar i programmet. Eftersom den här appen implementeras som ett ensidesprogram, betjänas varje väg index.html filen. För att säkerställa att begäranden om sökvägsreturindex.html en återställningsväg implementeras i staticwebapp.config.json-filen som finns i klientprojektets rotmapp.

{
  "navigationFallback": {
    "rewrite": "/index.html"
  }
}

Konfigurationen ovan säkerställer att begäranden till valfri väg i appen returnerar index.html sidan.

Klona en lagringsplats

I den här artikeln GitHub en malldatabas för att göra det enkelt för dig att komma igång. Mallen innehåller en startapp som kan distribueras till Azure Static Web Apps.

1. Kontrollera att du är inloggad på GitHub navigera till följande plats för att skapa en ny lagringsplats:
   • https://github.com/staticwebdev/blazor-starter/generate
2. Ge lagringsplatsen namnet my-first-static-blazor-app.

Skapa en statisk webbapp

Nu när lagringsplatsen har skapats skapar du en statisk webbapp från Azure Portal.

1. Gå till Azure Portal.

2. Välj Skapa en resurs.

3. Sök efter Static Web Apps.

4. Välj Static Web Apps.

5. Välj Skapa.

6. Ange följande värden på fliken Grundläggande inställningar.

   Egenskap	Värde
   Prenumeration	Namnet på din Azure-prenumeration.
   Resursgrupp	my-blazor-group
   Namn	my-first-static-blazor-app
   Plantyp	Kostnadsfri
   Region för Azure Functions API och mellanlagringsmiljöer	Välj den region som är närmast dig.
   Källa	GitHub

7. Välj Logga in med GitHub och autentisera med GitHub.

8. Ange följande GitHub värden.

   Egenskap	Värde
   Organisation	Välj önskad GitHub organisation.
   Lagringsplats	Välj my-first-static-blazor-app.
   Gren	Välj main.

9. I avsnittet Build Details (Bygginformation) väljer du Blazor i listrutan Build Presets (Byggförinställningar) så fylls följande värden i.

   Egenskap	Värde	Beskrivning
   Applats	Klient	Mapp som innehåller Blazor WebAssembly-appen
   API-plats	Api	Mapp som innehåller Azure Functions appen
   Utdataplats	wwwroot	Mapp i byggutdata som innehåller det publicerade Blazor WebAssembly-programmet

Granska och skapa

1. Välj knappen Granska + skapa för att kontrollera att informationen stämmer.

2. Välj Skapa för att starta skapandet av App Service Static Web App och etablera en GitHub åtgärd för distribution.

3. När distributionen är klar klickar du på Gå till resurs.

4. Välj Gå till resurs.

   

Visa webbplatsen

Det finns två aspekter av att distribuera en statisk app. Den första etablerar de underliggande Azure-resurserna som utgör din app. Den andra är ett GitHub Actions-arbetsflöde som bygger och publicerar din app.

Innan du kan navigera till den nya statiska webbappen måste distributionsbygget först köras klart.

Fönstret Static Web Apps översikt visar en serie länkar som hjälper dig att interagera med din webbapp.

1. Om du klickar på banderollen där det står Klicka här för att kontrollera statusen för dina GitHub Actions-körningar kommer du till GitHub åtgärder som körs mot din lagringsplats. När du har verifierat att distributionsjobbet är klart kan du gå till din webbplats via den genererade URL:en.

2. När GitHub actions-arbetsflödet är klart kan du välja URL-länken för att öppna webbplatsen på den nya fliken.

Rensa resurser

Om du inte kommer att fortsätta att använda det här programmet kan du ta bort Azure Static Web Apps-instansen med följande steg:

1. Öppna Azure-portalen.
2. Sök efter my-blazor-group från det översta sökfältet.
3. Välj gruppnamnet.
4. Välj knappen Ta bort.
5. Välj Ja för att bekräfta borttagningsåtgärden.

Nästa steg