在 Azure 中创建静态 HTML Web 应用

12/04/2017
作者

Azure Web 应用提供高度可缩放、自修补的 Web 托管服务。本快速入门教程演示如何将基本 HTML+CSS 站点部署到 Azure Web 应用。使用 Azure CLI 创建 Web 应用，并使用 Git 将 HTML 内容示例部署到 Web 应用。

示例应用主页

可以在 Mac、Windows 或 Linux 计算机上执行以下步骤。安装先决条件后，大约需要五分钟完成这些步骤。

先决条件

若要完成本快速入门教程，需先执行以下操作：

安装 Git

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

如果选择在本地安装并使用 CLI，本主题要求运行 Azure CLI 2.0 版或更高版本。运行 az --version 即可查找版本。如果需要进行安装或升级，请参阅安装 Azure CLI 2.0。

下载示例

在终端窗口中，运行以下命令，将示例应用存储库克隆到本地计算机。

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

切换到包含示例代码的目录。

cd html-docs-hello-world

查看 HTML

导航到包含示例 HTML 的目录。在浏览器中打开 index.html 文件。

示例应用主页

登录 Azure

将使用 Azure CLI 2.0 创建在 Azure 中托管应用所需的资源。使用 az login 命令登录到 Azure 订阅，并按照屏幕上的说明进行操作。

az login

Note

在 Azure China 中使用 Azure CLI 2.0 之前，请首先运行 az cloud set -n AzureChinaCloud 更改云环境。如果要切换回全局 Azure，请再次运行 az cloud set -n AzureCloud。

配置部署用户

使用 az webapp deployment user set 命令创建部署凭据。

在 Web 应用中进行 FTP 和本地 Git 部署时需要一个部署用户。用户名和密码都为帐户级别。它们与 Azure 订阅凭据不同。

在以下命令中，将 <user-name> 和 <password> 替换为新的用户名和密码。用户名必须唯一。密码长度必须至少为 8 个字符，其中包含以下 3 种元素中的两种：字母、数字、符号。

az webapp deployment user set --user-name <username> --password <password>

如果收到 'Conflict'. Details: 409 错误，请更改用户名。如果收到 'Bad Request'. Details: 400 错误，请使用更强的密码。

只创建此部署用户一次；可对所有 Azure 部署使用此用户。

Note

记录用户名和密码。稍后需要使用它们来部署 Web 应用。

创建资源组

资源组是在其中部署和管理 Azure 资源（例如 Web 应用、数据库和存储帐户）的逻辑容器。

使用 az group create 命令创建资源组。以下示例在“中国北部”位置创建名为“myResourceGroup”的资源组。若要查看免费层中应用服务支持的所有位置，请运行 az appservice list-locations --sku F1 命令。

az group create --name myResourceGroup --location "China North"

通常在附近的区域中创建资源组和资源。

此命令完成后，JSON 输出会显示资源组属性。

创建 Azure 应用服务计划

使用 az appservice plan create 命令创建应用服务计划。

Note

应用服务计划表示用于托管应用的物理资源集合。分配到应用服务计划的所有应用程序将共享该计划定义的资源。托管多个应用时，此共享可让你节省资金。

应用服务计划定义：

区域（中国东部和中国北部）。
实例大小（小、中、大）
规模计数（默认情况为 1 到 20 个实例）
SKU（免费、共享、基本、标准、高级）

以下示例在免费定价层中创建名为 myAppServicePlan 的应用服务计划：

az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku FREE

创建应用服务计划后，Azure CLI 将显示类似于以下示例的信息：

{ 
  "adminSiteName": null,
  "appServicePlanName": "myAppServicePlan",
  "geoRegion": "China North",
  "hostingEnvironmentProfile": null,
  "id": "/subscriptions/0000-0000/resourceGroups/myResourceGroup/providers/Microsoft.Web/serverfarms/myAppServicePlan",
  "kind": "app",
  "location": "China North",
  "maximumNumberOfWorkers": 1,
  "name": "myAppServicePlan",
  < JSON data removed for brevity. >
  "targetWorkerSizeId": 0,
  "type": "Microsoft.Web/serverfarms",
  "workerTierName": null
}

创建 Web 应用

使用 az webapp create 命令在 myAppServicePlan 应用服务计划中创建一个 Web 应用。

在以下示例中，将 <app_name> 替换为全局唯一的应用名称（有效字符是 a-z、0-9 和 -）。

az webapp create --name <app_name> --resource-group myResourceGroup --plan myAppServicePlan --deployment-local-git

创建 Web 应用后，Azure CLI 将显示类似于以下示例的信息：

Local git is configured with url of 'https://<username>@<app_name>.scm.chinacloudsites.cn/<app_name>.git'
{
  "availabilityState": "Normal",
  "clientAffinityEnabled": true,
  "clientCertEnabled": false,
  "cloningInfo": null,
  "containerSize": 0,
  "dailyMemoryTimeQuota": 0,
  "defaultHostName": "<app_name>.chinacloudsites.cn",
  "deploymentLocalGitUrl": "https://<username>@<app_name>.scm.chinacloudsites.cn/<app_name>.git",
  "enabled": true,
  < JSON data removed for brevity. >
}

已创建了一个空的 Web 应用并启用了 Git 部署。

Note

Git 远程的 URL 将显示在 deploymentLocalGitUrl 属性中，其格式为 https://<username>@<app_name>.scm.chinacloudsites.cn/<app_name>.git。保存此 URL，因为稍后将需要它。

浏览到新建的 Web 应用。

http://<app_name>.chinacloudsites.cn

空 Web 应用页

从 Git 推送到 Azure

回到本地终端窗口，将 Azure 远程功能添加到本地 Git 存储库。将 <deploymentLocalGitUrl-from-create-step> 替换为从创建 Web 应用保存的 Git 远程 URL。

git remote add azure <deploymentLocalGitUrl-from-create-step>

使用以下命令推送到 Azure 远程功能以部署应用。当 Git 凭据管理器提示输入凭据时，请确保输入在配置部署用户中创建的凭据，而不是用于登录到 Azure 门户的凭据。

git push azure master

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

Counting objects: 13, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (11/11), done.
Writing objects: 100% (13/13), 2.07 KiB | 0 bytes/s, done.
Total 13 (delta 2), reused 0 (delta 0)
remote: Updating branch 'master'.
remote: Updating submodules.
remote: Preparing deployment for commit id 'cc39b1e4cb'.
remote: Generating deployment script.
remote: Generating deployment script for Web Site
remote: Generated deployment script files
remote: Running deployment command...
remote: Handling Basic Web Site deployment.
remote: KuduSync.NET from: 'D:\home\site\repository' to: 'D:\home\site\wwwroot'
remote: Deleting file: 'hostingstart.html'
remote: Copying file: '.gitignore'
remote: Copying file: 'LICENSE'
remote: Copying file: 'README.md'
remote: Finished successfully.
remote: Running post deployment command(s)...
remote: Deployment successful.
To https://<app_name>.scm.chinacloudsites.cn/<app_name>.git
 * [new branch]      master -> master

浏览到应用

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

http://<app_name>.chinacloudsites.cn

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

示例应用主页

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

更新并重新部署应用

在文本编辑器中打开 index.html 文件，并对标记进行更改。例如，将 H1 标题从“Azure 应用服务 - 示例静态 HTML 站点”更改为只是“Azure 应用服务”。

在本地终端窗口中，提交在 Git 中所做的更改，然后将代码更改推送到 Azure。

git commit -am "updated HTML"
git push azure master

完成部署后，刷新浏览器以查看所做的更改。

已更新的示例应用主页

管理新 Azure Web 应用

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

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

在门户中导航到 Azure Web 应用

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

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

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

清理资源

若要删除通过此快速入门创建的所有资源，请运行以下命令：

az group delete --name myResourceGroup

后续步骤

映射自定义域