練習 - 建立和設定靜態 Web 應用程式

10 分鐘

本課程模組使用 GitHub 範本存放庫，讓您可以輕鬆地開始使用。範本具有您將部署至 Azure Static Web Apps 的入門應用程式。

設定 GitHub 存放庫

移至 https://github.com/Azure/awps-swa-sample/generate 以建立本教學課程的新存放庫。
選取您自己作為 [擁有者]，並使用存放庫的預設名稱: [awps-swa-sample]。如果您選擇不同的名稱，請務必更新下列 GitHub 命令中使用的存放庫名稱。
您可以根據您的喜好設定建立 [公用] 或 [私人] 存放庫。這兩者適用于此課程模組。
選取 [從範本建立存放庫]。

建立靜態 Web 應用程式

現在既已建立了存放庫，就可以從 Azure CLI 建立靜態 web 應用程式了。

建立變數來保存您的 GitHub 使用者名稱。
```
GITHUB_USER_NAME=<Your_GitHub_user_name>
```
從您的存放庫中建立新靜態 web 應用程式。當您執行此命令時，CLI 會啟動 GitHub 互動式登入。請遵循訊息來完成授權。
```
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
```
GitHub 使用者程式碼會顯示在命令輸出中。下一個步驟會使用此程式碼來啟用和擷取您的 GitHub 個人存取權杖。

重要

傳遞至 --source 參數的 URL 不得包含 .git 尾碼。
移至 https://github.com/login/device。
輸入主控台輸出中顯示的使用者程式碼。選取繼續。
在出現的頁面中，選取 [授權 AzureAppServiceCLI]。如果出現提示，請擷取並輸入雙因素驗證碼。

設定靜態 Web 應用程式設定。

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

檢視網站

部署靜態應用程式有兩個層面: 第一個會建立構成您應用程式的基礎 Azure 資源。第二個為 GitHub Actions 工作流程，其會建置並發佈應用程式。

在您瀏覽至您的新靜態網站前，部署建置必須先完成執行。

返回主控台視窗並執行下列命令，以列出與應用程式相關聯的 GitHub 存放庫 URL。
```
az staticwebapp show \
  --name  my-awps-swa-app \
  --query "repositoryUrl"
```
此命令的輸出會傳回 GitHub 存放庫的 URL。
複製 存放庫 URL，並將它貼到瀏覽器中。
在 GitHub 存放庫中，選取 [動作] 索引標籤。

此時，Azure 會建立資源以支援靜態 Web 應用程式。等候執行中工作流程旁的圖示變成具有綠色背景 ✅ 的核取記號。此作業可能需要幾分鐘才能完成。

作業成功之後，工作流程就會完成，您就可以返回主控台視窗。

執行下列命令來查詢網站的 URL，並將值儲存在 STATIC_WEB_APP 變數中。

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

設定 Web PubSub 事件處理常式

您即將完成。最後一個步驟是設定 Web PubSub，以將用戶端要求傳送至後端 API。如需 Web PubSub 服務中事件處理常式的詳細資訊，請參閱事件處理常式。

執行下列命令以設定 Web PubSub 服務事件。它會將存放庫中 api 資料夾下的函式對應至 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"

試用聊天應用程式

現在您已準備好試用 chap 應用程式。將 STATIC_WEB_APP URL 複製到瀏覽器，然後選取 [繼續] 以開始聊天。如果您想要模擬與其他使用者聊天，請在兩個或多個瀏覽器索引標籤中開啟 URL，並從不同的索引標籤傳送訊息。

Screenshot showing the chat app in action.

繼續