教程:在 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 存储”扩展。 然后单击“下载”按钮,以便安装此扩展。

    Install the Azure Storage extension in VS Code

配置静态网站托管

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

  1. 在 Web 浏览器中登录到 Azure 门户

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

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

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

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

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

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

    Enable static website hosting for a storage account

部署 Hello World 网站

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

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

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

    Open folder in Visual Studio Code

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

    Create the default index file in 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。

功能支持

启用 Data Lake Storage Gen2、网络文件系统 (NFS) 3.0 协议或 SSH 文件传输协议 (SFTP) 可能会影响对此功能的支持。 如果已启用这些功能中的某一项,请参阅 Azure 存储帐户中的 Blob 存储功能支持,以评估对此功能的支持。

后续步骤

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

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