您现在访问的是微软AZURE全球版技术文档网站,若需要访问由世纪互联运营的MICROSOFT AZURE中国区技术文档网站,请访问 https://docs.azure.cn.

在 Azure 中创建静态 HTML Web 应用

08/23/2019

本文内容

Azure 应用服务提供高度可缩放、自修复的 Web 托管服务。 本快速入门演示如何将基本 HTML+CSS 站点部署到 Azure 应用服务。 你将在 Cloud Shell 中完成本快速入门,但是也可以使用 Azure CLI 在本地运行这些命令。

html5写一个简单app html怎么做app_html5写一个简单app

如果还没有 Azure 订阅,可以在开始前创建一个免费帐户。

使用 Azure Cloud Shell

Azure 托管 Azure Cloud Shell(一个可通过浏览器使用的交互式 shell 环境)。 可以将 Bash 或 PowerShell 与 Cloud Shell 配合使用来使用 Azure 服务。 可以使用 Azure Cloud Shell 预安装的命令来运行本文中的代码,而不必在本地环境中安装任何内容。

若要启动 Azure Cloud Shell,请执行以下操作:

选项

示例/链接

选择代码块右上角的“试用”。 选择“试用”不会自动将代码复制到 Cloud Shell。

html5写一个简单app html怎么做app_Azure_02

转到 https://shell.azure.com 或选择“启动 Cloud Shell”按钮可在浏览器中打开 Cloud Shell。

html5写一个简单app html怎么做app_Azure_03

选择 Azure 门户右上角菜单栏上的 Cloud Shell 按钮。

html5写一个简单app html怎么做app_如何用html创建app_04

若要在 Azure Cloud Shell 中运行本文中的代码,请执行以下操作:

启动 Cloud Shell。

选择代码块上的“复制”按钮以复制代码。

在 Windows 和 Linux 上选择 Ctrl+Shift+V 将代码粘贴到 Cloud Shell 会话中,或在 macOS 上选择 Cmd+Shift+V 将代码粘贴到 Cloud Shell 会话中。

选择 Enter 运行此代码。

下载示例

在 Cloud Shell 中,创建一个 quickstart 目录,然后切换到该目录。

mkdir quickstart

cd $HOME/quickstart

接下来请运行以下命令,将示例应用存储库克隆到快速入门目录。

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

创建 Web 应用

切换到包含示例代码的目录并运行 az webapp up 命令。 在以下示例中,请将 替换为一个唯一的应用名称。 静态内容由 --html 标志予以指示。

cd html-docs-hello-world

az webapp up --location westeurope --name --html

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

创建一个默认的资源组。

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

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

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

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

{

"app_url": "https://<app_name>.azurewebsites.net",

"location": "westeurope",

"name": "<app_name>",

"os": "Windows",

"resourcegroup": "appsvc_rg_Windows_westeurope",

"serverfarm": "appsvc_asp_Windows_westeurope",

"sku": "FREE",

"src_path": "/home/<username>/quickstart/html-docs-hello-world ",

< JSON data removed for brevity. >

}

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

浏览到应用

在浏览器中转到应用 URL:http://.azurewebsites.net。

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

html5写一个简单app html怎么做app_html5写一个简单app

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

更新并重新部署应用

在 Cloud Shell 中,键入 nano index.html 以打开 nano 文本编辑器。 在

标题标记中,将“Azure 应用服务 - 示例静态 HTML 站点”更改为“Azure 应用服务”,如下所示。

html5写一个简单app html怎么做app_html5写一个简单app_06

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

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

az webapp up --location westeurope --name --html

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

html5写一个简单app html怎么做app_如何用html创建app_07

管理新的 Azure 应用

若要管理所创建的 Web 应用,请在 Azure 门户中,搜索并选择“应用服务”"。

html5写一个简单app html怎么做app_如何用html创建app_08

在“应用服务”页上,选择 Azure 应用的名称。

html5写一个简单app html怎么做app_Shell_09

这里我们可以看到 Web 应用的概述页。 并可以执行基本的管理任务,例如浏览、停止、启动、重新启动和删除。

html5写一个简单app html怎么做app_如何用html创建app_10

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

清理资源

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

az group delete --name appsvc_rg_Windows_westeurope

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