Kurz: publikování statického Web Apps Azure pomocí Azure DevOps

Tento článek ukazuje, jak nasadit do služby Azure Static Web Apps pomocí Azure DevOps.

V tomto kurzu se naučíte:

• Nastavení webu Azure static Web Apps
• Vytvoření kanálu Azure pro sestavení a publikování statické webové aplikace

Požadavky

• Aktivní účet Azure: Pokud ho nemáte, můžete si účet zdarma vytvořit.
• Azure DevOps projekt: Pokud ho ještě nemáte, můžete si projekt vytvořit zdarma.
  • Azure DevOps obsahuje Azure Pipelines. pokud potřebujete pomáhat s zahájením Azure Pipelines, přečtěte si téma vytvoření prvního kanálu.
  • Úkol kanálu statických webových aplikací se teď funguje jenom na počítačích se systémem Linux . Při spuštění kanálu uvedeného níže se ujistěte, že je spuštěný na virtuálním počítači se systémem Linux.

Vytvoření statické webové aplikace v Azure DevOps

1. Přejděte do úložiště v Azure Repos.

2. Vyberte importovat a začněte importovat ukázkovou aplikaci.

   

3. Do adresy URL klonu zadejte https://github.com/staticwebdev/vanilla-api.git .

4. Vyberte Importovat.

Vytvoření statické webové aplikace

1. Přejděte na Azure Portal.

2. Vyberte Vytvořit prostředek.

3. Vyhledejte statické Web Apps.

4. Vyberte staické webové aplikace (Static Web Apps).

5. Vyberte Vytvořit.

6. Vytvořte novou statickou webovou aplikaci s následujícími hodnotami.

   

   Nastavení	Hodnota
   Předplatné	Název vašeho předplatného Azure.
   Skupina prostředků	Vyberte existující název skupiny nebo vytvořte nový.
   Název	Zadejte myDevOpsApp.
   Typ plánu hostování	Vyberte možnost Free.
   Oblast	Vyberte oblast, která je pro vás nejblíže.
   Zdroj	Vyberte možnost jiné.

7. Vyberte Zkontrolovat a vytvořit.

8. Vyberte Vytvořit.

9. Po úspěšném nasazení vyberte Přejít k prostředku.

10. Vyberte Spravovat token nasazení.

11. Zkopírujte token nasazení a vložte hodnotu tokenu nasazení do textového editoru pro použití na jiné obrazovce.

    Poznámka

    Tato hodnota je pro tuto chvíli nastavená, protože do následujících kroků zkopírujete a vložíte další hodnoty.

    

Vytvořit úlohu kanálu v Azure DevOps

1. přejděte do úložiště ve Azure Repos, které jste vytvořili dříve.

2. Vyberte nastavit sestavení.

   

3. Na obrazovce konfigurace vašeho kanálu vyberte Počáteční kanál.

   

4. Zkopírujte následující YAML a nahraďte vygenerovanou konfiguraci v kanálu tímto kódem.

   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)
   

   Poznámka

   Pokud ukázkovou aplikaci nepoužíváte, hodnoty pro app_location , a se api_location output_location musí změnit tak, aby odpovídaly hodnotám ve vaší aplikaci.

   Vlastnost	Popis	Příklad	Vyžadováno
   app_location	Umístění kódu aplikace	Zadejte / , zda je zdrojový kód vaší aplikace v kořenu úložiště, nebo /app Pokud je kód aplikace v adresáři s názvem app .	Yes
   api_location	Umístění kódu Azure Functions.	/apiPokud je kód vaší aplikace ve složce s názvem api , zadejte. Pokud ve složce není zjištěna žádná Azure Functions aplikace, sestavení neselže, pracovní postup předpokládá, že nechcete rozhraní API.	No
   output_location	Umístění výstupního adresáře sestavení vzhledem k app_location .	Pokud je zdrojový kód aplikace umístěn na /app , a skript sestavení výstupuje soubory do složky a /app/build nastaví build jako output_location hodnotu.	Ne

   azure_static_web_apps_api_tokenHodnota je samostatně spravovaná a je nakonfigurována ručně.

5. Vyberte proměnné.

6. Vyberte Nová proměnná.

7. Název proměnné deployment_token (bude odpovídat názvu v pracovním postupu).

8. Zkopírujte token nasazení, který jste předtím vložili do textového editoru.

9. Vložte do pole hodnota token nasazení.

   

10. Vyberte možnost zachovat tuto hodnotu tajnou.

11. Vyberte OK.

12. Vyberte Uložit a vraťte se k YAML kanálu.

13. Vyberte Uložit a spustit , aby se otevřel dialog Uložit a spustit .

    

14. Vyberte Uložit a spustit pro spuštění kanálu.

15. Po úspěšném nasazení přejděte do přehledu služby Azure static Web Apps, který obsahuje odkazy na konfiguraci nasazení. všimněte si, jak odkaz zdroj teď odkazuje na větev a umístění úložiště Azure DevOps.

16. Vyberte adresu URL pro zobrazení nově nasazeného webu.

    

Vyčištění prostředků

Vyčistěte prostředky, které jste nasadili, odstraněním skupiny prostředků.

1. Z Azure Portal v nabídce vlevo vyberte Skupina prostředků .
2. Do pole Filtrovat podle názvu zadejte název skupiny prostředků.
3. Vyberte název skupiny prostředků, který jste použili v tomto kurzu.
4. V horní nabídce vyberte Odstranit skupinu prostředků .

Další kroky