Distribuera en Blazor-app på Azure Static Web Apps

Azure Static Web Apps publicerar en webbplats i en produktionsmiljö genom att skapa appar från en GitHub-lagringsplats som stöds av en serverlös serverdel. Följande självstudie visar hur du distribuerar C# Blazor WebAssembly-appen som visar väderdata som returneras av ett serverlöst API.

Förutsättningar

• GitHub-konto
• Azure-konto. Om du inte har en Azure-prenumeration skapar du ett kostnadsfritt utvärderingskonto.

1. Skapa en lagringsplats

Den här artikeln använder en GitHub-malllagringsplats för att göra det enkelt för dig att komma igång. Mallen innehåller en startapp som du kan distribuera till Azure Static Web Apps.

1. Kontrollera att du är inloggad på GitHub och gå till följande plats för att skapa en ny lagringsplats: https://github.com/staticwebdev/blazor-starter/generate
2. Döp ditt repo till my-first-static-blazor-app.

2. Skapa en statisk webbapp

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

1. Gå till Azure-portalen.

2. Välj Skapa en resurs.

3. Sök efter Static Web Apps.

4. Välj Statisk webbapp.

5. Välj Skapa.

6. På fliken Grundläggande anger du följande värden.

   Egenskap	Värde
   Abonnemang	Ditt Azure-prenumerationsnamn.
   Resursgrupp	my-blazor-group
   Namn	my-first-static-blazor-app
   Plantyp	Kostnadsfri
   Region för Azure Functions API och mellanlagringsmiljöer	Välj en region som är närmast dig.
   Källa	GitHub

7. Välj Logga in med GitHub och autentisera med GitHub om du uppmanas att göra det.

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 huvud.

   Kommentar

   Om du inte ser några lagringsplatser kan du behöva auktorisera Azure Static Web Apps på GitHub. Bläddra sedan till din GitHub-lagringsplats och gå till Inställningar > Program > Auktoriserade OAuth-appar, välj Azure Static Web Apps och välj sedan Bevilja. För organisationens lagringsplatser måste du vara ägare till organisationen för att bevilja behörigheterna.

9. I avsnittet Bygginformation väljer du Blazor i listrutan Build Presets (Skapa förinställningar) och följande värden fylls i.

   Egenskap	Värde	beskrivning
   Appens plats	Client	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

10. Välj Granska + Skapa för att kontrollera att alla uppgifter är korrekta.

11. Välj Skapa för att starta skapandet av den statiska webbappen och etablera en GitHub Actions för distribution.

12. När distributionen är klar väljer du Gå till resurs.

13. Välj Gå till resurs.

3. Visa webbplatsen

Det finns två aspekter för 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 gå till din nya statiska webbapp måste distributionsversionen först köras.

Översiktsfönstret för Static Web Apps visar en serie länkar som hjälper dig att interagera med din webbapp.

1. Välj banderollen som säger, Klicka här för att kontrollera statusen för dina GitHub Actions-körningar för att se GitHub Actions som körs mot din lagringsplats. När du har kontrollerat 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.

   

4. Förstå programöversikten

Tillsammans utgör följande 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-serverdel.

Statisk Blazor-webbapp

Reservväg

Appen exponerar URL:er som /counter och /fetchdata, som mappar till specifika vägar i appen. Eftersom den här appen implementeras som en enda sida hanteras varje väg i index.html filen. För att säkerställa att förfrågningar till valfri sökväg returnerar index.html implementeras en fallback-rutt i filen staticwebapp.config.json som finns i klientprojektets rotkatalog.

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

JSON-konfigurationen säkerställer att begäranden till valfri väg i appen returnerar index.html sidan.

Distribuera från Visual Studio

Som ett alternativ till att distribuera via GitHub Actions kan du distribuera till Azure Static Web Apps direkt från Visual Studio. Skapa en publiceringsprofil för Azure Static Web Apps:

1. I Visual Studio Publicera-gränssnittet väljer du MålAzureSpecifikt målAzure Static Web Apps för att skapa en publiceringsprofil.

2. I konfigurationen för publiceringsprofil anger du Prenumerationsnamn. Välj en befintlig instans eller välj Skapa en ny instans. När du skapar en ny instans i Azure-portalens användargränssnitt Skapa statiska webbappar anger du Distributionsinformation>Source till Other. Vänta tills distributionen har slutförts i Azure-portalen innan du fortsätter.

3. I publiceringsprofilkonfigurationen väljer du Azure Static Web Apps-instansen från instansens resursgrupp. Välj Slutför för att skapa publiceringsprofilen. Om Visual Studio uppmanar till att installera Static Web Apps (SWA) CLI installerar du CLI genom att följa anvisningarna. SWA CLI kräver npm/Node.js (Visual Studio-dokumentation).

När publiceringsprofilen har skapats distribuerar du appen till Azure Static Web Apps-instansen med publiceringsprofilen genom att välja knappen Publicera.

Rensa resurser

Om du inte ska använda det här programmet kan du ta bort Azure Static Web Apps-instansen genom följande steg:

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

Nästa steg

Relaterade artiklar

• Konfigurera autentisering och auktorisering
• Konfigurera appinställningar
• Aktivera övervakning
• Azure CLI