上传gatsby-node.js至Azure静态Web应用后触发500错误求助

问题分析 #

本地gatsby develop运行正常，但部署到Azure后createPages阶段抛出500错误，核心原因大概率是环境差异或代码执行时机不当，以下是具体排查和修复方案：

修复步骤 #

1. 修正请求发起时机 #

你的代码在模块加载阶段就发起了API请求（const get = axios.all(urls.map((url) => axios.get(url)));），这会导致构建流程启动时就立刻请求API，此时Azure环境可能还未准备就绪（比如API服务未完全启动）。

修改getRecipeData函数，将请求逻辑移至函数内部：

async function getRecipeData(){
  // 仅在函数调用时才创建并发起请求
  const requests = urls.map(url => axios.get(url));
  const data = await axios.all(requests);
  return data;
}

2. 添加详细错误捕获 #

原代码没有错误处理，无法定位是哪个API请求失败、具体错误信息是什么。在createPages中添加try-catch捕获并打印详细日志：

exports.createPages = async({actions: {createPage}}) => {
  try {
    const Data = await getRecipeData();
    const allRecipes = Data[0].data.value; 
    const allRecipesKat = Data[1].data.value;
    
    createPage({
      path: `/recipes/`,
      component: require.resolve('./src/templates/RecipesComp.js'),
      context: { allRecipes }
    });

    createPage({
      path: `/erstellen/`,
      component: require.resolve('./src/templates/RecipesKatComp.js'),
      context: { allRecipesKat }
    });
  } catch (error) {
    // 打印详细错误信息，包括响应内容（如果有）
    console.error('数据获取失败详情:', {
      message: error.message,
      status: error.response?.status,
      responseData: error.response?.data,
      requestUrl: error.config?.url
    });
    throw error; // 保留错误抛出，让Gatsby终止构建流程
  }
}

3. 验证API接口可用性 #

部署后直接访问你的API地址（https://abc.azurestaticapps.net/data-api/rest/recipe和https://abc.azurestaticapps.net/data-api/rest/recipekat），确认：

• 接口返回200状态码
• 返回数据格式与本地一致（存在value字段）
• 没有服务器内部错误（比如数据库连接失败、代码逻辑错误）

4. 查看Azure构建日志 #

登录Azure门户，进入你的静态Web应用，找到构建日志（Build logs），查看完整的构建过程输出，里面会包含错误的具体上下文，帮助定位问题。

5. 改用环境变量管理API地址 #

硬编码API地址容易导致环境不一致问题，建议使用环境变量：

1. 在项目根目录创建.env.production文件，添加：

GATSBY_RECIPE_API_URL=https://abc.azurestaticapps.net/data-api/rest/recipe
GATSBY_RECIPEKAT_API_URL=https://abc.azurestaticapps.net/data-api/rest/recipekat

2. 修改代码中的urls定义：

const urls = [
  process.env.GATSBY_RECIPE_API_URL,
  process.env.GATSBY_RECIPEKAT_API_URL
]

3. 在Azure门户的静态Web应用配置页面，添加对应的环境变量，确保部署时使用正确的API地址。

内容的提问来源于stack exchange，提问作者user23348508