gatsby-node.js 文件上传到 Gatsby Azure Static Web App 后抛出错误

Question

将调整后的 gatsby-node.js 文件上传到 Azure Static Web App 后，我收到以下错误：

error "gatsby-node.js" threw an error while running the createPages lifecycle:
Request failed with status code 500
Error:Request failed with status code 500

如果我在本地计算机上的“gatsby 开发”模式下运行相同的定义，一切都会正常...

这是我的 gatsby-node.js 文件：

const axios = require('axios');
const urls = [
`https://abc.azurestaticapps.net/data-api/rest/recipe`,
`https://abc.azurestaticapps.net/data-api/rest/recipekat`
]
const get = axios.all(urls.map((url) => axios.get(url)));

async function getRecipeData(){
  const data = await get;
  return data
}

exports.createPages = async({actions: {createPage}}) => {

  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 }
  });

}

检查了不同的网站后，我没有找到解决此问题的方法。

Answer 1

在尝试使用您的代码时，我在获取配方数据时遇到错误。请检查 URL

https://abc.azurestaticapps.net/data-api/rest/recipe 

是否可访问，以及是否需要任何身份验证或权限配置才能访问它。

我将代码更改为以下示例示例，该示例从后端获取数据并将其呈现在浏览器中，允许用户使用 Gatsby 开发服务器查看食谱及其成分列表：

注： 如果您使用后端作为 API，请将其转换为 Azure Function App （代码）。

src/components/RecipeList.js：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const RecipeList = () => {
  const [recipes, setRecipes] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('/data-api/rest/recipe');
        //const response = await axios.get('http://localhost:5000/data-api/rest/recipekat');
        //const response = await axios.get(https://certificate122ravi455.azurewebsites.net/data-api/rest/recipekat');
        setRecipes(response.data.value);
      } catch (error) {
        console.error('Error fetching recipes:', error);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      <h2>Recipes</h2>
      <ul>
        {recipes.map(recipe => (
          <li key={recipe.id}>
            <strong>{recipe.name}</strong>
            <ul>
              {recipe.ingredients.map(ingredient => (
                <li key={ingredient}>{ingredient}</li>
              ))}
            </ul>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default RecipeList;

/src/pages/recipes.js：

import React from 'react';
import RecipeList from '../components/RecipeList';

const RecipesPage = () => {
  return (
    <div>
      <h1>My Recipes</h1>
      <RecipeList />
    </div>
  );
};

export default RecipesPage;

我遵循了Azure Static Web

Apps的配置。 staticwebapp.config.json

{
  "navigationFallback": {
    "rewrite": "index.html"
  }
}

URL 中来自后端的示例数据：

git 操作状态：

静态 Web 应用程序输出：