在 Azure 中创建静态 HTML Web 应用Create a static HTML web app in Azure

Azure 应用服务提供高度可缩放、自修补的 Web 托管服务。Azure App Service provides a highly scalable, self-patching web hosting service. 本快速入门演示如何将基本 HTML+CSS 站点部署到 Azure 应用服务。This quickstart shows how to deploy a basic HTML+CSS site to Azure App Service. 可以使用 Azure CLI 在本地运行这些命令You can run these commands locally with Azure CLI

示例应用主页

如果没有 Azure 订阅,可在开始前创建一个试用帐户If you don't have an Azure subscription, create a trial account before you begin.

下载示例Download the sample

创建一个 quickstart 目录,然后切换到该目录。Create a quickstart directory and then change to it.

mkdir quickstart

cd $HOME/quickstart

接下来请运行以下命令,将示例应用存储库克隆到快速入门目录。Next, run the following command to clone the sample app repository to your quickstart directory.

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

创建 Web 应用Create a web app

切换到包含示例代码的目录并运行 az webapp up 命令。Change to the directory that contains the sample code and run the az webapp up command.

在以下示例中,请将 <app_name> 替换为一个唯一的应用名称。In the following example, replace <app_name> with a unique app name.

cd html-docs-hello-world

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

az webapp up 命令执行以下操作:The az webapp up command does the following actions:

  • 创建一个默认的资源组。Create a default resource group.

  • 创建一个默认的应用服务计划。Create a default app service plan.

  • 创建一个采用指定名称的应用。Create an app with the specified name.

  • 使用 Zip 将文件从当前工作目录部署到 Web 应用。Zip deploy files from the current working directory to the web app.

此命令可能需要花费几分钟时间运行。This command may take a few minutes to run. 运行时,该命令会显示类似于以下示例的信息:While running, it displays information similar to the following example:

{
  "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 值。Make a note of the resourceGroup value. 需要在清理资源部分使用它。You need it for the clean up resources section.

浏览到应用Browse to the app

在浏览器中转到应用 URL:http://<app_name>.chinacloudsites.cnIn a browser, go to the app URL: http://<app_name>.chinacloudsites.cn.

该页作为 Azure 应用服务 Web 应用运行。The page is running as an Azure App Service web app.

示例应用主页

祝贺你!Congratulations! 现已将第一个 HTML 应用部署到应用服务。You've deployed your first HTML app to App Service.

更新并重新部署应用Update and redeploy the app

在终端窗口中,键入 nano index.html 以打开 nano 文本编辑器。In the terminal window, type nano index.html to open the nano text editor. <h1> 标题标记中,将“Azure 应用服务 - 示例静态 HTML 站点”更改为“Azure 应用服务”,如下所示。In the <h1> heading tag, change "Azure App Service - Sample Static HTML Site" to "Azure App Service", as shown below.

Nano index.html

保存更改并退出 nano。Save your changes and exit nano. 使用命令 ^O 来保存,使用 ^X 来退出。Use the command ^O to save and ^X to exit.

现在,需使用同一 az webapp up 命令重新部署应用。You'll now redeploy the app with the same az webapp up command.

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

完成部署后,切换回“浏览到应用”步骤中打开的浏览器窗口,然后刷新页面。Once deployment has completed, switch back to the browser window that opened in the Browse to the app step, and refresh the page.

已更新的示例应用主页

管理新的 Azure 应用Manage your new Azure app

转到 Azure 门户管理创建的 Web 应用。Go to the Azure portal to manage the web app you created.

在左侧菜单中单击“应用程序服务”,然后单击 Azure 应用的名称。From the left menu, click App Services, and then click the name of your Azure app.

在门户中导航到 Azure 应用

随后会显示 Web 应用的概述页。You see your web app's Overview page. 在此处可以执行基本的管理任务,例如浏览、停止、启动、重启和删除。Here, you can perform basic management tasks like browse, stop, start, restart, and delete.

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

左侧菜单提供用于配置应用的不同页面。The left menu provides different pages for configuring your app.

清理资源Clean up resources

在前面的步骤中,在资源组中创建了 Azure 资源。In the preceding steps, you created Azure resources in a resource group. 如果认为将来不需要这些资源,请在 CLI 中运行以下命令以删除资源组。If you don't expect to need these resources in the future, delete the resource group by running the following command in the CLI. 请记住,资源组名称已在创建 Web 应用步骤中自动为你生成。Remember that the resource group name was automatically generated for you in the create a web app step.

az group delete --name appsvc_rg_Windows_chinaeast

此命令可能需要花费一分钟时间运行。This command may take a minute to run.

后续步骤Next steps