全栈应用部署到DigitalOcean时Express无法正常提供React前端服务

排查修复步骤 #

• 验证client构建产物是否正常生成
  修改根目录package.json中的构建脚本，增加产物校验逻辑，确认build文件夹及内部静态文件正常输出：

  "digitalocean-build": "cd client && npm install && npm run build && ls -la build"
  

  重新部署后查看构建阶段日志，若未出现build文件夹及index.html、static目录等内容，说明React构建失败，优先排查client端依赖兼容性、代码语法错误等问题。
• 修正Express路由注册顺序
  必须保证API路由注册在静态资源配置之前，同时补充前端路由兜底逻辑，否则非根路径访问、页面刷新都会触发Express默认404，无法加载前端页面。正确的index.js配置顺序如下：

  const express = require('express');
  const path = require('path');
  const app = express();
  
  // 优先注册API路由
  app.use('/api', require('./routes/api'));
  
  // 再配置React静态资源服务
  app.use(express.static(path.join(__dirname, 'client/build')));
  
  // 最后补充兜底路由：所有非API请求返回React入口文件，适配前端路由
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
  });
  
  app.listen(process.env.PORT || 3000, () => {
    console.log('服务启动成功');
  });
  

• 校验路径大小写一致性
  DigitalOcean使用Linux环境，大小写敏感，需确认index.js中路径拼写的大小写和实际文件夹完全一致，避免将client误写为Client等问题导致静态资源找不到。
• 锁定Node运行版本
  在根目录package.json中增加engines字段，指定和本地/Heroku一致的Node版本，避免版本差异导致构建异常：

  "engines": {
    "node": "你的实际运行Node版本，比如18.x"
  }
  

• 提交完整依赖锁文件
  确保根目录、client目录下的package-lock.json都已提交到代码仓库，避免构建时安装不兼容的依赖版本导致React构建失败。
• 确认部署配置正确性
  检查App Platform部署配置：
  • 资源类型选择「Web Service」
  • 部署根目录为项目根目录，而非client目录
  • 构建命令和运行命令和你填写的npm run digitalocean-build、npm run start一致

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