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

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

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

Förutsättningar

• GitHub-konto
• Azure-konto
• Visual Studio Code
• Azure Static Web Apps-tillägget för Visual Studio Code
• Installera Git

Klona en lagringsplats

Den här artikeln använder en lagrings plats för GitHub-mallar för att göra det enkelt för dig att komma igång. Mallen innehåller en start program som används för att distribuera med hjälp av Azures statiska Web Apps.

Välj Create repository from template (Skapa lagringsplats från mall).

Klona lagringsplatsen

När databasen har skapats i ditt GitHub-konto kan du klona 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

Se till att ersätta <YOUR_GITHUB_ACCOUNT_NAME> med ditt GitHub-användarnamn.

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

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.

   

   Anteckning

   Du måste logga in på Azure och GitHub i Visual Studio Code för att fortsätta. Om du inte redan är autentiserad uppmanas du att logga in på båda tjänsterna när du skapar tillägget.

2. Under Static Web Apps etiketten väljer du plustecknet.

   

   Anteckning

   Tillägget Azure Static Web Apps Visual Studio Code effektiviserar processen genom att använda en serie standardvärden. Om du vill ha mer information om skapandeprocessen öppnar du kommandopasen och väljer Azure Static Web Apps: Skapa statisk webbapp... (Avancerat).

3. Kommandopaletten öppnas överst i redigeraren och du uppmanas att välja ett prenumerationsnamn.

   Välj din prenumeration och tryck på Retur.

   

4. Ge sedan programmet ett namn.

   Skriv min-första-statiska-webbapp och tryck på Retur.

   

5. Välj en region nära dig.

   Anteckning

   Azure Static Web Apps distribuerar dina statiska tillgångar globalt. Den region som du väljer avgör var dina valfria mellanlagringsmiljöer och API-funktionsapp kommer att finnas.

6. Välj de förinställningar som matchar din programtyp.

   • Inget ramverk
   • Angular
   • React
   • Vue

   

   Ange /src som plats för programfilerna och tryck på Retur.

   Den här appen producerar inte byggutdata. Kontrollera att byggutdataplatsen är tom och tryck på Retur.

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

   

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

   

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

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

   

Rensa resurser

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

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

Nästa steg