你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站,请访问 https://docs.azure.cn。
本教程介绍如何生成静态网站并将其部署到 Azure 存储。 完成后,你将拥有一个静态网站,用户可以公开访问。
本教程中,您将学习如何:
- 配置静态网站托管
- 部署 Hello World 网站
静态网站存在一些限制。 例如,如果要配置标头,则必须使用 Azure 内容分发网络 (Azure CDN)。 无法将标头配置为静态网站功能本身的一部分。 此外,不支持 AuthN 和 AuthZ。
如果这些功能对你的方案很重要,请考虑使用 Azure Static Web Apps。 这是静态网站的绝佳替代方案,也适用于不需要 Web 服务器呈现内容的情况。 可以配置标头,并且完全支持 AuthN/AuthZ。 Azure Static Web Apps 还提供了从 GitHub 源到全局部署的完全托管的持续集成和持续交付 (CI/CD) 工作流。
此视频演示如何在 Blob 存储上托管静态网站。
视频中的步骤也在以下部分进行了介绍。
先决条件
若要访问 Azure 存储,需要一个 Azure 订阅。 如果还没有订阅,请在开始前创建一个免费帐户。
对 Azure 存储的所有访问都通过存储帐户进行。 对于本快速入门,请使用 Azure 门户、Azure PowerShell 或 Azure CLI 创建存储帐户。 有关创建存储帐户的帮助,请参阅 “创建存储帐户”。
注释
静态网站现在可用于常规用途 v2 标准存储帐户,以及启用了分层命名空间的存储帐户。
本教程使用面向程序员的免费工具 Visual Studio Code 生成静态网站并将其部署到 Azure 存储帐户。
安装 Visual Studio Code 后,安装 Azure 存储预览版扩展。 此扩展将 Azure 存储管理功能与 Visual Studio Code 集成。 你将使用扩展将静态网站部署到 Azure 存储。 若要安装扩展,请执行以下作:
启动 Visual Studio Code。
在工具栏上,单击“ 扩展”。 搜索 Azure 存储,然后从列表中选择 Azure 存储 扩展。 然后单击“ 安装 ”按钮安装扩展。
配置静态网站托管
第一步是将存储帐户配置为在 Azure 门户中托管静态网站。 为静态网站托管配置帐户时,Azure 存储会自动创建名为 $web的容器。 $web容器将包含静态网站的文件。
在 Web 浏览器中登录到 Azure 门户 。
找到存储帐户并显示帐户概览。
选择 “静态网站 ”以显示静态网站的配置页。
选择 “已启用” 以启用存储帐户的静态网站托管。
在 “索引文档名称 ”字段中,指定 默认索引页index.html。 当用户导航到静态网站的根时,将显示默认索引页。
在 “错误文档路径 ”字段中,指定默认错误页 404.html。 当用户尝试导航到静态网站中不存在的页面时,将显示默认错误页。
单击“ 保存”。 Azure 门户现在显示您的静态网站终结点。
部署 Hello World 网站
接下来,使用 Visual Studio Code 创建 Hello World 网页,并将其部署到 Azure 存储帐户中托管的静态网站。
在本地文件系统上创建名为 mywebsite 的空文件夹。
启动 Visual Studio Code,然后打开刚刚从 资源管理器 面板创建的文件夹。
在 mywebsite 文件夹中创建默认索引文件并将其命名 为index.html。
在编辑器中打开 index.html ,将以下文本粘贴到文件中,然后将其保存:
<!DOCTYPE html> <html> <body> <h1>Hello World!</h1> </body> </html>创建默认错误文件并将其命名 为404.html。
在编辑器中打开 404.html ,将以下文本粘贴到文件中,然后将其保存:
<!DOCTYPE html> <html> <body> <h1>404</h1> </body> </html>右键单击资源管理器面板中的 mywebsite 文件夹,然后选择“部署到静态网站...”以部署网站。 系统会提示你登录到 Azure 以检索订阅列表。
选择包含存储帐户的订阅,已经为该帐户启用静态网站托管功能。 接下来,出现提示时选择存储帐户。
Visual Studio Code 现在会将文件上传到 Web 终结点,并显示成功状态栏。 启动网站以在 Azure 中查看它。
你已成功完成本教程,并将静态网站部署到 Azure。
功能支持
启用 Data Lake Storage Gen2、网络文件系统 (NFS) 3.0 协议或 SSH 文件传输协议 (SFTP) 可能会影响对此功能的支持。 如果已启用这些功能中的某一项,请参阅 Azure 存储帐户中的 Blob 存储功能支持,以评估对此功能的支持。
后续步骤
本教程介绍了如何为静态网站托管配置 Azure 存储帐户,以及如何创建静态网站并将其部署到 Azure 终结点。
接下来,了解如何使用静态网站配置自定义域。