Dela via

Distribuera en Blazor-app i Azure Static Web Apps

  • Artikel

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.

Kommentar

Anvisningar för hur du distribuerar en Blazor-app via Visual Studio finns i Distribuera en Blazor-app i Azure Static Web Apps.

Förutsättningar

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. Ge lagringsplatsen namnet 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.

    Property 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.
    Source 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.

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

    Property Värde beskrivning
    Applats Client Mapp som innehåller Blazor WebAssembly-appen
    API-plats Application Programming Interface 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 informationen är korrekt.

  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.

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

    Skärmbild som visar översiktsfönstret.

  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.

    Skärmbild av Blazor-webbsidan för Static Web Apps.

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.

Visual Studio-projekt beskrivning
Api C# Azure Functions-programmet implementerar API-slutpunkten som tillhandahåller väderinformation till Blazor WebAssembly-appen. WeatherForecastFunction returnerar en matris med WeatherForecast objekt.
Klient Projektet Blazor WebAssembly i klientdelen. En återställningsväg implementeras för att säkerställa att routningen på klientsidan fungerar.
Delad Innehåller vanliga klasser som refereras av både API- och klientprojekten, vilket gör att data kan flöda från API-slutpunkten till klientwebbappen. Klassen WeatherForecast delas mellan båda apparna.

Blazor statisk webbappSlutför Blazor-appen.

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 begäranden om en sökväg returneras index.htmlimplementeras en återställningsväg i staticwebapp.config.json filen som finns i klientprojektets rotmapp.

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

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

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 i gruppnamnet.
  4. Välj Ta bort.
  5. Välj Ja för att bekräfta borttagningsåtgärden.

Nästa steg

Autentisera och auktorisera