Kurz: Publikování webu v Azure Static Web Apps

V tomto článku si ukážeme, jak vytvořit a nasadit webovou aplikaci s Azure Static Web Apps. Konečným výsledkem je nová statická webová aplikace Azure s přidruženými akcemi GitHub Actions, která vám dává kontrolu nad tím, jak se aplikace sestaví a publikuje.

V tomto kurzu se naučíte:

Pokud ještě nemáte předplatné Azure,vytvořte si bezplatný účet před tím, než začnete.

Požadavky

• Účet Azure s aktivním předplatným. Pokud ho nemáte, můžete si zdarma vytvořit účet.
• Účet GitHub. Pokud ho nemáte, můžete si zdarma vytvořit účet.

Vytvoření aplikace

Vytvořte aplikaci s použitím rozhraní příkazového řádku (CLI) s použitím následujícího příkazu:

1. Postupujte podle instalační příručky k Produktu ve vašem operačním systému.

2. Otevření terminálu

3. Spusťte Rozhraní příkazového řádku Sen a vytvořte novou aplikaci.

   hugo new site static-app
   

4. Přejděte na nově vytvořenou aplikaci.

   cd static-app
   

5. Inicializace úložiště Git

   git init
   

6. Ujistěte se, že vaše větev má název main .

   git branch -M main
   

7. Dále přidejte motiv na web tak, že si nainstalujte motiv jako dílčí modul gitu a pak ho zadáte do konfiguračního souboruFis.

   git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
   echo 'theme = "ananke"' >> config.toml
   

8. Potvrďte změny.

   git add -A
   git commit -m "initial commit"
   

Nabízení aplikace do GitHub

Pro připojení k GitHub potřebujete úložiště Azure Static Web Apps. Následující kroky ukazují, jak vytvořit úložiště pro váš web.

1. Vytvořte prázdné GitHub (nevytvářejte soubor README) z https://github.com/new pojmenovaného ve statické aplikaci.

2. Přidejte GitHub úložiště jako vzdálené úložiště. Nezapomeňte v následujícím příkazu GitHub místo zástupného symbolu přidat <YOUR_USER_NAME> své uživatelské jméno.

   git remote add origin https://github.com/<YOUR_USER_NAME>/hugo-static-app
   

3. Nas nabízené místní GitHub.

   git push --set-upstream origin main
   

Nasazení webové aplikace

Následující kroky ukazují, jak vytvořit novou statickou aplikaci webu a nasadit ji do produkčního prostředí.

Vytvoření aplikace

1. Přejděte na Azure Portal.

2. Vyberte Vytvořit prostředek.

3. Vyhledejte Static Web Apps.

4. Vyberte Static Web Apps

5. Vyberte Vytvořit.

6. Na kartě Základy zadejte následující hodnoty.

   Vlastnost	Hodnota
   Předplatné	Název vašeho předplatného Azure.
   Skupina prostředků	my-jejich-skupina
   Název	přidchytá-static-app
   Typ plánu	Free
   Oblast pro Azure Functions API a pracovní prostředí	Vyberte oblast, která je k vám nejblíže.
   Zdroj	GitHub

7. Vyberte Přihlásit se pomocí GitHub a ověření pomocí GitHub.

8. Zadejte následující GitHub hodnoty.

   Vlastnost	Hodnota
   Organizace	Vyberte požadovanou GitHub organizaci.
   Úložiště	Vyberte 1.0-static-app.
   Větev	Vyberte hlavní .

9. V části Podrobnosti o sestavení vyberte v rozevíracím seznamu Předvolby sestavení Možnost a nechte výchozí hodnoty.

Zkontrolovat a vytvořit

1. Výběrem tlačítka Zkontrolovat a vytvořit ověřte správnost podrobností.

2. Výběrem možnosti Vytvořit spusťte vytváření App Service statické webové aplikace a zřízení GitHub nasazení.

3. Po dokončení nasazení klikněte na Přejít k prostředku.

4. Na obrazovce prostředku kliknutím na odkaz URL otevřete nasazenou aplikaci. Možná budete muset minutu nebo dvě počkat, než se GitHub akce dokončí.

   

Vlastní verze

Když vygenerujete statickou webovou aplikaci, vygeneruje se soubor pracovního postupu, který obsahuje nastavení konfigurace publikování pro aplikaci. Konkrétní verzi Můžete určit v souboru pracovního postupu tak, že v oddílu zadáte HUGO_VERSION env hodnotu pro . Následující příklad konfigurace ukazuje, jak nastavit Vlastnost na konkrétní verzi.

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "api" # Api source code path - optional
          output_location: "public" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######
        env:
          HUGO_VERSION: 0.58.0

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

Pokud nebudete tuto aplikaci nadále používat, můžete prostředek služby Azure static Web App odstranit pomocí následujících kroků:

1. Otevřete Azure Portal.
2. V horním panelu vyhledávání vyhledejte vaši aplikaci podle názvu, který jste zadali dříve.
3. Klikněte na aplikaci.
4. Klikněte na tlačítko Odstranit .
5. Kliknutím na Ano potvrďte akci odstranit.

Další kroky