部署在Cyclic.sh的全栈React应用非根路由刷新报404问题

我把前后端代码部署在Cyclic.sh上，网站能正常运行，但刷新非首页路由时会出现404：刷新根路由website-name.cyclic.app/正常，刷新其他路由website-name.cyclic.app/any-other-route就失败。这应该是React客户端路由的问题，刷新时后端没办法引导到index.html。

我前端有生产构建后的dist文件夹，已经按照Cyclic.sh静态站点部署文档在后端server.js里加了以下配置，但没解决问题：

var options = {
  dotfiles: 'ignore',
  etag: false,
  extensions: ['htm', 'html', 'css', 'js', 'ico', 'jpg', 'jpeg', 'png', 'svg'],
  index: ['index.html'],
  maxAge: '1m',
  redirect: false,
};

// Serve static files from the 'dist' directory.
app.use(express.static('dist', options));

请问哪里操作错了？

按照建议调整文件结构后，问题解决了，步骤如下：

• 将前后端合并为单一仓库，前端代码放在client文件夹中。
• 在server.js中添加以下代码（需要先导入path模块）：

app.use(express.static(path.join(__dirname, './client/dist')));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, './client/dist/index.html'));
});

核心问题是之前没完全理清前后端的交互逻辑，合并单仓后，服务器能正确从构建文件夹提供静态文件，所有功能恢复正常。

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