在 Azure 存储中托管静态网站

项目
10/30/2023

可以直接从常规用途 V2 或 BlockBlobStorage 帐户中的容器提供静态内容（HTML、CSS、JavaScript 和图像文件）。若要了解详细信息，请参阅 Azure 存储中的静态网站托管。

本文介绍如何使用 Azure 门户、Azure CLI 或 PowerShell 启用静态网站托管。

启用静态网站托管

静态网站托管是必须在存储帐户上启用的一项功能。

登录到 Azure 门户即可开始操作。
找到存储帐户，然后选中该帐户以显示其“概述”窗格。
在“概述”窗格中，选择“功能”选项卡。接下来，选择“静态网站”以显示静态网站的配置页面。
选择“启用”，启用针对存储帐户的静态网站托管功能。
在“索引文档名称”字段中，指定一个默认索引页（例如：index.html）。

当用户导航到静态网站的根目录时，会显示默认索引页。
在“错误文档路径”字段中，指定一个默认错误页（例如：404.html）。

当用户尝试导航到静态网站中不存在的页面时，会显示默认错误页。
单击“保存”以完成静态网站配置。
此时会显示确认消息。静态网站终结点和其他配置信息显示在“概述”窗格中。

可以使用 Azure CLI 启用静态网站托管。

如果在本地安装了 Azure CLI，请打开命令控制台应用程序，例如 Windows PowerShell。
如果你的标识已关联到多个订阅，请将活动订阅设置为将托管你的静态网站的存储帐户的订阅。
```
az account set --subscription <subscription-id>
```
将 <subscription-id> 占位符值替换为你的订阅 ID。
启用静态网站托管。
```
az storage blob service-properties update --account-name <storage-account-name> --static-website --404-document <error-document-name> --index-document <index-document-name>
```
- 将 <storage-account-name> 占位符值替换为存储帐户的名称。
- 将 <error-document-name> 占位符替换为当浏览器请求站点上不存在的页面时向用户显示的错误文档的名称。
- 将 <index-document-name> 占位符替换为索引文档的名称。该文档通常是“index.html”。

可以使用 Azure PowerShell 模块启用静态网站托管。

打开 Windows PowerShell 命令窗口。
验证你是否具有 Azure PowerShell 模块 Az 版本 0.7 或更高版本。
```
Get-InstalledModule -Name Az -AllVersions | select Name,Version
```
如果需要进行安装或升级，请参阅安装 Azure PowerShell 模块。
运行 Connect-AzAccount 命令以登录 Azure 订阅，并按照屏幕上的说明操作。
```
Connect-AzAccount -Environment AzureChinaCloud
```
如果你的标识与多个订阅相关联，请将你的活动订阅设置为将托管静态网站的存储帐户的订阅。
```
$context = Get-AzSubscription -SubscriptionId <subscription-id>
Set-AzContext $context
```
将 <subscription-id> 占位符值替换为你的订阅 ID。
获取定义了要使用的存储帐户的存储帐户上下文。
```
$storageAccount = Get-AzStorageAccount -ResourceGroupName "<resource-group-name>" -AccountName "<storage-account-name>"
$ctx = $storageAccount.Context
```
- 将 <resource-group-name> 占位符值替换为资源组的名称。
- 将 <storage-account-name> 占位符值替换为存储帐户的名称。
启用静态网站托管。
```
Enable-AzStorageStaticWebsite -Context $ctx -IndexDocument <index-document-name> -ErrorDocument404Path <error-document-name>
```
- 将 <error-document-name> 占位符替换为当浏览器请求站点上不存在的页面时向用户显示的错误文档的名称。
- 将 <index-document-name> 占位符替换为索引文档的名称。该文档通常是“index.html”。

上传文件

以下说明介绍如何使用 Azure 门户来上传文件。还可以使用 AzCopy、PowerShell、CLI 或可将文件上传到帐户的 $web 容器的任何自定义应用程序。有关使用 Visual Studio Code 上传文件的分步教程，请参阅教程：在 Blob 存储上托管静态网站。

在 Azure 门户中，导航到包含静态网站的存储帐户。在左侧导航窗格中选择“容器”，以显示容器列表。
在“容器”窗格中，选择 $web 容器以打开容器的“概述”窗格。
在“概述”窗格中，选择“上传”图标以打开“上传 Blob”窗格。接下来，选择“上传 Blob”窗格中的“文件”字段以打开文件浏览器。导航到要上传的文件，将其选中，然后选择“打开”以填充“文件”字段。（可选）选中“文件存在时覆盖”复选框。
如果希望浏览器显示文件的内容，请确保将该文件的内容类型设置为 text/html。若要验证这一点，请选择在上一步中上传的 Blob 的名称，以打开其“概述”窗格。确保在 CONTENT-TYPE 属性字段中设置该值。

注意

对于通常可识别的扩展名（例如 .html），此属性会自动设置为 text/html。但是，在某些情况下，你必须自行设置此项。如果你没有将此属性设置为 text/html，则浏览器将提示用户下载文件而不是呈现内容。可以在上一步中设置此属性。

将对象从源目录上传到 $web 容器。

az storage blob upload-batch -s <source-path> -d '$web' --account-name <storage-account-name>

注意

如果浏览器提示用户下载文件而不是呈现内容，则可以将 --content-type 'text/html; charset=utf-8' 追加到命令。

将 <storage-account-name> 占位符值替换为存储帐户的名称。
将 <source-path> 占位符替换为要上传的文件所在位置的路径。

注意

你可以使用本地计算机上任何位置的路径（例如：C:\myFolder）。

将对象从源目录上传到 $web 容器。

# upload a file
set-AzStorageblobcontent -File "<path-to-file>" `
-Container `$web `
-Blob "<blob-name>" `
-Context $ctx

注意

如果浏览器提示用户下载文件而不是呈现内容，则可以将 -Properties @{ ContentType = "text/html; charset=utf-8";} 追加到命令。

将 <path-to-file> 占位符值替换为要上传的文件的完全限定的路径（例如：C:\temp\index.html）。
将 <blob-name> 占位符值替换为要为生成的 blob 提供的名称（例如：index.html）。

查找网站 URL

可以使用网站的公共 URL 从浏览器查看网站的页面。

在存储帐户的“帐户概述”页旁显示的窗格中，选择“静态网站”。你的站点的 URL 显示在“主终结点”字段中。

Azure Storage static websites metrics metric

使用以下命令查找静态网站的公共 URL：

az storage account show -n <storage-account-name> -g <resource-group-name> --query "primaryEndpoints.web" --output tsv

将 <storage-account-name> 占位符值替换为存储帐户的名称。
将 <resource-group-name> 占位符值替换为资源组的名称。

使用以下命令查找静态网站的公共 URL：

 $storageAccount = Get-AzStorageAccount -ResourceGroupName "<resource-group-name>" -Name "<storage-account-name>"
Write-Output $storageAccount.PrimaryEndpoints.Web

将 <resource-group-name> 占位符值替换为资源组的名称。
将 <storage-account-name> 占位符值替换为存储帐户的名称。

在静态网站页面上启用指标

启用指标后，指标仪表板会报告有关 $web 容器中的文件的流量统计信息。

单击“存储帐户”菜单“监视”部分下的“指标” 。

注意

将通过挂接到不同的指标 API 来生成指标数据。门户只会显示在给定时间范围内使用的 API 成员，以便重点关注可返回数据的成员。为确保能够选择所需的 API 成员，第一步是展开期限。
单击“期限”按钮，选择一个期限，然后单击“应用”。
从“命名空间”下拉列表中选择“Blob”。
然后选择“传出”指标。
从“聚合”选择器中选择“总和”。
单击“添加筛选器”按钮，并从“属性”选择器中选择“API 名称”。
在“值”选择器中选中“GetWebContent”旁边的复选框，以填充指标报告。

注意

只有在给定的期限内使用该 API 成员时，才会显示 GetWebContent 复选框。门户只会显示在给定时间范围内使用的 API 成员，以便重点关注可返回数据的成员。如果在此列表中找不到特定的 API 成员，请展开期限。