Självstudie: Publicera Azure Static Web Apps med Azure DevOps

Den här artikeln visar hur du distribuerar till Azure Static Web Apps med Hjälp av Azure DevOps.

I de här självstudierna får du lära dig att:

• Konfigurera en Azure Static Web Apps webbplats
• Skapa en Azure-pipeline för att skapa och publicera en statisk webbapp

Förutsättningar

• Aktivt Azure-konto: Om du inte har ett konto kan du skapa ett konto utan kostnad.
• Azure DevOps-projekt: Om du inte har något kan du skapa ett projekt utan kostnad.
  • Azure DevOps innehåller Azure Pipelines. Om du behöver hjälp med att komma igång med Azure Pipelines kan du gå till Skapa din första pipeline.
  • Pipelineuppgiften för statisk webbapp fungerar för närvarande bara på Linux-datorer. När du kör pipelinen som anges nedan ser du till att den körs på en virtuell Linux-dator.

Skapa en statisk webbapp i en Azure DevOps

1. Gå till din lagringsplats i Azure Repos.

2. Välj Importera för att börja importera ett exempelprogram.

   

3. I Klon-URL anger du https://github.com/staticwebdev/vanilla-api.git .

4. Välj Importera.

Skapa en statisk webbapp

1. Gå till Azure Portal.

2. Välj Skapa en resurs.

3. Sök efter Static Web Apps.

4. Välj Static Web Apps.

5. Välj Skapa.

6. Skapa en ny statisk webbapp med följande värden.

   

   Inställning	Värde
   Prenumeration	Namnet på din Azure-prenumeration.
   Resursgrupp	Välj ett befintligt gruppnamn eller skapa ett nytt.
   Name	Ange myDevOpsApp.
   Typ av värdplan	Välj Kostnadsfri.
   Region	Välj den region som är närmast dig.
   Källa	Välj Övrigt.

7. Välj Granska + skapa

8. Välj Skapa.

9. När distributionen är lyckad väljer du Gå till resurs.

10. Välj Hantera distributionstoken.

11. Kopiera distributionstoken och klistra in värdet för distributionstoken i en textredigerare för användning på en annan skärm.

    Anteckning

    Det här värdet reserveras för tillfället eftersom du ska kopiera och klistra in fler värden i kommande steg.

    

Skapa pipelineuppgiften i Azure DevOps

1. Gå till lagringsplatsen i Azure Repos som skapades tidigare.

2. Välj Konfigurera version.

   

3. På skärmen Konfigurera din pipeline väljer du Startpipeline.

   

4. Kopiera följande YAML och ersätt den genererade konfigurationen i din pipeline med den här koden.

   trigger:
     - main
   
   pool:
     vmImage: ubuntu-latest
   
   steps:
     - checkout: self
       submodules: true
     - task: AzureStaticWebApp@0
       inputs:
         app_location: '/src'
         api_location: 'api'
         output_location: '/src'
         azure_static_web_apps_api_token: $(deployment_token)
   

   Anteckning

   Om du inte använder exempelappen måste värdena för , och ändras app_location så att de matchar värdena i ditt api_location output_location program.

   Egenskap	Beskrivning	Exempel	Obligatorisk
   app_location	Plats för program koden.	Ange / om din program käll kod är i roten av lagrings platsen eller /app om program koden finns i en katalog som kallas app .	Ja
   api_location	Azure Functionss kodens plats.	Ange /api om din app-kod finns i en mapp med namnet api . Om det inte går att hitta någon Azure Functions app i mappen, kan inte versionen av det här arbets flödet antas att du inte vill ha något API.	Inga
   output_location	Platsen för build-utdatakatalogen i förhållande till app_location .	Om programmets källkod finns i /app och build-skriptet matar ut filer till /app/build mappen, anger du build som output_location värde.	Inga

   Värdet azure_static_web_apps_api_token är själv hanterat och konfigureras manuellt.

5. Välj Variabler.

6. Välj Ny variabel.

7. Namnge variabeln deployment_token (som matchar namnet i arbetsflödet).

8. Kopiera den distributionstoken som du klistrade in tidigare i en textredigerare.

9. Klistra in distributionstoken i rutan Värde.

   

10. Välj Behåll det här värdet hemligt.

11. Välj OK.

12. Välj Spara för att återgå till din pipeline-YAML.

13. Välj Spara och kör för att öppna dialogrutan Spara och kör.

    

14. Välj Spara och kör för att köra pipelinen.

15. När distributionen är lyckad går du till Azure Static Web Apps Översikt som innehåller länkar till distributionskonfigurationen. Observera att källlänken nu pekar på grenen och platsen för Azure DevOps-lagringsplatsen.

16. Välj URL:en för att se din nyligen distribuerade webbplats.

    

Rensa resurser

Rensa de resurser som du har distribuerat genom att ta bort resursgruppen.

1. I Azure Portal väljer du Resursgrupp på den vänstra menyn.
2. Ange resursgruppens namn i fältet Filtrera efter namn.
3. Välj det resursgruppsnamn som du använde i den här självstudien.
4. Välj Ta bort resursgrupp på den översta menyn.

Nästa steg