Övning – Kom igång

  • 7 minuter

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

I den här modulen används resurser som görs tillgängliga via sandbox-miljön, vilket ger kostnadsfri, tillfällig åtkomst till en Azure-prenumeration, tillsammans med de resurser som du behöver för att slutföra övningarna. Se till att aktivera sandboxen, testmiljön, högst upp på denna sida. När du går igenom övningarna i den här modulen är varje enhet beroende av innehåll som du skapade i en tidigare övning. Därför väljer du ett JavaScript-ramverk och använder det för alla efterföljande övningar.

Skapa en lagringsplats

Börja med att skapa en lagringsplats med hjälp av en GitHub-mall. Det finns en serie lagringsplatsmallar som innehåller en startapp som implementeras i olika frontend-ramverk.

  1. Gå till GitHub-sidan 'skapa från mall' för att öppna mallarkivet.

  2. Om du uppmanas att ägareväljer du ett av dina GitHub-konton.

  3. För lagringsplatsnamnanger du my-static-web-app-and-api.

  4. Välj Skapa lagringsplats från mallen.

    När du skapar projektet från en mall skapar GitHub lagringsplatsen i bakgrunden.

Kör appen lokalt

Nu har du en GitHub-lagringsplats med namnet my-static-web-app-and-api- i ditt GitHub-konto. Sedan klonar du GitHub-lagringsplatsen och kör koden lokalt på datorn.

  1. Öppna ett terminalfönster på datorn.

    Om du använder Windows kan du ange cmd i sökrutan i systemfältet.

  2. Om du vill klona lagringsplatsen till datorn klistrar du in följande kod i kommandotolkens fönster.

    Ersätt <YOUR_GITHUB_USERNAME> med ditt GitHub-användarnamn.

    git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-and-api

    Not

    Om du har problem med att kopiera till kommandotolkens terminal högerklickar du på ikonen i namnlisten och på fliken Egenskaper kontrollerar du att Använd Ctrl+Skift+C/V som Kopiera/klistra in är markerat.

  3. Ändra till katalogen för källkoden som du klonade.

    cd my-static-web-app-and-api

  4. Gå till katalogen för det frontend-ramverk du föredrar.

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  5. Installera programberoendena.

    npm install

  6. Kontrollera att den senaste versionen av varje beroende är installerad med följande kommando.

    npm audit fix

  7. Kör klientprogrammet för användargränssnittet.

    npm start

    npm start

    npm run dev

    npm run serve

Bläddra till din app

När programpaketet genereras och kompileras öppnas en webbläsarflik automatiskt för att visa programmet som körs lokalt.

Lokal värd för angular är http://localhost:4200.

Skärmbild av den lokala servern för din Angular-webbapp.

Lokal värd för react är http://localhost:3000.

Skärmbild av den lokala värddatorn för din React webbapp.

Lokal värd för Svelte är http://localhost:5000.

Skärmbild av den lokala hosten för din Svelte-webbapp.

Den lokala värd för Vue är http://localhost:8080.

Skärmbild av den lokala värd för din Vue-webbapp.

Din app bör säga Läser in data ... eftersom det inte finns några data eller API ännu. Du lägger till API:et för webbappen senare under den här lektionen.

I terminalen trycker du på Ctrl+C för att stoppa batchjobbet.

Grattis! Du har skapat programmet och sett det köras lokalt i webbläsaren. Därefter kan du publicera ditt program till Azure Static Web Apps.

Skapa en statisk webbapp

Du har skapat en egen GitHub-lagringsplats. Nu kan du skapa en egen statisk webbapp med hjälp av Azure Static Web Apps-tillägget för Visual Studio Code.

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

  1. Öppna Visual Studio Code.

  2. På den översta menyn väljer du Visa>-tilläggoch anger Azure Static Web Apps i sökrutan.

  3. När tilläggsfliken öppnas i Visual Studio Code väljer du Installera.

Öppna programmappen

  1. Välj F1- för att öppna Visual Studio Code-kommandopaletten.

  2. Ange fil: Öppna mapp....

  3. Välj mappen my-static-web-app-and-api.

  4. Välj Öppna för att öppna mappen i Visual Studio Code.

Logga in på Azure i Visual Studio Code

  1. Välj F1- för att öppna Visual Studio Code-kommandopaletten.

  2. Ange Azure: Logga in och följ anvisningarna för att autentisera.

    Viktig

    Logga in på Azure med samma konto som du använde för att aktivera sandbox-miljön i webbläsaren. Med samma konto blir Concierge-prenumeration tillgänglig, vilket ger dig åtkomst till kostnadsfria Azure-resurser under den här självstudien.

Välj din prenumeration

  1. Välj F1- för att öppna Visual Studio Code-kommandopaletten.

  2. Ange Azure: Välj Prenumerationeroch avmarkera alla val förutom Concierge-prenumeration.

    Skärmbild som visar att concierge-prenumerationen har valts.

Sammanfoga ändringar

När du installerade programberoendena uppdaterades några av filerna i projektet under processen. För att kunna fortsätta måste du kommitta ändringarna till repositoryn.

  1. Välj F1- för att öppna Visual Studio Code-kommandopaletten.

  2. Ange och välj Git Commit All.

  3. Ange första commit överst i filen.

  4. Spara och stäng git-incheckningsfilen.

    Oroa dig inte för att synkronisera dina ändringar med servern just nu. Uppdateringarna kopieras upp till GitHub när du publicerar den statiska webbappen.

Skapa den statiska webbappen

Aktuella autentiserade Azure- och GitHub-sessioner krävs för att skapa en statisk webbapp. Om du inte redan är inloggad på båda leverantörerna uppmanas du att logga in under skapandeprocessen.

  1. Välj F1- för att öppna Visual Studio Code-kommandopaletten.

  1. Ange och välj Azure Static Web Apps: Skapa statisk webbapp....

    Ange följande värden för resten av kommandopaletten.

    Snabb Värde
    Abonnemang Välj Concierge-prenumeration
    Namn Ange my-static-web-app-and-api
    Region Välj den region som är närmast dig
    Förinställning Välj Angular
    Plats för programkod Ange angular-app
    Utdataplats Ange dist/angular-app

  1. Ange och välj Azure Static Web Apps: Skapa statisk webbapp....

    Ange följande värden för resten av kommandopalettens uppmaningar.

    Omedelbar Värde
    Abonnemang Välj Concierge-prenumeration
    Namn Ange my-static-web-app-and-api
    Region Välj den region som är närmast dig
    Förinställd Välj React
    Plats för programkod Ange react-app
    Utdataplats Ange dist

  1. Ange och välj Azure Static Web Apps: Skapa statisk webbapp....

    Ange följande värden för den återstående delen av kommandopaletten.

    Snabb Värde
    Abonnemang Välj Concierge-prenumeration
    Namn Ange my-static-web-app-and-api
    Region Välj den region som är närmast dig
    Förinställd Välj Svelte
    Plats för programkod Ange svelte-app
    Utdataplats Ange offentliga

  1. Ange och välj Azure Static Web Apps: Skapa statisk webbapp....

    Ange följande värden för de återstående förfrågningarna i kommandopaletten.

    Snabb Värde
    Abonnemang Välj Concierge-prenumeration
    Namn Ange my-static-web-app-and-api
    Region Välj den region som är närmast dig
    Förinställd Välj Vue
    Plats för programkod Ange vue-app
    Utdataplats Ange dist

Not

Den här lagringsplatsen skiljer sig från andra projekt som du kanske har använt tidigare. Det här projektet innehåller fyra olika appar i fyra olika mappar. Varje mapp innehåller en app som skapats i ett annat JavaScript-ramverk. Normalt skulle du bara ha en app i roten på lagringsplatsen och därmed standard / för platsen för appsökvägen. Det här är ett bra exempel på hur Azure Static Web Apps låter dig konfigurera platser i första hand – du har fullständig kontroll över hur appen skapas.

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

    Skärmbilder av popup-fönstret Öppna åtgärder i GitHub eller Visa/Redigera konfiguration.

    När du konfigurerar bygget rapporterar Visual Studio Code byggstatusen till dig.

    Skärmbild som visar produktionsstatus som 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 ser 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 använder Visual Studio Code-tillägget för att bläddra i den statiska webbappen.

    Din app bör säga Läser in data ... eftersom det inte finns några data eller API ännu. Du lägger till API:et för webbappen senare i den här modulen.

Grattis! Din app distribueras till Azure Static Web Apps!

Obs

Oroa dig inte om du ser en webbsida som anger att appen inte har skapats och distribuerats ännu. Prova att uppdatera webbläsaren om en minut. GitHub Action-tjänsten körs automatiskt när Azure Static Web App skapas. Så om du ser välkomstsidan distribueras appen fortfarande.

Hämta ändringarna från GitHub

Hämta de senaste ändringarna från GitHub för att hämta arbetsflödesfilen som skapats av Azure Static Web Apps-tjänsten.

  1. Öppna kommandopaletten genom att trycka på Ctrl+Skift+P.

  2. Ange och välj Git: Pull.

  3. Tryck på Enter-tangenten.

Nästa steg

Härnäst lär du dig hur du skapar och kör ditt API med hjälp av ett Azure Functions-projekt.