通过

步骤 3 - 部署已启用搜索.NET网站

将启用搜索的网站部署为Azure Static Web Apps网站。 此部署包括适用于网页的 React 应用，以及适用于搜索操作的函数应用。

静态 Web 应用程序使用您在 GitHub 上派生的 azure-search-static-web-app 存储库来拉取部署所需的信息和文件。

在 Visual Studio Code 中创建静态 Web 应用

  1. 在Visual Studio Code中，请确保位于存储库根目录，而不是大容量插入文件夹（例如，azure-search-static-web-app）。

  2. 从活动栏中选择 Azure，然后从侧栏中打开 Resources。

  3. 右键单击 Static Web Apps，然后选择创建静态 Web 应用（高级）。 如果未看到此选项，请验证是否具有Visual Studio Code Azure Functions扩展。

    Visual Studio Code 的截图，Azure Static Web Apps 资源管理器中显示了创建高级静态 Web 应用的选项。

  4. 如果出现一个弹出窗口要求提交更改，请不要提交。 不应将批量导入步骤中的机密提交到存储库。

    若要回滚更改，请在Visual Studio Code选择活动栏中的源代码管理图标，然后在“更改”列表中选择每个已更改的文件，然后选择Discard 更改图标。

  5. 按照提示创建静态 Web 应用：

    提示 输入
    选择新资源的资源组。 为静态应用创建新的资源组。
    输入新静态 Web 应用的名称。 向静态应用提供名称，例如 my-demo-static-web-app。
    选择 SKU 请为本教程选择免费的 SKU。
    选择新资源的位置。 选择你附近的区域。
    选择“生成预设”以配置默认项目结构。 选择“自定义”。
    选择客户端应用程序代码的位置 client

    这是从存储库根目录到静态 Web 应用的路径。
    输入构建输出的路径... build

    这是从静态 Web 应用到生成的文件的路径。

    如果收到有关区域不正确的错误，请确保资源组和静态 Web 应用资源位于错误响应中列出的受支持区域之一。

  6. 创建静态 Web 应用时，也会在本地和您的派生库的 GitHub 上创建 GitHub 工作流 YML 文件。 此工作流将在你的 fork 中执行，构建并部署静态 Web 应用和函数。

    使用以下任一方法检查静态 Web 应用部署的状态：

    • 从通知中选择 Open Actions in GitHub。 这会打开一个浏览器窗口，该窗口指向分支存储库。

    • 选择分支存储库中的“操作”选项卡。 你应该会看到你派生库中所有工作流的列表。

    • 在 Visual Code 中选择 Azure：活动日志。 你应该会看到类似于以下屏幕截图的消息。

      Visual Studio Code 中活动日志的截图。

获取Visual Studio Code中的Azure AI 搜索查询密钥

虽然你可能会希望重用搜索管理密钥进行查询，但这不符合最低特权原则。 Azure函数应使用查询密钥来符合最低特权。

  1. 在Visual Studio Code中，打开新的终端窗口。

  2. 使用此Azure CLI命令获取查询 API 密钥：

    az search query-key list --resource-group YOUR-SEARCH-SERVICE-RESOURCE-GROUP --service-name YOUR-SEARCH-SERVICE-NAME

  3. 请保留此查询密钥，以便在下一节中使用。 该查询密钥可授予对搜索索引的读取访问权限。

在 Azure 门户中添加环境变量

在搜索机密处于设置中之前，Azure函数应用不会返回搜索数据。

  1. 从活动栏中选择 Azure。

  2. 右键单击您的 Static Web Apps 资源，然后选择在门户中打开。

    该Screenshot显示了Visual Studio Code中Azure Static Web Apps资源管理器，并展示了“在门户中打开”选项。

  3. 选择“环境变量”，然后选择“+ 添加应用程序设置”。

    Azure门户中静态 Web 应用环境变量页面的截图

  4. 添加以下每个设置：

    设置 您的搜索资源值
    SearchApiKey 你的搜索查询密钥
    SearchServiceName 你的搜索资源名称
    SearchIndexName good-books
    SearchFacets authors*,language_code

    Azure AI 搜索在筛选集合时需要使用不同于字符串的语法。 在字段名后添加一个 *，表示该字段的类型为 Collection(Edm.String)。 这允许Azure函数将筛选器正确添加到查询。

  5. 检查设置，以确保它们如以下屏幕截图所示。

    浏览器截图，展示了Azure门户中的按钮，用于保存应用的设置。

  6. 返回到Visual Studio Code。

  7. 刷新静态 Web 应用以查看应用程序设置和函数。

    Visual Studio Code 中的截图，显示了具有新应用程序设置的 Azure Static Web Apps 资源管理器。

如果未看到应用程序设置，请重新访问更新和重新启动GitHub工作流的步骤。

在静态 Web 应用中使用搜索

  1. 在Visual Studio Code中，打开 Activity bar，然后选择Azure图标。

  2. 在侧栏中，右键单击Azure订阅Static Web Apps区域下，找到为本教程创建的静态 Web 应用。

  3. 右键单击静态 Web 应用名称，然后选择“浏览站点”。

    Visual Studio Code 中 Azure Static Web Apps 资源管理器的屏幕截图，显示了“浏览网站”选项。

  4. 在弹出对话框中选择开启。

  5. 在网站搜索栏中输入搜索查询（例如 code），让建议功能建议书籍标题。 选择一个建议，或继续输入自己的查询。 完成搜索查询后，按 enter。

  6. 查看结果，然后选择其中一个书籍以查看更多详细信息。

故障排除

如果 Web 应用未部署或不正常工作，请使用以下列表来确定并修复问题：

  • 部署是否成功？

    若要确定部署是否成功，需要转到示例存储库的 your 分支，并查看GitHub操作的成功或失败。 应该只有一个操作，并且应该为 app_location、api_location 和 output_location 设置静态 Web 应用程序。 如果该操作未成功部署，请深入到操作日志并查找上次失败记录。

  • 客户端（前端）应用程序是否正常工作？

    你应该能够访问 Web 应用，并且它应该正常显示。 如果部署成功但网站没有显示，这可能是因为静态 Web 应用在 Azure 中配置的问题，从而导致重新生成应用时出现问题。

  • API（无服务器后端）应用程序是否正常工作？

    你应该能够与客户端应用交互、搜索书籍和筛选。 如果表单未返回任何值，请打开浏览器的开发人员工具，并确定对 API 的 HTTP 调用是否成功。 如果调用不成功，则最可能的原因是有关 API 终结点名称和搜索查询密钥的静态 Web 应用配置不正确。

    如果 YML 文件中Azure函数代码（api_location）的路径不正确，应用程序将加载但不会调用提供与Azure AI 搜索集成的函数。 重新访问部署部分以确保路径正确。

清理资源

要清理在本教程中创建的资源，请删除资源组或单个资源。

  1. 在Visual Studio Code中，打开 Activity bar，然后选择Azure图标。

  2. 在侧栏中，右键单击Azure订阅Static Web Apps区域下，找到为本教程创建的应用。

  3. 右键单击应用名称，然后选择“删除”。

  4. 如果不再需要示例的GitHub分支，请记得在GitHub中删除该分支。 转到分支的“设置”，然后删除该存储库。

  5. 若要删除Azure AI 搜索，找到搜索服务并选择页面顶部的 Delete。

后续步骤

  • Last updated on