部署MERN应用至Cyclic时出现404错误求助

以下是针对你遇到的404问题的具体排查步骤：

1. 检查后端静态文件托管与SPA路由配置 #

Vite构建的前端是单页应用（SPA），后端需要正确托管dist文件夹并处理路由 fallback，否则直接访问子路由或刷新页面会出现404。

打开后端入口文件（比如server.js），确认是否添加了以下配置：

const path = require('path');

// 托管前端构建后的静态资源
app.use(express.static(path.join(__dirname, '../client/dist')));

// 处理SPA路由：所有非API请求返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../client/dist/index.html'));
});

注意：API路由必须放在静态文件托管配置之前，否则API请求会被fallback逻辑拦截，返回index.html而非数据。

2. 确认Cyclic部署的启动与构建命令 #

• 检查项目根目录的package.json，确保scripts包含正确的启动命令：

  "scripts": {
    "start": "node server.js",
    "build": "cd client && npm install && npm run build"
  }
  

  Cyclic默认会执行npm run build和npm start，如果build命令没有包含前端构建步骤，需要手动添加，确保部署时自动生成dist文件夹。
• 确认Cyclic控制台中没有覆盖启动命令，保持默认使用项目的start脚本即可。

3. 验证环境变量的正确性 #

• 检查后端代码中读取环境变量的名称是否与Cyclic配置的完全一致，比如MongoDB连接字符串是否用process.env.MONGO_URI读取（需和你配置的变量名匹配）。
• 可以在后端启动时添加日志，确认环境变量是否正确加载：

  console.log('Mongo URI:', process.env.MONGO_URI); // 仅用于调试，上线后删除
  

  如果数据库连接失败，后端服务异常也可能导致404。

4. 检查端口配置 #

后端不能硬编码端口，必须使用Cyclic提供的环境变量端口：

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

硬编码端口会导致Cyclic无法正确映射服务端口，引发访问错误。

5. 确认项目结构路径 #

检查前端dist文件夹的生成位置是否与后端配置的路径匹配。如果你的前端项目在client目录下，执行npm run build后会生成client/dist，后端的路径../client/dist才是正确的，避免路径错误导致无法找到静态文件。

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