在 Azure 存储中托管静态网站

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

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

启用静态网站托管

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

  1. 登录到 Azure 门户即可开始操作。

  2. 找到存储帐户,然后选中该帐户以显示其“概述”窗格。

  3. 在“概述”窗格中,选择“功能”选项卡。接下来,选择“静态网站”以显示静态网站的配置页面。

    Image showing how to access the Static website configuration page within the Azure portal

  4. 选择“启用”,启用针对存储帐户的静态网站托管功能。

  5. 在“索引文档名称”字段中,指定一个默认索引页(例如:index.html)。

    当用户导航到静态网站的根目录时,会显示默认索引页。

  6. 在“错误文档路径”字段中,指定一个默认错误页(例如:404.html)。

    当用户尝试导航到静态网站中不存在的页面时,会显示默认错误页。

  7. 单击“保存”以完成静态网站配置。

    Image showing how to set the Static website properties within the Azure portal

  8. 此时会显示确认消息。 静态网站终结点和其他配置信息显示在“概述”窗格中。

    Image showing the Static website properties within the Azure portal

上传文件

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

  1. 在 Azure 门户中,导航到包含静态网站的存储帐户。 在左侧导航窗格中选择“容器”,以显示容器列表。

  2. 在“容器”窗格中,选择 $web 容器以打开容器的“概述”窗格。

    Image showing where to locate the website storage container in Azure portal

  3. 在“概述”窗格中,选择“上传”图标以打开“上传 Blob”窗格。 接下来,选择“上传 Blob”窗格中的“文件”字段以打开文件浏览器。 导航到要上传的文件,将其选中,然后选择“打开”以填充“文件”字段。 (可选)选中“文件存在时覆盖”复选框。

    Image showing how to upload files to the static website storage container

  4. 如果希望浏览器显示文件的内容,请确保将该文件的内容类型设置为 text/html。 若要验证这一点,请选择在上一步中上传的 Blob 的名称,以打开其“概述”窗格。 确保在 CONTENT-TYPE 属性字段中设置该值。

    Image showing how to verify blob content types

    注意

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

查找网站 URL

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

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

Azure Storage static websites metrics metric

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

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

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

    Metrics link

    注意

    将通过挂接到不同的指标 API 来生成指标数据。 门户只会显示在给定时间范围内使用的 API 成员,以便重点关注可返回数据的成员。 为确保能够选择所需的 API 成员,第一步是展开期限。

  2. 单击“期限”按钮,选择一个期限,然后单击“应用”。

    Azure Storage static websites metrics time range

  3. 从“命名空间”下拉列表中选择“Blob”。

    Azure Storage static websites metrics namespace

  4. 然后选择“传出”指标。

    Screenshot that shows the Azure Storage static websites Egress metric.

  5. 从“聚合”选择器中选择“总和”。

    Azure Storage static websites metrics aggregation

  6. 单击“添加筛选器”按钮,并从“属性”选择器中选择“API 名称”。

    Azure Storage static websites metrics API name

  7. 在“值”选择器中选中“GetWebContent”旁边的复选框,以填充指标报告。

    Azure Storage static websites metrics GetWebContent

    注意

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

后续步骤