Kurz: publikování webu VuePress do Azure static Web Apps

Tento článek ukazuje, jak vytvořit a nasadit webovou aplikaci v VuePress do azure Azure static Web Apps. Konečný výsledek je nová aplikace statického Web Apps Azure s přidruženými akcemi GitHubu, která vám umožní řídit, jak je aplikace sestavená a publikovaná.

V tomto kurzu se naučíte:

Požadavky

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

Vytvoření aplikace v VuePress

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

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

   mkdir static-site
   

2. Přidejte soubor Readme.MD do složky.

   echo '# Hello From VuePress' > README.md
   

3. Inicializujte package.jsv souboru.

   npm init -y
   

4. Přidejte VuePress jako devDependency .

   npm install --save-dev vuepress
   

5. Otevřete package.js v souboru v textovém editoru a přidejte do oddílu příkaz Build scripts .

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

6. Vytvořte soubor . gitignore pro vyloučení složky _ modulů uzlů .

   echo 'node_modules' > .gitignore
   

7. Inicializace úložiště Git

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

Nas nabízené oznámení aplikace do GitHubu

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

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

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

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

3. Nasažte 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ř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-vuepress-group
   Název	vuepress-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í GitHubu a ověřte se 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 Main (Hlavní).

9. V části Podrobnosti o sestavení vyberte v rozevíracím seznamu přednastavení sestavení možnost VuePress a ponechejte výchozí hodnoty.

Zkontrolovat a vytvořit

1. Kliknutím na tlačítko Revize + vytvořit ověřte správnost podrobností.

2. Výběrem možnosti vytvořit zahájíte vytváření App Servicech statických webových aplikací a zřídíte akci GitHubu pro nasazení.

3. Až se nasazení dokončí, přejděte na prostředek.

4. Na obrazovce prostředek kliknutím na odkaz URL otevřete nasazenou aplikaci. Aby se akce GitHubu mohla dokončit, možná budete muset počkat minutu nebo dvě.

   

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