練習：使用 Azure Cloud Shell 建立靜態 HTML Web 應用程式

15 分鐘

免費的沙箱可讓您在 Azure 全球區域的一部分區域建立資源。建立資源後，從下列清單選取區域：

美國西部 2
美國中南部
美國中部
美國東部
西歐

東南亞
日本東部
巴西南部
澳大利亞東南部
印度中部

在本練習中，您藉由使用 Azure CLI az webapp up 命令，來將基本的 HTML+CSS 網站部署至 Azure App Service。接著，您更新程式碼，並使用相同的命令重新部署。

az webapp up 命令可讓您輕鬆地建立和更新 Web 應用程式。執行時，它會執行下列動作：

如果尚未指定資源群組，請先建立預設資源群組。
建立預設 App Service 方案。
建立具有指定名稱的應用程式。
以 Zip 檔進行部署，將目前工作目錄中的檔案部署到 Web 應用程式。

重要

若要完成此練習，您必須將 Cloud Shell 切換至傳統版本。 Cloud Shell 完成載入之後，請直接從 Cloud Shell 頂端的功能表中選取 [設定]，然後選取 [移至傳統版本]。

下載範例應用程式

在本節中，您使用沙箱來下載範例應用程式，並設定變數以讓某些命令更容易輸入。

在沙箱中建立目錄，然後巡覽至其中。
```
mkdir htmlapp

cd htmlapp
```
執行下列 git 命令，將範例應用程式存放庫複製到您的 htmlapp 目錄。
```
git clone https://github.com/Azure-Samples/html-docs-hello-world.git
```

執行下列命令，以設定變數來保留資源群組和應用程式名稱。

resourceGroup=$(az group list --query "[].{id:name}" -o tsv)
appName=az204app$RANDOM

建立 Web 應用程式

變更至包含了範例程式碼的目錄，並執行 az webapp up 命令。

cd html-docs-hello-world

az webapp up -g $resourceGroup -n $appName --html

執行此命令可能需要幾分鐘的時間。當命令執行時，它會顯示類似下列範例的資訊。

{
"app_url": "https://<myAppName>.azurewebsites.net",
"location": "westeurope",
"name": "<app_name>",
"os": "Windows",
"resourcegroup": "<resource_group_name>",
"serverfarm": "appsvc_asp_Windows_westeurope",
"sku": "FREE",
"src_path": "/home/<username>/demoHTML/html-docs-hello-world ",
< JSON data removed for brevity. >
}

在瀏覽器中開啟一個新的索引標籤，並巡覽至應用程式 URL (https://<myAppName>.azurewebsites.net)，然後確認應用程式正在執行 - 記下頁面頂端的標題。讓瀏覽器在應用程式上保持開啟狀態，以供下一節使用。

注意

您可以從上一個命令的輸出複製 <myAppName>.azurewebsites.net，或選取輸出中的 URL，以在新索引標籤中開啟網站。

更新並重新部署應用程式

在 Cloud Shell 中，輸入 code index.html 以開啟編輯器。在 <h1> 標題標籤中，將 [Azure App Service - 範例靜態 HTML 網站] 變更為 [已更新 Azure App Service]，或變更為您想要的任何其他內容。
使用 ctrl-s 命令來儲存，並使用 ctrl-q 來結束。
使用您稍早使用過的相同 az webapp up 命令來重新部署應用程式。
```
az webapp up -g $resourceGroup -n $appName --html 
```
提示

您可以使用鍵盤上的向上鍵來捲動先前的命令。
完成部署之後，請切換＜建立 Web 應用程式＞一節步驟 2 中的瀏覽器，然後重新整理頁面。

練習：使用 Azure Cloud Shell 建立靜態 HTML Web 應用程式

下載範例應用程式

建立 Web 應用程式

更新並重新部署應用程式

意見反應