你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。
本文演示如何使用 Azure Static Web Apps 部署 Fluid 应用。 FluidHelloWorld 存储库包含一个名为 DiceRoller 的 Fluid 应用程序，允许所有连接的客户端投掷骰子并查看结果。 在本作说明中，你将使用 Visual Studio Code 扩展将 DiceRoller 应用程序部署到 Azure 静态 Web 应用。
如果没有 Azure 订阅， 请创建一个免费试用帐户。
先决条件
为存储库创建分支和克隆
导航到 https://github.com/microsoft/FluidHelloWorld 并单击“创建分支”按钮以创建你自己拥有的 FluidHelloWorld 存储库分支。
然后使用以下命令将分支克隆到本地计算机。
git clone -b main-azure https://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/FluidHelloWorld.git
请确保将 <YOUR_GITHUB_ACCOUNT_NAME> 替换为您的 GitHub 用户名。
接下来，打开 Visual Studio Code，然后转到 “文件 > 打开文件夹 ”以在编辑器中打开克隆的存储库。
连接到 Azure Fluid Relay
可以通过提供创建 Azure 资源时唯一生成的租户 ID 和密钥来连接到 Azure Fluid Relay。 可以生成自己的令牌提供程序实现，也可以使用由 Fluid Framework 提供 AzureFunctionTokenProvider 的两个令牌提供程序实现。
若要详细了解如何使用 InsecureTokenProvider 进行本地开发，请参阅在应用中连接到服务和身份验证和授权。
使用 AzureFunctionTokenProvider
AzureFunctionTokenProvider 是一个令牌提供程序，它不公开客户端代码中的密钥，可在生产方案中使用。 此令牌提供程序实现可用于从 HTTPS 终结点中提取令牌，该终结点负责使用租户密钥对访问令牌进行签名。 这提供了一种安全的方式来生成令牌并将其传回客户端应用。
import { AzureClient, AzureFunctionTokenProvider } from "@fluidframework/azure-client";
const config = {
tenantId: "myTenantId",
tokenProvider: new AzureFunctionTokenProvider("https://myAzureAppUrl"+"/api/GetAzureToken", { userId: "test-user",userName: "Test User" }),
endpoint: "https://myServiceEndpointUrl",
type: "remote",
};
const clientProps = {
connection: config,
};
const client = new AzureClient(clientProps);
若要使用此令牌提供程序，需要部署用于对令牌进行签名的 HTTPS 终结点，并将 URL 传递给 AzureFunctionTokenProvider。
使用 Azure 静态 Web 应用部署 Azure 函数
Azure 静态 Web 应用允许开发全堆栈网站，而无需处理整个 Web 托管环境的服务器端配置。 可以将 Azure Functions 与静态网站一起部署。 使用此功能，可以部署一个 HTTP 触发的 Azure 函数，用于对令牌进行签名。
有关将 Azure 函数支持的 API 部署到静态 Web 应用的详细信息，请参阅 使用 Azure Functions 将 API 添加到 Azure 静态 Web 应用。
注释
可以使用 “实现 Azure 函数”中的 Azure 函数代码示例来对令牌进行签名 以实现函数。
部署 Azure 函数后，必须更新传递给 AzureFunctionTokenProvider 的 URL。
import { AzureClient } from "@fluidframework/azure-client";
const config = {
tenantId: "myTenantId",
tokenProvider: new AzureFunctionTokenProvider("https://myStaticWebAppUrl/api/GetAzureToken", { userId: "test-user",userName: "Test User" }),
endpoint: "https://myServiceEndpointUrl",
type: "remote",
};
const clientProps = {
connection: config,
};
const client = new AzureClient(config);
npm run build从根目录运行命令以重新生成应用。 这将生成一个 dist 文件夹，其中包含应部署到静态 Web 应用的应用程序代码。
登录到 Azure
如果已使用 Azure 服务扩展，则应已登录并可以跳过此步骤。
在 Visual Studio Code 中安装扩展后，需要登录到 Azure 帐户。
在 Visual Studio Code 中，选择 Azure 资源管理器图标，然后选择 “登录到 Azure”，然后按照提示进行作。
登录后，验证 Azure 帐户的电子邮件地址是否显示在状态栏中，订阅将显示在 Azure 资源管理器中：
创建静态 Web 应用
在 Visual Studio Code 中，选择活动栏中的 Azure 徽标以打开 Azure 扩展窗口。
注释
必须登录到 Visual Studio Code 中的 Azure 和 GitHub 才能继续。 如果尚未进行身份验证，扩展将在创建过程中提示你登录到这两个服务。
选择 F1 以打开 Visual Studio Code 命令面板。
在命令框中输入 “创建静态 Web 应用 ”。
选择 “Azure 静态 Web 应用：创建静态 Web 应用...” ，然后选择 Enter。
输入与框架预设选项匹配的设置值。
创建应用后，将在 Visual Studio Code 中显示确认通知。
部署正在进行时，Visual Studio Code 扩展会向你报告生成状态。
部署完成后，可直接导航至你的网站。
若要在浏览器中查看网站，请右键单击静态 Web 应用扩展中的项目，然后选择“ 浏览网站”。
应用程序代码、Azure 函数和生成输出的位置位于
/.github/workflows目录中的azure-static-web-apps-xxx-xxx-xxx.yml工作流文件的一部分。 创建静态 Web 应用时，会自动创建此文件。 它定义用于生成和部署静态 Web 应用的 GitHub Actions。
清理资源
如果不打算继续使用此应用程序，可以通过扩展删除 Azure 静态 Web 应用实例。
在 Visual Studio Code 资源管理器窗口中，返回到 “静态 Web 应用 ”部分，然后右键单击 my-first-static-web-app ，然后选择“ 删除”。
