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

问题描述

我有一个组件可以动态创建站点地图，如下面的代码所示。 问题是此代码在我的本地主机中可以正常工作，但是当它部署在服务器上时，我总是会收到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;

解决方法

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

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