NextJs 动态站点地图为什么会出现 504 错误？

Question

我有一个组件可以像下面的代码一样动态创建站点地图。问题是这段代码在我的本地主机上工作得很好，但是当它部署在服务器上时，我总是得到 Gateway Timeout-504 错误！有什么建议是我做错了什么吗？

import fetch from "isomorphic-unfetch";
import React from "react";
import {getCategoryPath} from "../helpers/Converters";

const EXTERNAL_DATA_URL = "http://www.my.site";

const createSitemap = (items: any) => `<?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
        ${items
    .map((item: any) => {
        return `
            <url>
                <loc>${EXTERNAL_DATA_URL}/${getCategoryPath(item.CategoryName)}/Detail?id=${item.Id}</loc>
                <priority>${item.Priority}</priority>
                <changefreq>${item.ChangeFreq}</changefreq>
                <lastmod>${item.LastMod}</lastmod>
            </url>
        `;
    })
    .join("")}
    </urlset>
    `;

class Sitemap extends React.Component {
    static async getInitialProps({res}: any) {
        const response = await fetch(`${EXTERNAL_DATA_URL}:5000/api/SiteMap`);
        const posts = await response.json();

        res.setHeader("Content-Type", "text/xml");
        res.write(createSitemap(posts));
        res.end();
    }
}

export default Sitemap;

Answer 1

问题实际上与 Nginx 有关，由于我的 Nginx 配置，我在内部将所有 /api* 路由到端口 5000，因此在获取数据时解决端口是额外的，因此将相关行更改为此，解决我的问题：

const response = await fetch(`${EXTERNAL_DATA_URL}/api/SiteMap`);

NextJs 动态站点地图为什么会出现 504 错误？

NextJs Dynamic sitemap why get 504 error?

xml-sitemap

reactjs

next.js