Övning – Skapa en statisk webbapp i Azure

  • 5 minuter

I den här övningen skapar du en Azure Static Web Apps-instance som innefattar en GitHub-åtgärd som automatiskt bygger och publicerar din app.

Skapa en statisk webbapp

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

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. Kontrollera att du har aktiverat sandbox-miljön längst upp på den här sidan innan du fortsätter.

Den Azure-sandbox som du aktiverade gör att du kan använda Azure-tjänster utan kostnader.

Installera Azure Static Web Apps-tillägget för Visual Studio Code

  1. Gå till Visual Studio Marketplace och installera tillägget Azure Static Web Apps för Visual Studio Code.

  2. När tilläggsfliken läses in i Visual Studio Code väljer du knappen Installera .

  3. När installationen är klar väljer du Starta om för att uppdatera om du uppmanas att göra det.

Logga in till Azure i Visual Studio Code

  1. Logga in på Azure i Visual Studio Code genom att välja Visa>kommandopalett och ange Azure: Logga in.

    Viktigt!

    Logga in på Azure med samma konto som användes för att skapa sandbox-miljön. Sandbox-miljön ger åtkomst till en Concierge-prenumeration.

  2. Följ anvisningarna för att kopiera och klistra in koden i webbläsaren. Därmed autentiseras din Visual Studio Code-session.

Välj Din prenumeration.

  1. Öppna Visual Studio Code och välj Öppna fil > och öppna lagringsplatsen som du klonade till datorn i redigeraren.

  2. Kontrollera att du har filtrerat dina Azure-prenumerationer så att de inkluderar Concierge-prenumerationen genom att öppna kommandopaletten och ange Azure: Select Subscriptionsoch trycka på Retur.

  3. Välj Concierge-prenumeration och tryck på Retur.

    Skärmbild av VS Code som visar hur du filtrerar efter prenumeration.

Skapa en statisk webbapp

  1. Öppna Visual Studio Code och välj Öppna fil > för att öppna lagringsplatsen som du klonade till datorn i redigeraren.

  2. I Visual Studio Code väljer du Azure-logotypen i aktivitetsfältet för att öppna Azure-tilläggsfönstret.

    Skärmbild av Azure-logotypen i VS Code.

    Kommentar

    Azure- och GitHub-inloggning krävs. Om du inte redan har loggat in till Azure och GitHub från Visual Studio Code, uppmanas du i tillägget att logga in till båda under skapandeprocessen.

  3. Placera musen över rubriken Static Web Apps , högerklicka och välj Skapa statisk webbapp.

    Skärmbild som visar vart du ska gå för att skapa en webbapp.

  4. Ange my-first-static-web-app och tryck på Retur.

    Skärmbild som visar hur du skapar en statisk webbapp.

  5. Välj din plats och tryck på Retur.

    Skärmbild som visar hur du väljer en prenumeration.

  1. Välj alternativet Angular och tryck på Retur

    Skärmbild som visar alternativet angular valt.

  2. Ange /angular-app som plats för programkoden och tryck på Retur.

    Skärmbild som visar den kodplats som angetts som Angular-app.

  3. Ange dist/angular-app som utdataplats för bygget där filer skapas för produktion i din app och tryck på Retur.

    Skärmbild som visar hur du anger utdataplatsen för build för Angular.

  1. Välj alternativet React och tryck på Retur

    Skärmbild som visar alternativet React valt.

  2. Ange /react-app som plats för programkoden och tryck på Retur.

    Skärmbild som visar den kodplats som angetts som react-app.

  3. Ange build som den utdataplats där filer skapas för produktion i din app och tryck på Retur.

    Skärmbild som visar hur du anger platsen för build-utdata för React.

  1. Välj alternativet Svelte och tryck på Retur

    Skärmbild som visar alternativet svelte valt.

  2. Ange /svelte-app som plats för programkoden och tryck på Retur.

    Skärmbild som visar den kodplats som angetts som Svelte-app.

  3. Ange offentligt som utdataplats för bygget där filer skapas för produktion i din app och tryck på Retur.

    Skärmbild som visar hur du anger utdataplatsen för bygget för Svelte.

  1. Välj alternativet Vue och tryck på Retur

    Skärmbild som visar vue-alternativet valt.

  2. Ange /vue-app som plats för programkoden och tryck på Retur.

    Skärmbild som visar den kodplats som angetts som Vue-app.

  3. Ange dist som den utdataplats där filer skapas för produktion i din app och tryck på Retur.

    Skärmbild som visar hur du anger platsen för kompileringsutdata för Vue

Kommentar

Lagringsplatsen kan skilja sig lite från de som du kanske har använt tidigare. Den innehåller fyra olika appar i fyra olika mappar. Varje mapp innehåller en app som skapats i ett specifikt JavaScript-ramverk. Vanligtvis har du en app i lagringsplatsens rot och anger / för appsökvägen. Det här är ett bra exempel på varför Azure Static Web Apps överhuvudtaget låter dig konfigurera platser – du får full kontroll över hur appen byggs.

  1. När appen har skapats visas ett bekräftelsemeddelande i Visual Studio Code.

    Skärmbild av bekräftelsekoden som ber användaren att öppna åtgärder i GitHub eller Visa/redigera konfigurera.

    När distributionen pågår rapporterar Visual Studio Code-tillägget byggstatus till dig.

    Skärmbild av VS Code-användargränssnittet som visar väntar på distribution.

  2. Du kan visa förloppet för distributionen med GitHub Actions genom att expandera menyn Åtgärder .

    Skärmbild som visar hur du kontrollerar förloppet via GitHub Actions.

    När distributionen är klar kan du navigera direkt till din webbplats.

  3. Om du vill visa webbplatsen i webbläsaren högerklickar du på projektet i tillägget Static Web Apps och väljer Bläddra på webbplats.

    Skärmbild som visar hur du bläddrar till din statiska webbplats för webbappar.

Grattis! Du har distribuerat 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 välkomstsidan visas håller appen fortfarande på att distribueras.