Snabbstart: Skapa din första statiska webbplats med Azure Static Web Apps

  • Artikel

Azure Static Web Apps publicerar en webbplats genom att skapa en app från en kodlagringsplats. I den här snabbstarten distribuerar du ett program till Azure Static Web-appar med hjälp av Visual Studio Code-tillägget.

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

Förutsättningar

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 har en startapp som ska distribueras till Azure Static Web Apps.

  1. Gå till följande plats för att skapa en ny lagringsplats:
    1. https://github.com/staticwebdev/vanilla-basic/generate
  2. Ge lagringsplatsen namnet my-first-static-web-app

Kommentar

Azure Static Web Apps kräver minst en HTML-fil för att skapa en webbapp. Lagringsplatsen som du skapar i det här steget innehåller en enda index.html fil.

Välj Create repository (Skapa lagringsplats).

Skärmbild av knappen Skapa lagringsplats.

Klona lagringsplatsen

När lagringsplatsen har skapats i ditt GitHub-konto klonar du projektet till din lokala dator med hjälp av följande kommando.

git clone https://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/my-first-static-web-app.git

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

Öppna sedan Visual Studio Code och gå till Öppna filmapp > för att öppna den klonade lagringsplatsen i redigeraren.

Installera Azure Static Web Apps-tillägget

Om du inte redan har Azure Static Web Apps-tillägget för Visual Studio Code-tillägget kan du installera det i Visual Studio Code.

  1. Välj Visa>tillägg.
  2. I söktilläggen på Marketplace skriver du Azure Static Web Apps.
  3. Välj Installera för Azure Static Web Apps.

Skapa en statisk webbapp

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

    Azure-logotyp

    Kommentar

    Du måste logga in på Azure och GitHub i Visual Studio Code för att fortsätta. Om du inte redan har autentiserats uppmanas du att logga in på båda tjänsterna under skapandeprocessen.

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

  3. Ange Skapa statisk webbapp i kommandorutan.

  4. Välj Azure Static Web Apps: Skapa statisk webbapp....

  5. Välj din Azure-prenumerationen.

  6. Ange my-first-static-web-app som programnamn.

  7. Välj den region som är närmast dig.

  8. Ange de inställningsvärden som matchar ditt ramverksval.

    Inställning Värde
    Ramverk Välj Anpassad
    Plats för programkod Ange /src
    Byggplats Ange /src

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

    Skapad bekräftelse

    Om GitHub visar en knapp med etiketten Aktivera åtgärder på den här lagringsplatsen väljer du knappen för att tillåta att byggåtgärden körs på lagringsplatsen.

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

    Väntar på distribution

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

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

    Bläddra på webbplatsen

Rensa resurser

Om du inte fortsätter att använda det här programmet kan du ta bort Azure Static Web Apps-instansen via tillägget.

I Fönstret Visual Studio Code Azure går du tillbaka till avsnittet Resurser och högerklickar på my-first-static-web-app under Static Web Apps och väljer Ta bort.

Nästa steg

Lägga till ett API