免费Azure Static Web Apps – Tim Corey解释的设置和部署

Microsoft Azure提供多种方式在云中托管Web应用程序，从Azure应用服务中的Azure Web应用到虚拟机和容器。 在本文中，我们特别关注Azure静态Web应用，以下是Tim Corey的完整演练。 这是对免费Azure静态Web应用如何工作的深入探讨，如何使用Azure门户创建它们，以及开发人员如何使用GitHub和持续部署直接从源代码部署Web应用程序。

Tim Corey的"设置和部署到免费Azure静态Web应用"视频逐步演示了使用Microsoft Azure服务创建和部署静态Web应用。 他演示了如何托管网站，通过资源组管理Web应用，并使用完全托管的平台部署简单的HTML网站和Blazor WebAssembly应用程序。 这篇文章详细解释了他的视频，其中包括标题中参考的时间戳。

什么是Azure静态Web应用以及它们的重要性

在视频的开始，Tim Corey解释道，Azure静态Web应用允许您免费部署任意多的Web应用程序。 他强调这些应用程序通过Microsoft Azure数据中心全球托管，并通过内容交付网络传递，确保了高可用性、负载均衡和低延迟用户体验。

Tim指出，这些Web应用支持身份验证、API应用和与RESTful API的集成。即使在免费套餐中，Azure静态Web应用也提供增强的安全性和高性能，而无需管理服务器、虚拟机或底层基础设施。 这是使用平台即服务而不是管理Azure虚拟机或本地服务器的重要优势之一。

他解释说，Azure静态Web应用非常适合前端Web应用程序，例如HTML、CSS、JavaScript、React和Blazor WebAssembly，但不适用于需要服务器端处理的应用程序。

视频范围和Azure学习环境

Tim解释说，这个视频提供了一个有针对性的教程，而不是所有Azure服务的完整概览。 虽然Azure应用服务支持多种语言、移动应用、API应用，甚至是Docker容器，但此视频集中在Microsoft Azure中的一个特定服务上。

他提到如果观众希望更深入地了解安全性、成本管理和关键任务应用等主题，这些主题在他的 Azure 课程中都有涉及。 然而，这里目标是展示如何快速地使用Azure静态Web应用和持续部署创建和部署Web应用。

为静态网站创建GitHub存储库

Tim首先创建了一个新的GitHub存储库，解释说GitHub是免费的，并且与Azure服务无缝集成。 该存储库将包含一个简单静态网站的源代码。

他将存储库设为私有状态，添加了README文件，并选择了适合Visual Studio和Visual Studio Code的.gitignore文件。 Tim澄清，虽然他使用的是Visual Studio Code，但相同的过程适用于Visual Studio。

这个存储库代表了使用Azure托管网站的起点。 Tim强调，Azure静态Web应用直接从源代码部署，使持续部署变得简单可靠。

构建简单的HTML Web应用程序

使用Visual Studio Code，Tim创建了一个index.html文件，作为网站的入口点。他使用Emmet快捷方式生成了一个基本的HTML结构，并添加了最少的内容以展示功能。

这一步展示了如何在没有任何后端服务、数据库或服务器的情况下部署基本的Web应用程序。 Tim明确指出，这种简化是有意为之的，因为Azure静态Web应用专为前端工作负载设计。

一旦完成，他将更改提交并将源代码推送到GitHub，随后触发部署流水线。

在Azure门户中创建Azure静态Web应用

Tim切换到Azure门户并创建了一个新的静态Web应用资源。 他解释了创建资源组的重要性，指出资源组可以更轻松地管理资源、清理环境并避免不必要的成本。

他强调选择免费套餐，解释说免费套餐快速、可靠并足够满足大多数小型企业网站和个人项目的需求。 虽然Azure应用服务计划可能需要应用服务计划和月费，但Azure静态Web应用在免费套餐中完全消除了这种复杂性。

Tim简要提及他自己的网站运行在Azure静态Web应用上，展示了这种服务在生产中的真实使用。

连接GitHub和启用持续部署

Tim将Azure静态Web应用连接到GitHub，选择了存储库和分支。 他解释说Azure会自动设置一个GitHub Actions工作流来处理持续部署。

这个工作流不需要手动部署步骤。 每当源代码发生变化时，Web应用都会被重新构建并自动部署。 Tim指出，这是现代云平台的关键特性，也是使用Microsoft Azure托管Web的主要优势之一。

部署令牌和安全配置

Tim导航到GitHub存储库设置，显示存储为秘密的部署令牌。 此令牌允许GitHub和Azure之间的安全通信。

他解释说，这种设置提供了增强的安全性，而无需开发人员手动配置凭据。 Azure静态Web应用API令牌确保只有授权的工作流才能部署应用程序。

查看已部署的静态网站

部署完成后，Tim直接从Azure门户打开了实时网站。 该站点现在可公开访问并托管在云中。

他解释说，这个相同的过程适用于其他前端框架，因为它们最终都会生成Azure静态Web应用能够有效服务的静态文件。不需要应用服务计划、虚拟机或后端服务器。

部署Blazor WebAssembly应用

随后Tim展示了部署Blazor WebAssembly独立应用，强调Blazor Web应用和Blazor WebAssembly之间的区别。

他解释说，Blazor WebAssembly完全在客户端上运行，适用于Azure静态Web应用。像ASP.NET Core MVC、PHP或Java后端这样的服务器端技术则需要使用Azure Web应用。

本节强化了Azure静态Web应用是为客户机专用的Web应用设计的。

创建和测试Blazor应用程序

使用Visual Studio，Tim创建了Blazor WebAssembly项目，选择.NET 9，并启用HTTPS和渐进式Web应用支持等功能。

他在本地运行应用以确认在部署前工作正常，加强了生产准备的最佳实践。 经过验证后，他使用Visual Studio直接创建了一个GitHub存储库并推送源代码。

将Blazor部署到Azure静态Web应用

Tim创建了另一个静态Web应用资源并将其连接到Blazor存储库。 他强调GitHub Actions工作流会自动配置特定于Blazor的路径，例如输出目录。

这展示了Azure如何支持多种编程语言和框架，而无需手动配置。 该平台抽象了底层基础设施和构建复杂性。

构建过程和部署完成

Tim解释说，由于编译和优化步骤，Blazor构建需要更长时间。 Azure在部署期间修剪应用，提高性能。

一旦完成，Blazor WebAssembly应用即在Microsoft Azure的云基础设施上全球可访问并托管。

Azure静态Web应用的附加功能

Tim简要介绍了其他功能，包括：

• 自定义域名

• 带有内置安全的API集成

• 部署槽，如开发、登台和生产槽

他解释说，API自动锁定，防止未经授权的访问并简化集成。

使用资源组清理资源

最后，Tim删除资源组，展示了Azure如何允许开发人员一次性删除所有相关资源。 这在测试云服务时尤为重要，以避免意外费用。

他警告说，删除资源组是永久性的，无法撤销。

何时使用Azure静态Web应用以及何时不使用

Tim最后澄清，Azure静态Web应用不适合服务器端工作负载，如PHP应用、MVC应用或Blazor Web应用。

它们适用于使用HTML、JavaScript、CSS、React、Angular、Vue和Blazor WebAssembly构建的前端Web应用。 因为一切都在客户端上运行，这些应用可以完全免费托管。

正如Tim Corey在整段视频中演示的那样，Azure静态Web应用提供了一个简单、安全、完全托管的方式来使用Microsoft Azure部署现代Web应用程序——无需担心服务器、扩展或基础设施。