共用方式為


快速入門:使用 Azure CLI 建立您的第一個靜態網站

部署至 Azure

Azure Static Web Apps 藉由從程式碼存放庫建置應用程式,將網站發佈至生產環境。

在本快速入門中,您會使用 Azure CLI 將 Web 應用程式部署到 Azure 靜態 Web 應用程式。

必要條件

定義環境變數

本快速入門的第一個步驟是定義環境變數。

export RANDOM_ID="$(openssl rand -hex 3)"
export MY_RESOURCE_GROUP_NAME="myStaticWebAppResourceGroup$RANDOM_ID"
export REGION=EastUS2
export MY_STATIC_WEB_APP_NAME="myStaticWebApp$RANDOM_ID"

建立存放庫 (選擇性)

(選擇性) 本文使用 GitHub 範本存放庫作為另一種方式,可讓您輕鬆地開始使用。 範本具有可部署至 Azure Static Web Apps 的入門應用程式。

  1. 瀏覽至下列位置以建立新的存放庫:https://github.com/staticwebdev/vanilla-basic/generate
  2. 將您的存放庫命名為 my-first-static-web-app

注意

Azure Static Web Apps 需要至少一個 HTML 檔案,才能建立 Web 應用程式。 您在這個步驟中建立的存放庫包含單一 index.html 檔案。

  1. 選取 [建立存放庫]

部署靜態 Web 應用程式

從 Azure CLI 將應用程式部署為靜態 Web 應用程式。

  1. 建立資源群組。
az group create \
  --name $MY_RESOURCE_GROUP_NAME \
  --location $REGION

結果:

{
  "id": "/subscriptions/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/resourceGroups/my-swa-group",
  "location": "eastus2",
  "managedBy": null,
  "name": "my-swa-group",
  "properties": {
    "provisioningState": "Succeeded"
  },
  "tags": null,
  "type": "Microsoft.Resources/resourceGroups"
}
  1. 從您的存放庫部署新的靜態 Web 應用程式。
az staticwebapp create \
    --name $MY_STATIC_WEB_APP_NAME \
    --resource-group $MY_RESOURCE_GROUP_NAME \
    --location $REGION 

部署靜態應用程式有兩個層面。 第一項作業會建立構成您應用程式的基礎 Azure 資源。 第二個層面是會建置及發佈您的應用程式的工作流程。

在您可以移至新的靜態網站之前,部署建置必須先完成執行。

  1. 返回主控台視窗,然後執行下列命令來列出網站的 URL。
export MY_STATIC_WEB_APP_URL=$(az staticwebapp show --name  $MY_STATIC_WEB_APP_NAME --resource-group $MY_RESOURCE_GROUP_NAME --query "defaultHostname" -o tsv)
runtime="1 minute";
endtime=$(date -ud "$runtime" +%s);
while [[ $(date -u +%s) -le $endtime ]]; do
    if curl -I -s $MY_STATIC_WEB_APP_URL > /dev/null ; then 
        curl -L -s $MY_STATIC_WEB_APP_URL 2> /dev/null | head -n 9
        break
    else 
        sleep 10
    fi;
done

結果:

<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8 />
<meta name=viewport content="width=device-width, initial-scale=1.0" />
<meta http-equiv=X-UA-Compatible content="IE=edge" />
<title>Azure Static Web Apps - Welcome</title>
<link rel="shortcut icon" href=https://appservice.azureedge.net/images/static-apps/v3/favicon.svg type=image/x-icon />
<link rel=stylesheet href=https://ajax.aspnetcdn.com/ajax/bootstrap/4.1.1/css/bootstrap.min.css crossorigin=anonymous />
echo "You can now visit your web server at https://$MY_STATIC_WEB_APP_URL"

使用 GitHub 範本

您已使用 Azure CLI 將靜態 Web 應用程式成功部署至 Azure Static Web Apps。 既然您已基本瞭解如何部署靜態 Web 應用程式,您可探索 Azure Static Web Apps 的更進階特性和功能。

如果您想要使用 GitHub 樣本存放庫,請遵循下列步驟:

移至 https://github.com/login/device,然後輸入您從 GitHub 取得的程式碼,以啟動並擷取您的 GitHub 個人存取權杖。

  1. 移至 https://github.com/login/device
  2. 輸入主控台訊息顯示的使用者代碼。
  3. 選取 Continue
  4. 選取 Authorize AzureAppServiceCLI

透過 Git 檢視網站

  1. 當您在執行指令碼時取得存放庫 URL 時,請複製存放庫 URL 並將它貼到瀏覽器中。

  2. 選取 [Actions] 索引標籤。

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

  3. 成功圖示出現之後,工作流程就會完成,您可返回主控台視窗。

  4. 執行下列命令來查詢網站的 URL。

   az staticwebapp show \
     --name $MY_STATIC_WEB_APP_NAME \
     --query "defaultHostname"
  1. 將 URL 複製到瀏覽器中以前往您的網站。

清理資源 (選擇性)

如果您不打算繼續使用此應用程式,請使用 az group delete 命令來刪除資源群組和靜態 Web 應用程式。

下一步