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ým GitHub Actions, která vám poskytne kontrolu nad tím, jak se aplikace sestaví a publikuje.

V tomto návodu se naučíte, jak:

• Vytvoření aplikace VuePress
• Nastavení azure Static Web Apps
• Nasazení aplikace VuePress do Azure

Požadavky

• Účet Azure s aktivním předplatným. Pokud ho nemáte, můžete si zdarma vytvořit účet.
• Účet GitHubu. Pokud ho nemáte, můžete si zdarma vytvořit účet.
• Instalace Gitu. Pokud ho nemáte, můžete nainstalovat Git.
• Node.js nainstalována.

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 složky.

   echo '# Hello From VuePress' > README.md
   

3. Inicializuje soubor package.json .

   npm init -y
   

4. Přidat 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 sestavení.

   ...
   "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"
   

Nasdílení aplikace do GitHubu

K připojení ke službě 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ě GitHubu (nevytvávejte soubor README) z https://github.com/newpojmenované aplikace vuepress-static-app.

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>/vuepress-static-app
   

3. Nasdílejte 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 statickou aplikaci webu a nasadit ji do produkčního prostředí.

Vytvoření aplikace

1. Přechod na web Azure Portal

2. Vyberte Vytvořit prostředek.

3. Hledání statických webových aplikací

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

5. Vyberte Vytvořit

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

   Vlastnictví	Hodnota
   Subscription	Název vašeho předplatného Azure
   Skupina zdrojů	my-vuepress-group
   název	vuepress-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.
   Zdroj	GitHub

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

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

   Vlastnictví	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 a přejděte do části Aplikace Nastavení > Autorizované aplikace > OAuth, 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 VuePress z rozevíracího seznamu Přednastavení sestavení a ponechte výchozí hodnoty.

Zkontrolujte a vytvořte

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čí.

   

Vyčistěte zdroje

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ření webu 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