练习 - 创建 Azure 静态 Web 应用

在本练习中，你将创建一个 Azure Static Web Apps 实例，其中包含自动生成并发布你的应用程序的 GitHub Action。

创建静态 Web 应用

你现在已创建了 GitHub 存储库，可以从 Azure 门户创建静态 Web 应用实例。

本模块使用 Azure 沙盒提供免费的临时 Azure 订阅，可以使用它完成练习。 继续之前，请确保在本页顶部激活沙盒。

1. 登录 Azure 门户，确保使用激活沙盒时所用的同一个帐户登录。

2. 在 Azure 主页的“Azure 服务”下，选择“创建资源”。 此时会显示“创建资源”窗格。

3. 在“市场”搜索框中，搜索并选择“静态 Web 应用”。 此时将显示“静态 Web 应用”窗格。

4. 选择“创建”。 此时将显示“创建 Static Web App”窗格。 配置新应用，并将它链接到 GitHub 存储库。

5. 在“基本信息”选项卡上，为每个设置输入以下值。

   设置	值
   项目详细信息
   订阅	Concierge 订阅
   资源组	[沙盒资源组名称]
   静态 Web 应用详细信息
   名称	给应用命名。 有效字符为 a-z、0-9（不区分大小写）和 -。
   托管计划
   应用程序的定价层	选择“免费”
   Azure Functions 和暂存详细信息
   Azure Functions API 和过渡环境的区域	选择离你最近的区域
   部署详细信息
   来源	选择“GitHub”
   GitHub 帐户	选择“使用 GitHub 登录”。 此时将显示“授权 Azure Static Web Apps”窗格。 选择“授权 Azure-App-Service-Static-Web-Apps”。 输入密码。
   组织	选择在其中创建存储库的组织
   存储库	my-static-blazor-app
   分支	main
   生成详细信息
   生成预设	Blazor
   应用位置	客户端
   API 位置	Api
   输出位置	wwwroot

6. 选择“查看 + 创建”>“创建”。

7. 部署完成后，选择“转到资源”。 此时将显示“静态 Web 应用”窗格。

审阅 GitHub 操作

在此阶段，静态 Web 应用实例会在 Azure 中创建，但应用尚未部署。 Azure 在存储库中创建的 GitHub 操作会自动运行，以触发应用的首次生成和部署，但需要几分钟时间来完成。

可以通过选择以下链接转到 GitHub 存储库的“操作”页面，来检查生成和部署操作的状态：

完成之后：

1. 选择“Azure Static Web Apps CI/CD”。

2. 选择标题为“ci: 添加 Azure Static Web Apps 工作流文件”的提交。

3. 选择“生成并部署作业”链接

在此处，可以在应用生成时观察其进度。

查看网站

GitHub Actions 完成生成并发布 Web 应用后，你可以浏览以查看正在运行的应用。

在 Azure 门户中选择“URL”链接，以在浏览器中访问应用。

你的应用现已全局可用，但仍停滞在“正在加载数据”处，因为尚无数据或 API。 将在下一个部分中为 Web 应用添加 API。

恭喜！ 你已将第一个应用部署到 Azure Static Web Apps！

后续步骤

应用缺少用于其购物列表的 API。 接下来，你将了解如何将 Azure Functions API 添加到应用，该应用与静态资产一起发布到 Azure。