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

教程:在 Blob 存储上托管静态网站

本教程介绍如何生成静态网站并将其部署到 Azure 存储。 完成本教程后,你会有一个可供用户公开访问的静态网站。

在本教程中,你将了解如何执行以下操作:

  • 配置静态网站托管
  • 部署 Hello World 网站

必备条件

若要访问 Azure 存储,需要一个 Azure 订阅。 如果还没有订阅,请在开始前创建一个免费帐户

对 Azure 存储进行的所有访问都要通过存储帐户完成。 对于本快速入门,请使用 Azure 门户、Azure PowerShell 或 Azure CLI 创建存储帐户。 有关如何创建存储帐户的帮助,请参阅创建存储帐户

备注

确保创建常规用途 v2 标准存储帐户。 静态网站在任何其他类型的存储帐户中都不可用。

本教程使用可供编程人员免费使用的工具 Visual Studio Code 来生成静态网站并将其部署到 Azure 存储帐户。

安装 Visual Studio Code 以后,请安装 Azure 存储预览版扩展。 此扩展将 Azure 存储管理功能与 Visual Studio Code 集成在一起。 可以使用此扩展将静态网站部署到 Azure 存储。 若要安装此扩展,请执行以下操作:

  1. 启动 Visual Studio Code。

  2. 在工具栏上,请单击“扩展”。 搜索“Azure 存储”,然后从列表中选择“Azure 存储”扩展。 然后单击“下载”按钮,以便安装此扩展。

    在 VS Code 中安装 Azure 存储扩展

登录到 Azure 门户

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

配置静态网站托管

第一步是配置存储帐户,以便在 Azure 门户中托管静态网站。 配置帐户以便进行静态网站托管时,Azure 存储会自动创建名为 $web 的容器。 $web 容器会包含静态网站的文件。

  1. 在 Web 浏览器中打开 Azure 门户

  2. 找到存储帐户并显示帐户概览。

  3. 选择“静态网站”,以显示静态网站的配置页。

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

  5. 在“索引文档名称”字段中,指定 index.html 的默认索引页。 当用户导航到静态网站的根目录时,会显示默认索引页。

  6. 在“错误文档路径”字段中,指定默认错误页 404.html。 当用户尝试导航到静态网站中不存在的页面时,会显示默认错误页。

  7. 单击“ 保存”。 Azure 门户现在会显示静态网站终结点。

    启用针对存储帐户的静态网站托管功能

部署 Hello World 网站

接下来,使用 Visual Studio Code 创建 Hello World 网页,并将其部署到在 Azure 存储帐户中托管的静态网站。

  1. 在本地文件系统上创建名为 mywebsite 的空文件夹。

  2. 启动 Visual Studio Code,打开刚刚在“资源管理器”面板中创建的文件夹。

    在 Visual Studio Code 中打开文件夹

  3. mywebsite 文件夹中创建默认索引文件,并将其命名为 index.html

    在 Visual Studio Code 中创建默认索引文件

  4. 在编辑器中打开 index.html,将以下文本粘贴到文件中,然后进行保存:

    <!DOCTYPE html>
    <html>
      <body>
        <h1>Hello World!</h1>
      </body>
    </html>
    
  5. 创建默认错误文件,将其命名为 404.html

  6. 在编辑器中打开 404.html,将以下文本粘贴到该文件中,然后保存:

    <!DOCTYPE html>
    <html>
      <body>
        <h1>404</h1>
      </body>
    </html>
    
  7. 在“资源管理器”面板的 mywebsite 文件夹下双击,选择“部署到静态网站...”,以便部署网站。 系统会提示你登录到 Azure,以便检索订阅的列表。

  8. 选择包含存储帐户的订阅,已经为该帐户启用静态网站托管功能。 接下来,根据提示选择存储帐户。

Visual Studio Code 现在会将文件上传到 Web 终结点,并显示成功状态栏。 启动网站,在 Azure 中查看它。

你已成功完成本教程并将静态网站部署到 Azure。

后续步骤

本教程介绍了如何为静态网站托管配置 Azure 存储帐户,以及如何创建静态网站并将其部署到 Azure 终结点。

接下来,了解如何为静态网站配置自定义域。