练习：使用 Azure Cloud Shell 创建静态 HTML Web 应用

15 分钟

使用免费沙盒，可以在部分 Azure 全球区域中创建资源。创建资源时，请从下面的列表中选择一个区域：

美国西部 2
美国中南部
美国中部
美国东部
西欧

东南亚
Japan East
Brazil South
Australia Southeast
印度中部

在本练习中，你将使用 Azure CLI az webapp up 命令向 Azure 应用服务部署一个基本 HTML+CSS 站点。然后，使用同一命令更新代码并重新部署它。

az webapp up 命令可以轻松地创建和更新 Web 应用。执行该命令时，它会执行以下操作：

如果未指定默认资源组，请创建一个默认资源组。
创建一个默认的应用服务计划。
创建一个采用指定名称的应用。
使用 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 应用服务 - 示例静态 HTML 站点”更改为“已更新的 Azure 应用服务” - 或更改为任何其他需要的内容。
使用命令 ctrl-s 保存，使用 ctrl-q 退出。
使用之前用过的相同 az webapp up 命令重新部署应用。
```
az webapp up -g $resourceGroup -n $appName --html 
```
提示

可以使用键盘上的向上箭头滚动浏览前面的命令。
部署完成后，从“创建 Web 应用”部分的步骤 2 切换回浏览器并刷新页面。

练习：使用 Azure Cloud Shell 创建静态 HTML Web 应用

下载示例应用

创建 Web 应用

更新并重新部署应用

反馈