在本练习中，你将了解如何使用 Azure 静态 Web 应用将 ACS React 应用和 Azure Functions 部署到云。
在浏览器中访问 Azure 门户 并登录。
在顶部搜索栏中键入 静态 Web 应用 ，然后从显示的选项中选择 “静态 Web 应用 ”。
在工具栏中选择“ 创建 ”。
执行以下任务：
- 选择订阅。
- 选择要使用的资源组（根据需要创建新资源组）。 如果需要，可以使用用于 ACS 的同一资源组。
- 输入 acs-to-teams-meeting 的 Azure Static Web Apps 名称。
- 选择 免费 计划类型。
- 选择区域。
选择 GitHub 单选按钮并登录你的 GitHub 帐户。
登录后，选择 GitHub：
- 组织
- 存储库：选择您在本教程中分叉的 MicrosoftCloud 存储库
- 分支：选择 主
在 “生成详细信息 ”部分中执行以下任务：
- 生成预设： React
- 应用位置： /samples/acs-to-teams-meeting/client/react
- API 位置：
/samples/acs-to-teams-meeting/server/typescript
- 输出位置：build
选择“查看 + 创建”。
查看详细信息并选择“创建”。
请注意为静态 Web 应用创建的 URL。 将“概述”屏幕上显示的 URL 复制到文件。 本练习中稍后会用到它。
选择“设置”-->为新的静态 Web 应用配置。
通过选择“+ 添加”按钮，将以下所有键/值对添加到应用程序设置中。 在 服务器/typescript 文件夹中获取 local.settings.json 的值。
# Get the values from your local.settings.json file TENANT_ID: <YOUR_VALUE> CLIENT_ID: <YOUR_VALUE> CLIENT_SECRET: <YOUR_VALUE> USER_ID: <YOUR_VALUE> ACS_CONNECTION_STRING: <YOUR_VALUE>在 Azure 门户的“配置”屏幕顶部选择“ 保存 ”按钮。
设置完 Azure 静态 Web 应用后，返回到浏览器中的 GitHub 存储库（前面分支的存储库），并注意到已将 .yml 文件添加到 .github/workflows 文件夹中。
通过从本地 MicrosoftCloud 存储库的根目录运行以下命令，将最新更改从 GitHub 存储库拉取到计算机：
git pull在 VS Code 的 .github/workflows 文件夹中打开.yml文件，并在注释后
###### End of Repository/Build Configurations ######立即添加以下 YAML。 将 <YOUR_AZURE_SWA_DOMAIN> 占位符替换为 Azure 静态 Web 应用 URL 值。重要：确保
env:属性正确缩进。 它应该与上面的with:属性缩进匹配。env: # Add environment variables here REACT_APP_ACS_USER_FUNCTION: https://<YOUR_AZURE_SWA_DOMAIN>/api/httpTriggerAcsToken REACT_APP_TEAMS_MEETING_FUNCTION: https://<YOUR_AZURE_SWA_DOMAIN>/api/httpTriggerTeamsUrl注释
这将将环境变量添加到 React 应用的生成过程中，以便它知道要调用哪些 API 来获取 ACS 用户令牌以及创建 Teams 会议。
保存 .yml 文件并将更改推送到 GitHub 存储库。 这将触发 React 应用程序的新版本，然后将其部署到 Azure 静态 Web 应用。
生成过程完成后，访问 Azure 静态 Web 应用的 URL，应会看到应用程序正在运行。
已成功使用 Azure Static Web Apps 部署应用程序！