Nasazení webu Jekyll do Azure Static Web Apps

Tento článek ukazuje, jak vytvořit a nasadit webovou aplikaci Jekyll do Azure Static Web Apps.

V tomto kurzu se naučíte:

• Vytvoření webu Jekyll
• Nastavení prostředku Azure Static Web Apps
• Nasazení aplikace Jekyll do Azure

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

Požadavky

• Instalace Jekyllu
  • V případě potřeby můžete použít Subsystém Windows pro Linux a postupovat podle pokynů ubuntu.
• Úč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.
• Instalace Gitu. Pokud ho nemáte, můžete nainstalovat Git.

Vytvoření aplikace Jekyll

Vytvoření aplikace Jekyll pomocí rozhraní příkazového řádku Jekyll (CLI):

1. V terminálu spusťte rozhraní příkazového řádku Jekyll a vytvořte novou aplikaci.

   jekyll new static-app
   

2. Přejděte do nově vytvořené aplikace.

   cd static-app
   

3. Inicializuje nové úložiště Git.

    git init
   

4. Potvrďte změny.

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

Nasdílení aplikace do GitHubu

Azure Static Web Apps k publikování webu používá GitHub. Následující kroky ukazují, jak vytvořit úložiště GitHub.

1. Vytvořte prázdné úložiště GitHubu (nevytvávejte soubor README) z https://github.com/new pojmenovaného jekyll-azure-static.

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

   git remote add origin https://github.com/<YOUR_USER_NAME>/jekyll-azure-static
   

3. Nasdílejte místní úložiště do GitHubu.

   git push --set-upstream origin main
   

   Poznámka:

   Vaše větev Gitu může mít jiný název než main. Nahraďte main v tomto příkazu správnou hodnotou.

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 web Azure Portal.

2. Vyberte Vytvořit prostředek.

3. Vyhledejte Static Web Apps.

4. Výběr statických webových aplikací

5. Vyberte příkaz 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ů	jekyll-static-app
   Název	jekyll-static-app
   Typ plánu	Zadejte možnost pro bezplatnou SKU.
   Oblast pro rozhraní API služby Azure Functions a přípravná prostředí	Vyberte oblast, která je k vám nejblíže.
   Source	GitHub

7. Vyberte Přihlásit se pomocí GitHubu a ověřit se pomocí GitHubu.

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

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

   Poznámka:

   Pokud nevidíte žádná úložiště, možná budete muset autorizovat Azure Static Web Apps na GitHubu. Přejděte do svého úložiště GitHub a přejděte na Nastavení Aplikace autorizované OAuth Apps, vyberte Azure Static Web Apps a pak vyberte Udělit.>> V případě úložišť organizace musíte být vlastníkem organizace, abyste udělili oprávnění.

9. V části Podrobnosti sestavení vyberte v rozevíracím seznamu Předvolby sestavení vlastnía ponechte výchozí hodnoty.

10. Do pole Umístění aplikace zadejte ./.

11. Pole Umístění rozhraní API nechte prázdné.

12. Do pole Umístění výstupu zadejte _site.

Podokno Zkontrolovat a vytvořit

1. Výběrem možnosti Zkontrolovat a vytvořit ověřte správnost podrobností.

2. Výběrem možnosti Vytvořit spustíte vytvoření statické webové aplikace služby App Service a zřídíte GitHub Actions pro nasazení.

3. Po dokončení nasazení vyberte Přejít k prostředku.

4. Na obrazovce prostředku vyberte odkaz na adresu URL a otevřete nasazenou aplikaci. Možná budete muset chvíli počkat, než se GitHub Actions dokončí.

   

Vlastní nastavení Jekyllu

Když vygenerujete statickou webovou aplikaci, vygeneruje se soubor pracovního postupu, který obsahuje nastavení konfigurace publikování pro aplikaci.

Pokud chcete nakonfigurovat proměnné prostředí, například JEKYLL_ENV, přidejte env do Azure Static Web Apps GitHub Actions v pracovním postupu oddíl.

- 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 source code path - optional
      output_location: "_site" # Built app content directory - optional
      ###### End of Repository/Build Configurations ######
   env:
      JEKYLL_ENV: production

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

Pokud nebudete tuto aplikaci dál používat, můžete prostředek azure Static Web App odstranit pomocí následujících kroků:

1. Otevřete Azure Portal.
2. Na horním panelu hledání vyhledejte 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 tlačítko Ano potvrďte akci odstranění.

Další kroky

Přidání vlastní domény