在 Azure 中创建静态 HTML Web 应用

Azure Web 应用提供高度可缩放、自修补的 Web 托管服务。 本快速入门教程演示如何将基本 HTML+CSS 站点部署到 Azure Web 应用。 还可以使用 Azure CLI 在本地运行这些命令

示例应用主页

如果没有 Azure 订阅,可在开始前创建一个试用帐户

安装 Web 应用扩展

若要完成本快速入门,需要添加 az Web 应用扩展。 如果该扩展已安装,则应将其更新为最新版本。 若要更新该 Web 应用扩展,请键入 az extension update -n webapp

若要安装该 Web 应用扩展,请运行以下命令:

az extension add --name webapp

安装该扩展后,Cloud Shell 会显示类似于以下示例的信息:

The installed extension 'webapp' is in preview.

下载示例

创建一个 quickstart 目录,然后切换到该目录。

mkdir quickstart

cd quickstart

接下来,运行以下命令将示例应用存储库克隆到 quickstart 目录。

git clone https://github.com/Azure-Samples/html-docs-hello-world.git

创建 Web 应用

切换到包含示例代码的目录并运行 az webapp up 命令。

在以下示例中,请将 <app_name> 替换为一个唯一的应用名称。

cd html-docs-hello-world

az webapp up --location chinaeast --name <app_name>

az webapp up 命令执行以下操作:

  • 创建一个默认的资源组。

  • 创建一个默认的应用服务计划。

  • 创建一个采用指定名称的应用。

  • 使用 Zip 将文件从当前工作目录部署到 Web 应用。

此命令可能需要花费几分钟时间运行。 运行时,该命令会显示类似于以下示例的信息:

{
  "app_url": "https://<app_name>.chinacloudsites.cn",
  "location": "China East",
  "name": "<app_name>",
  "os": "Windows",
  "resourcegroup": "appsvc_rg_Windows_chinaeast",
  "serverfarm": "appsvc_asp_Windows_chinaeast",
  "sku": "FREE",
  "src_path": "/home/<username>/quickstart/html-docs-hello-world ",
  < JSON data removed for brevity. >
}

记下 resourceGroup 值。 需要在清理资源部分使用它。

浏览到应用

在浏览器中转到 Azure Web 应用 URL:

http://<app_name>.chinacloudsites.cn

该页作为 Azure 应用服务 Web 应用运行。

示例应用主页

祝贺你! 现已将第一个 HTML 应用部署到应用服务。

更新并重新部署应用

在终端窗口中,键入 nano index.html 以打开 nano 文本编辑器。 在 <h1> 标题标记中,将“Azure 应用服务 - 示例静态 HTML 站点”更改为“Azure 应用服务”,如下所示。

Nano index.html

保存更改并退出 nano。 使用命令 ^O 来保存,使用 ^X 来退出。

现在,需使用同一 az webapp up 命令重新部署应用。

az webapp up --location chinaeast --name <app_name>

完成部署后,切换回浏览到应用步骤中打开的浏览器窗口,然后刷新页面。

已更新的示例应用主页

管理新 Azure Web 应用

转到 Azure 门户管理创建的 Web 应用。

在左侧菜单中单击“应用服务”,然后单击 Azure Web 应用的名称。

在门户中导航到 Azure Web 应用

随后会显示 Web 应用的概述页。 在此处可以执行基本的管理任务,例如浏览、停止、启动、重启和删除。

Azure 门户中的“应用服务”边栏选项卡

左侧菜单提供用于配置应用的不同页面。

清理资源

在前面的步骤中,在资源组中创建了 Azure 资源。 如果认为将来不需要这些资源,请通过运行以下命令删除资源组。 请记住,资源组名称已在创建 Web 应用步骤中自动为你生成。

az group delete --name appsvc_rg_Windows_chinaeast

此命令可能需要花费一分钟时间运行。

后续步骤