Sdílet prostřednictvím

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.

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

    Snímek obrazovky vygenerované webové aplikace vanilla

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

    Snímek obrazovky vygenerované webové aplikace

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

    Snímek obrazovky vygenerované webové aplikace React

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

    Snímek obrazovky vygenerované webové aplikace Vue

  1. 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 :

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

Snímek obrazovky s příkazem deploy

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

  • Last updated on