公共目录中的 React sitemap.xml 文件在构建后未显示

Question

我有一个在公共目录中生成 sitemap.xml 文件的脚本。开发时可以在 localhost:3000/sitemap.xml 中访问它。但是当它进行构建时，我无法从公共文件夹访问该文件。我做了一些研究，发现构建没有公共文件夹的访问权限！请帮我提供一种访问 public/sitemap.xml 的方法（如果有），如果没有，是否可以在 reac-router-dom 中将 .xml 格式显示为页面？

Answer 1

阅读您的问题和评论后，没有太多需要处理的内容，但我可以告诉您一些事情。

• 您的站点地图可能在本地工作而不是在构建上工作的原因是因为您很可能使用 webpack-dev-server （如果您使用 CRA 那么您正在使用它），而后者又使用 Express 在本地提供服务你的文件。当您构建时，它将不再使用该服务器，您将需要自己的自定义服务器。

• 当您构建生产文件时，它会将所有文件输出到静态 js/css 文件，然后需要使用某些或其他服务器（express/nginx/apache）来提供这些文件。在您的问题中，除了开发服务器之外，您还没有指定您正在使用的服务器，因此我只能假设您可能没有任何服务器和/或依赖于您正在使用的某些主机，而没有意识到您正在使用一个。

• 当您想要提供诸如 .xml 之类的内容时，您必须配置服务器以实际提供 .xml 文件。另外，您不应该将 .xml 作为任何形式的 React 路由提供服务，它不是路由，并且与 React 无关。您的请求应直接到达服务器，即 nginx，并且该服务器应配置为提供 .xml 文件。

• 在您的评论中，您提到它是“sitemap.exe”，我不确定这是否是一个拼写错误，但您无法通过网络提供和运行 .exe 文件，并且默认情况下不会配置任何服务器来执行此操作。 sitemap.xml 或 sitemap.txt 应仅包含有效的 xml 或文本内容，并确保在构建后它实际上位于构建目录中。

• 如果 .xml 存在于您的构建中并且所有这些都很好，那么您唯一需要做的就是向您的 nginx 服务器添加一个位置块，或者向您的 Express（或静态资源）添加一个 get 路由，以便实际上提供该文件。如果您的服务器此时给您返回 404，则可能意味着它根本无法识别 .xml 文件。这需要在您的服务器中进行配置。

在 nginx 中，这意味着你需要类似

location = /sitemap.xml

的东西。
在 Express 中，这意味着您需要类似

app.get('/sitemap.xml')

的东西。

带有

try_files $uri $uri/ =404

的默认 nginx 安装也应该适用于 .xml。

Answer 2

对于使用 AWS amplify 作为托管服务的人们：在 AWS amplify 中，有一个名为“重写和重定向”的选项。您必须在重写 (200) 规则中添加“xml”。

xml)$)([^.]+$)/>

Answer 3

我通过进入“重写和重定向”部分并添加一条规则来解决类似的问题，该规则表示“/sitemap.xml”的“源地址”将重定向到“/sitemap.xml”，并优先于该规则其中

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/>

被重定向到

/index.html

。