Övning – Skapa en statisk webbapp i Azure

  • 5 minuter

I den här övningen skapar du en Azure Static Web Apps-instans, inklusive en GitHub-åtgärd som automatiskt skapar och publicerar ditt program.

Skapa en statisk webbapp

Nu när du har skapat din GitHub-lagringsplats kan du skapa en Static Web Apps-instans från Azure Portal.

Den här modulen använder Sandbox-miljön i Azure för att ge dig en kostnadsfri, tillfällig Azure-prenumeration som du kan använda för att slutföra övningen. Innan du fortsätter, se till att du aktiverar sandbox överst på den här sidan.

  1. Logga in på Azure-portalen med samma konto som du använde när du aktiverade sandbox-miljön.

  2. På Startsidan för Azure går du till Azure-tjänster och väljer Skapa en resurs. Fönstret Skapa en resurs visas.

  3. I sökrutan på Marketplace söker du efter och väljer Statisk webbapp. Fönstret Statisk webbapp visas.

  4. Välj Skapa. Fönstret Skapa statisk webbapp visas. Konfigurera din nya app och länka den till din GitHub-lagringsplats.

  5. På fliken Grundläggande anger du följande värden för varje inställning.

    Inställning Värde
    Projektinformation
    Prenumeration Concierge-prenumeration
    Resursgrupp [Resursgruppsnamn för sandbox-miljö]
    Information om statisk webbapp
    Name Ge programmet ett namn. Giltiga tecken är a-z (skiftlägesokänsligt), 0-9 och -.
    Hostingplan
    Prisnivå för ditt program Välj Kostnadsfri
    Information om Azure Functions och iscensättningsdetaljer
    Region för Azure Functions API och mellanlagringsmiljöer Välj den region som är närmast dig
    Distributionsinformation
    Källa Välj GitHub
    GitHub-konto Välj Logga in med GitHub. Fönstret Auktorisera Azure Static Web Apps visas. Välj Auktorisera Azure-App-Service-Static-Web-Apps. Ange ditt lösenord.
    Organisation Välj den organisation där du skapade lagringsplatsen
    Lagringsplats my-static-blazor-app
    Filial huvud
    Byggdetaljer
    Skapa förinställningar Blazor
    App-plats Klient
    API-plats Api
    Utdataplats wwwroot

  6. Välj Granska + skapa>Skapa.

  7. När distributionen är klar väljer du Gå till resurs. Ditt fönster för Statisk webbapp visas.

Granska GitHub-åtgärden

I det här skedet skapas Static Web Apps-instansen i Azure, men appen har inte distribuerats ännu. GitHub-åtgärden som Azure skapar på lagringsplatsen körs automatiskt för att utlösa den första versionen och distributionen av din app, men det tar några minuter att slutföra den.

Du kan kontrollera statusen för din bygg- och distributionsåtgärd genom att välja följande länk för att gå till sidan Åtgärder på din GitHub-lagringsplats:

Skärmbild som visar hur du bläddrar för att se förloppet för GitHub Actions-arbetsflödet.

När du är där:

  1. Välj Azure Static Web Apps CI/CD.

  2. Välj incheckningen med titeln ci: lägg till arbetsflödesfilen för Azure Static Web Apps.

  3. Välj länken Skapa och distribuera jobb

Härifrån kan du följa förloppet för din app när den skapas.

Visa webbplats

När din GitHub-åtgärd har byggt och publicerat din webbapp, kan du bläddra för att se den app som körs.

Markera URL-länken i Azure-portalen för att gå till appen i webbläsaren.

Din applikation är nu globalt tillgänglig, men säger fortfarande Läser in data eftersom det ännu inte finns någon data eller något API. Du lägger till API:et för din webbapp i nästa avsnitt.

Grattis! Du distribuerade din första app till Azure Static Web Apps!

Kommentar

Oroa dig inte om du ser en webbsida som säger att appen inte har skapats och distribuerats ännu. Vänta en liten stund och uppdatera sedan webbläsaren. GitHub-åtgärden körs automatiskt när Azure Static Web Apps-instansen skapas. Om startsidan visas är appen fortfarande under distribution.

Nästa steg

Appen saknar ett API för inköpslistan. Därefter utforskar du hur du lägger till ett Azure Functions-API i din app som publicerar till Azure tillsammans med de statiska tillgångarna.