React项目部署Cyclic.sh后端失效，Vercel/Netlify报404求助

一、Cyclic.sh后端功能失效问题 #

问题原因 #

1. 环境变量缺失：本地.env文件不会同步到部署平台，数据库连接等核心配置无法读取，导致后端服务初始化失败。
2. 路由路径不匹配：前端请求的API路径与后端路由前缀不一致，接口无法被正确识别。
3. 端口配置逻辑错误：代码中端口优先级写反，平台分配的端口无法生效。

解决步骤 #

1. 配置平台环境变量
   在Cyclic.sh项目设置中添加以下关键环境变量：

• MONGO_URI：你的MongoDB连接字符串
• （按需添加）JWT密钥、前端域名等业务所需变量

2. 修正Server.js代码

• 调整端口优先级，优先使用平台分配的端口：

  // 原代码
  const PORT = 8080 || process.env.PORT
  // 修改为
  const PORT = process.env.PORT || 8080
  

• 给路由添加统一前缀（需与前端请求路径匹配，假设前端前缀为/api/v1）：

  // 原代码
  app.use(userRouter);
  app.use(transactionRouter);
  // 修改为
  app.use('/api/v1/users', userRouter);
  app.use('/api/v1/transactions', transactionRouter);
  

• （可选）限制CORS origin，避免跨域异常：

  app.use(cors({ 
    origin: process.env.FRONTEND_URL || "http://localhost:3000",
    credentials: true
  }))
  

3. 完善package.json构建命令
   添加前端构建命令，确保部署时自动生成静态文件：

{
  "scripts": {
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm start\" \"npm run client\" ",
    "build": "cd client && npm install && npm run build" // 新增构建命令
  }
}

二、Vercel/Netlify 404页面问题 #

问题原因 #

Vercel和Netlify默认是静态站点托管平台，直接部署全栈Express项目时，平台无法识别Node.js服务入口；若仅部署前端，单页应用路由未配置重写，会导致刷新或直接访问子路由时出现404。

解决步骤 #

方案1：全栈部署到Vercel

在项目根目录创建vercel.json文件：

{
  "version": 2,
  "builds": [
    {
      "src": "server.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "server.js"
    }
  ]
}

部署时选择项目根目录，平台会自动识别配置并启动Express服务。

方案2：前后端分开部署（推荐）

• 前端部署到Vercel/Netlify：
  • Netlify部署时开启「Deploy single-page app」选项，解决SPA路由404；Vercel默认支持SPA路由。
  • 前端API请求地址改为Cyclic.sh部署的后端域名。
• 后端继续部署到Cyclic.sh，确保环境变量和路由配置正确。

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