Kurz: Publikování webu VuePress do Azure Static Web Apps

Tento článek ukazuje, jak vytvořit a nasadit webovou aplikaci VuePress do Azure Static Web Apps. Konečným výsledkem je nová aplikace Azure Static Web Apps s přidruženými GitHub Actions, které vám dávají kontrolu nad tím, jak se aplikace sestaví a publikuje.

V tomto kurzu se naučíte:

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.
• Instalace Gitu je nainstalovaná. Pokud ho nemáte, můžete nainstalovat Git.
• Node.js nainstalován.

Vytvoření aplikace VuePress

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

1. Vytvořte novou složku pro aplikaci VuePress.

   mkdir static-site
   

2. Přidejte README.md soubor do složky.

   echo '# Hello From VuePress' > README.md
   

3. Inicializujte soubor package.json .

   npm init -y
   

4. Přidejte VuePress jako .devDependency

   npm install --save-dev vuepress
   

5. Otevřete soubor package.json v textovém editoru a přidejte do oddílu scripts příkaz build.

   ...
   "scripts": {
       "build": "vuepress build"
   }
   ...
   

6. Vytvořte soubor .gitignore , který vyloučí složku node_modules .

   echo 'node_modules' > .gitignore
   

7. Inicializace úložiště Git

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

Odeslání aplikace na GitHub

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

1. Vytvořte prázdné úložiště GitHub (nevytvořte soubor README) z https://github.com/new pojmenované vuepress-static-app.

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

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

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

   git push --set-upstream origin main
   

Nasazení webové aplikace

Následující kroky ukazují, jak vytvořit novou aplikaci statického 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. 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-vuepress-group
   Název	vuepress-static-app
   Typ plánu	Free
   Oblast pro rozhraní API Azure Functions a přípravná prostředí	Vyberte oblast, která je k vám nejblíže.
   Zdroj	GitHub

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

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

   Vlastnost	Hodnota
   Organizace	Vyberte požadovanou organizaci GitHubu.
   Úložiště	Vyberte vuepress-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 úložiště GitHub, přejděte na Nastavení > Aplikace > autorizované aplikace OAuth, vyberte Azure Static Web Apps a pak vyberte Udělit. Pro úložiště organizace musíte být vlastníkem organizace, abyste mohli udělit oprávnění.

9. V části Podrobnosti o sestavení vyberte VuePress z rozevíracího seznamu Build Presets (Předvolby sestavení ) a ponechte výchozí hodnoty.

Zkontrolovat a vytvořit

1. Vyberte Zkontrolovat a vytvořit a ověřte správnost podrobností.

2. Výběrem možnosti Vytvořit spusťte vytváření App Service Static Web App a zřiďte GitHub Actions pro nasazení.

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

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

   

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

Pokud nechcete 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 Ano potvrďte akci odstranění.

Další kroky