Předchozí

Další

Cvičení – vytvoření a konfigurace statické webové aplikace

Dokončeno

Tento modul používá úložiště šablon GitHubu, abyste mohli snadno začít. Šablona obsahuje úvodní aplikaci, kterou nasadíte do Azure Static Web Apps.

Nastavení úložiště GitHub

1. V tomto kurzu přejděte k https://github.com/Azure/awps-swa-sample/generate vytvoření nového úložiště.

2. Vyberte sami sebe jako vlastníka a použijte výchozí název úložiště: awps-swa-sample. Pokud zvolíte jiný název, nezapomeňte aktualizovat název úložiště použitý v následujících příkazech GitHubu.

3. Veřejné nebo soukromé úložiště můžete vytvořit podle svých preferencí. Buď funguje pro tento modul.

4. Vyberte možnost Create repository from template (Vytvořit úložiště ze šablony).

Vytvoření statické webové aplikace

Teď, když je úložiště vytvořené, můžete vytvořit statickou webovou aplikaci z Azure CLI.

1. Vytvořte proměnnou pro uložení uživatelského jména GitHubu.

   GITHUB_USER_NAME=<Your_GitHub_user_name>
   

2. Vytvořte novou statickou webovou aplikaci z úložiště. Když spustíte tento příkaz, spustí rozhraní příkazového řádku interaktivní přihlášení GitHubu. Dokončete autorizaci podle zprávy.

   az staticwebapp create \
       --name my-awps-swa-app \
       --resource-group "<rgn>[sandbox resource group name]</rgn>" \
       --source https://github.com/$GITHUB_USER_NAME/awps-swa-sample \
       --location $LOC \
       --branch main \
       --app-location "src" \
       --api-location "api" \
       --login-with-github
   

   Ve výstupu příkazu se zobrazí uživatelský kód GitHubu. Tento kód se používá v dalším kroku k aktivaci a načtení osobního přístupového tokenu GitHubu.

   Důležité

   Adresa URL předaná parametru --source nesmí obsahovat příponu .git .

3. Umožňuje přejít na https://github.com/login/device.

4. Zadejte uživatelský kód zobrazený ve výstupu konzoly. Zvolte Pokračovat.

5. Na stránce, která se zobrazí, vyberte Autorizovat azureAppServiceCLI. Pokud se zobrazí výzva, načtěte a zadejte dvoufaktorový ověřovací kód.

6. Nakonfigurujte nastavení statické webové aplikace.

   az staticwebapp appsettings set \
     --name my-awps-swa-app \
     --setting-names WebPubSubConnectionString=$AWPS_ACCESS_KEY WebPubSubHub=sample_swa
   

Zobrazení webu

Nasazení statické aplikace má dva aspekty: První vytvoří podkladové prostředky Azure, které tvoří vaši aplikaci. Druhým je právě pracovní postup GitHub Actions, který vytvoří a publikuje vaši aplikaci.

Před přechodem na novou statickou lokalitu musí sestavení nasazení nejprve dokončit spuštění.

1. Vraťte se do okna konzoly a spuštěním následujícího příkazu zobrazte adresu URL úložiště GitHubu přidruženou k vaší aplikaci.

   az staticwebapp show \
     --name  my-awps-swa-app \
     --query "repositoryUrl"
   

   Výstup tohoto příkazu vrátí adresu URL do úložiště GitHub.

2. Zkopírujte adresu URL úložiště a vložte ji do prohlížeče.

3. V úložišti GitHub vyberte kartu Akce .

   V tuto chvíli Azure vytváří prostředky pro podporu vaší statické webové aplikace. Počkejte, až se ikona vedle spuštěného pracovního postupu změní na značku zaškrtnutí se zeleným pozadím ✅. Dokončení této operace může trvat několik minut.

   Po úspěšném dokončení operace se pracovní postup dokončí a můžete se vrátit do okna konzoly.

4. Spuštěním následujícího příkazu zadejte dotaz na adresu URL webu a uložte hodnotu do STATIC_WEB_APP proměnné.

   STATIC_WEB_APP=$(az staticwebapp show \
     --name my-awps-swa-app \
     --query "defaultHostname" \
     --output tsv)
   

Konfigurace obslužné rutiny události Web PubSub

Jste velmi blízko k dokončení. Posledním krokem je konfigurace web pubSub pro přenos požadavků klientů do back-endových rozhraní API. Další informace o obslužné rutině události ve službě Web PubSub naleznete v tématu Obslužná rutina události.

1. Spuštěním následujícího příkazu nakonfigurujte události služby Web PubSub. Mapuje funkce ve api složce v úložišti na obslužnou rutinu události Web PubSub.

   az webpubsub hub create \
     --name $WPS_NAME \
     --resource-group "<rgn>[sandbox resource group name]</rgn>" \
     --hub-name "sample_swa" \
     --event-handler url-template=https://$STATIC_WEB_APP/api/{event} user-event-pattern="*" \
     --event-handler url-template=https://$STATIC_WEB_APP/api/{event} system-event="connect"
   

Vyzkoušení chatovací aplikace

Teď jste připraveni vyzkoušet aplikaci chap. STATIC_WEB_APP Zkopírujte adresu URL do prohlížeče a vyberte Pokračovat a začněte chatovat. Pokud chcete simulovat chatování s jiným uživatelem, otevřete adresu URL na dvou nebo více kartách prohlížeče a odešlete zprávy z různých karet.

Pokračovat