你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站,请访问 https://docs.azure.cn

排查部署和运行时错误

本文介绍静态 Web 应用部署问题和其他问题的逐步排查指南。

检索部署错误消息

Azure Static Web Apps 部署工作流使用可以自动运行以下命令的 Node.js Oryx 生成过程

npm install
npm run build # if specified in package.json
npm run build:azure # if specified in package.json

此过程引发的任何错误都将记录在 GitHub 工作流运行中。 若要查看生成操作生成的日志,请使用以下步骤。

  1. 转到静态 Web 应用的 GitHub 存储库。

  2. 选择“操作”。

    注意

    所有失败的工作流运行都将以红色“X”显示,而非绿色复选标记

  3. 选择你希望验证的工作流运行的链接。

  4. 选择“生成并部署作业”以打开部署的详细信息

  5. 选择“生成并部署”以显示日志

    静态 Web 应用的部署日志屏幕截图

  6. 查看日志和所有错误消息。

    注意

    某些警告错误消息可能会显示为红色,如与“.oryx_prod_node_modules”和“工作区”相关的注释。 这些内容属于常规部署过程。

如果任何包无法安装或引发其他问题,则此处提供了原始错误消息。

确认文件夹配置

Azure Static Web Apps 需要知道使用哪些文件夹来托管应用程序。 在工作流结束时,生成过程会确认此配置。 所有错误都将在验证步骤执行期间进行记录。

如果在错误日志中看到以下任何一个错误消息,则表明工作流的文件夹配置有误。

错误消息 说明
应用目录位置“/folder”无效。 无法检测到此目录。 验证工作流能否反映存储库结构。
应用版本无法生成项目文件夹“folder”。 确保在工作流中正确配置了 folder 属性。
未指定 API 目录,或找不到指定目录。 不会创建 Azure Functions,因为工作流未定义 api 文件夹的值。

工作流中指定了三个文件夹位置。 确保这些设置与你的项目和任何在部署之前转换源代码所用的工具匹配。

配置设置 说明
app_location 要部署的源代码的根位置。 此设置通常为 / 或项目的 JavaScript 和 HTML 的位置。
output_location 由捆绑程序中的任何生成过程所创建的文件夹的名称,如 webpack。 此文件夹需要由生成过程创建,并且位于子目录 app_location
api_location Azure Static Web Apps 托管的 Azure Functions 应用的根位置。 此位置指向项目的所有 Azure Functions 的根文件夹,通常是 api。

注意

不正确的 api_location 配置生成的错误消息可能仍可成功生成,这是 Azure Static Web Apps 无需无服务器代码所致。

查看服务器错误

使用 Application Insights 查找运行时错误消息。 如果尚未创建实例,请参阅Azure Static Web Apps。 Application Insights 会记录每个错误生成的完整错误消息和堆栈跟踪。

注意

你只能查看在安装 Application Insights 之后生成的错误消息。

  1. 在 Azure 门户中,打开与静态 Web 应用关联的资源组。

  2. 选择 Application Insights 实例,该实例与静态 Web 应用同名(前提是采用之前的步骤创建)。

  3. 在“调查”下选择“失败”。

  4. 向下到右侧的钻取到

  5. 在“钻取到”下,按钮显示最近失败的操作数。

    故障屏幕的屏幕截图

  6. 选择“x 项操作”,以打开显示最近失败操作的面板

    操作屏幕的屏幕截图

  7. 从列表中选择一个错误进行了解。

    错误详细信息屏幕的屏幕截图

环境变量

许多 Web 应用使用环境变量来存储敏感或环境特定设置。 Azure Static Web Apps 通过“应用程序设置”支持环境变量。

“应用程序设置”是为应用程序设置环境变量的键对/值对。 变量可用于通常使用相同语法访问环境变量的应用程序。

部署时,请仔细检查各个环境变量是否设置为“应用程序设置”。

  1. 在 Azure 门户中打开静态 Web 应用。

  2. 选择“配置”。 “配置”屏幕将显示所有“应用程序设置”的列表。

    静态 Web 应用上“配置”屏幕的屏幕截图

遵循以下步骤添加新的变量。

  1. 选择 添加

  2. 设置“名称”。

  3. 设置“值”。

  4. 选择“确定”。

  5. 选择“保存”。

查看诊断报告

诊断和解决功能可指导你完排除故障的步骤。