MERN+TypeScript部署DigitalOcean显示HTML文件问题求助

核心问题定位 #

你的代码存在两个关键错误，直接导致页面无法正常加载：

• 静态文件服务的路径配置错误，前端JS/CSS资源无法被正确读取
• 通配路由app.get('*')的顺序错误，拦截了所有API请求，导致前端接口请求返回HTML而非数据

具体修复步骤 #

1. 修正静态文件服务的绝对路径 #

将相对路径的静态文件服务改为基于__dirname的绝对路径，确保编译后能精准找到静态资源目录：

// 替换原有的app.use(express.static('static'))
app.use(express.static(path.join(__dirname, 'static')))

原因：编译后的代码位于build目录下，相对路径'static'会以进程启动目录为基准，而非build目录，绝对路径能保证资源定位的准确性。

2. 调整通配路由的位置 #

把app.get('*')移到所有API路由之后，只有非API的请求才会返回HTML（适配前端路由）：

// 先挂载所有API路由
app.use('/api/membership/webhook', bodyParser.raw({ type: '*/*' }))
app.use(express.json({ limit: '50mb' }))
app.use('/api/user', userRoutes)
app.use('/api/membership', membershipRoutes)
app.use('/api/plan', memberPlanRoutes)
app.use('/api/password', passwordRoutes)
app.use('/api/extend', memberExtendRoutes)

// 最后挂载通配路由，处理前端路由跳转
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'static/index.html'))
})

原因：Express的路由匹配按顺序执行，若通配路由放在前面，所有请求（包括API）都会被拦截返回HTML，前端请求接口时拿到的是HTML文件，自然无法解析，引发控制台报错。

3. 优化CORS配置（可选但推荐） #

你同时使用了cors()中间件和自定义CORS头设置，两者功能重复，保留cors()即可，避免潜在冲突：

// 保留cors()中间件
app.use(cors())
// 删除以下重复的自定义CORS头代码
// app.use((req, res, next) => {
//   res.setHeader('Access-Control-Allow-Origin', '*')
//   res.setHeader(
//     'Access-Control-Allow-Headers',
//     'Origin, X-Requested-With, Content-Type, Accept, Authorization'
//   )
//   res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PATCH, DELETE')
//   next()
// })

4. 验证Nginx反向代理配置 #

确保Nginx正确将请求转发到Express的8080端口，示例配置如下：

server {
    listen 80;
    server_name 你的Droplet_IP;

    location / {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # 可选：让Nginx直接托管静态资源，减轻Express压力
    location /static {
        root /你的项目路径/build;
        expires 30d;
    }
}

修改后重启Nginx：

sudo systemctl restart nginx

5. 重新部署验证 #

• 重新编译服务端：npm run build
• 重启PM2进程：pm2 restart build/index.js
• 访问Droplet IP，检查控制台是否还有资源加载或接口请求报错

额外检查项 #

• 确认客户端build目录的所有文件已完整复制到服务端build/static目录
• 检查服务端build目录权限，确保Nginx和Node进程能读取：

sudo chmod -R 755 /你的项目路径/build

• 临时开放8080端口测试（若未配置防火墙）：

sudo ufw allow 8080

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