Nasazení webové aplikace do Azure Static Web Apps

V tomto článku vytvoříte novou webovou aplikaci s architekturou podle vašeho výběru, spustíte ji místně a pak ji nasadíte do Azure Static Web Apps.

Požadavky

Pro absolvování tohoto kurzu potřebujete:

Resource	Popis
Předplatné Azure	Pokud ho nemáte, můžete si zdarma vytvořit účet.
Node.js	Nainstalujte verzi 20.0 nebo novější.
Azure CLI	Nainstalujte verzi 2.6x nebo novější.

Potřebujete také textový editor. Pro práci s Azure se doporučuje Visual Studio Code .

Aplikaci, kterou vytvoříte v tomto článku, můžete spustit na zvolené platformě, včetně Linuxu, macOS, Windows nebo Subsystém Windows pro Linux.

Vytvoření webové aplikace

1. Otevřete okno terminálu.

2. Vyberte příslušný adresář pro váš kód a spusťte následující příkazy.

   npm create vite@latest swa-vanilla-demo -- --template=vanilla
   cd swa-vanilla-demo
   npm install
   npm run dev
   

   Při spouštění těchto příkazů vytiskne vývojový server adresu URL vašeho webu. Výběrem odkazu ho otevřete ve výchozím prohlížeči.

   

2. Vyberte příslušný adresář pro váš kód a spusťte následující příkazy.

   npx --package @angular/cli@latest ng new swa-angular-demo --ssr=false --defaults
   cd swa-angular-demo
   npm start
   

   Při spouštění těchto příkazů vytiskne vývojový server adresu URL vašeho webu. Výběrem odkazu ho otevřete ve výchozím prohlížeči.

   

2. Vyberte příslušný adresář pro váš kód a spusťte následující příkazy.

   npm create vite@latest swa-react-demo -- --template react
   cd swa-react-demo
   npm install
   npm run dev
   

   Při spouštění těchto příkazů vytiskne vývojový server adresu URL vašeho webu. Výběrem odkazu ho otevřete ve výchozím prohlížeči.

   

2. Vyberte příslušný adresář pro váš kód a spusťte následující příkazy.

   npm create vite@latest swa-vue-demo -- --template vue
   cd swa-vue-demo
   npm install
   npm run dev
   

   Při spouštění těchto příkazů vytiskne vývojový server adresu URL vašeho webu. Výběrem odkazu ho otevřete ve výchozím prohlížeči.

   

3. Stisknutím kláves Cmd/Ctrl+C zastavte vývojový server.

Vytvoření statické webové aplikace v Azure

Statickou webovou aplikaci můžete vytvořit pomocí webu Azure Portal, Azure CLI, Azure PowerShellu nebo editoru Visual Studio Code (s rozšířením Azure Static Web Apps). V tomto kurzu se používá Azure CLI.

1. Přihlaste se k Azure CLI:

   az login
   

   Ve výchozím nastavení tento příkaz otevře prohlížeč pro dokončení procesu. Azure CLI podporuje různé metody pro přihlášení , pokud tato metoda ve vašem prostředí nefunguje.

2. Pokud máte více předplatných, možná budete muset vybrat předplatné. Aktuální předplatné můžete zobrazit pomocí následujícího příkazu:

   az account show
   

   Pokud chcete vybrat předplatné, můžete příkaz az account set spustit.

   az account set --subscription "<SUBSCRIPTION_NAME_OR_ID>"
   

3. Vytvořte skupinu prostředků.

   Skupiny prostředků se používají k seskupení prostředků Azure.

   az group create -n swa-tutorial -l centralus --query "properties.provisioningState"
   

   Parametr -n odkazuje na název webu a -l parametr je název umístění Azure. Příkaz končí tak --query "properties.provisioningState" , aby příkaz vrátil pouze úspěšnou nebo chybovou zprávu.

4. V nově vytvořené skupině prostředků vytvořte statickou webovou aplikaci.

   az staticwebapp create -n swa-demo-site -g swa-tutorial --query "defaultHostname"
   

   Parametr -n odkazuje na název webu a -g parametr odkazuje na název skupiny prostředků Azure. Ujistěte se, že jste zadali stejný název skupiny prostředků jako v předchozím kroku. Statická webová aplikace je globálně distribuovaná, takže umístění není pro nasazení aplikace důležité.

   Příkaz je nakonfigurovaný tak, aby vrátil adresu URL vaší webové aplikace. Hodnotu z okna terminálu můžete zkopírovat do prohlížeče a zobrazit nasazenou webovou aplikaci.

Konfigurace pro nasazení

1. staticwebapp.config.json Do kódu aplikace přidejte soubor s následujícím obsahem:

   {
       "navigationFallback": {
           "rewrite": "/index.html"
       }
   }
   

   Definování náhradní trasy umožňuje vaší lokalitě serverovat index.html soubor pro všechny požadavky provedené v doméně.

   Pokud ho používáte, zkontrolujte tento soubor do systému správy zdrojového kódu (například Git).

2. Nainstalujte do projektu rozhraní příkazového řádku Azure Static Web Apps (SWA).

   npm install -D @azure/static-web-apps-cli
   

   Rozhraní příkazového řádku SWA vám pomůže vyvíjet a testovat web místně před nasazením do cloudu.

3. Vytvořte nový soubor pro váš projekt a pojmenujte ho swa-cli.config.json.

   Tento swa-cli.config.json soubor popisuje, jak sestavit a nasadit web.

   Po vytvoření tohoto souboru můžete pomocí příkazu vygenerovat npx swa init jeho obsah.

   npx swa init --yes
   

4. Sestavte aplikaci pro distribuci.

   npx swa build
   

5. Přihlaste se k Azure pomocí rozhraní příkazového řádku SWA.

   npx swa login --resource-group swa-tutorial --app-name swa-demo-site
   

   Použijte stejný název skupiny prostředků a název statické webové aplikace, který jste vytvořili v předchozí části. Při pokusu o přihlášení se otevře prohlížeč, který v případě potřeby dokončí proces.

Upozorňující

Angular v17 a novější umístěte distribuovatelné soubory do podadresáře výstupní cesty, kterou můžete zvolit. Rozhraní příkazového řádku SWA nezná konkrétní umístění adresáře. Následující kroky ukazují, jak tuto cestu správně nastavit.

Vyhledejte vygenerovaný soubor index.html v projektu ve složce dist/swa-angular-demo/browser .

1. Nastavte proměnnou SWA_CLI_OUTPUT_LOCATION prostředí na adresář obsahující soubor index.html :

   udeřit

   export SWA_CLI_OUTPUT_LOCATION="dist/swa-angular-demo/browser"
   

   csh

   setenv SWA_CLI_OUTPUT_LOCATION "dist/swa-angular-demo/browser"
   

   PowerShell

   $env:SWA_CLI_OUTPUT_LOCATION="dist/swa-angular-demo/browser"
   

   CMD

   set SWA_CLI_OUTPUT_LOCATION="dist/swa-angular-demo/browser"
   

Nasazení webu do Azure

Nasaďte svůj kód do statické webové aplikace:

npx swa deploy --env production

Nasazení aplikace může trvat několik minut. Po dokončení se zobrazí adresa URL webu.

Ve většiněsystémůch

Vyčištění prostředků (volitelné)

Pokud nepokračujete s dalšími kurzy, odeberte skupinu prostředků a prostředky Azure:

az group delete -n swa-tutorial

Když odeberete skupinu prostředků, odstraníte všechny prostředky, které obsahuje. Tato akce se nedá vrátit zpátky.

Další kroky

Přidání ověřování

Související obsah

• Ověřování a autorizace
• Připojení k databázi
• Vlastní domény
• Série videí: Nasazení webů do cloudu pomocí Azure Static Web Apps