如何在Heroku部署Vite React应用？部署遇问题求助

问题一：vite: not found 错误 #

即使设置了 NPM_CONFIG_PRODUCTION=false 仍找不到vite，核心原因有两个：

• Heroku环境中，本地node_modules的bin目录不在默认PATH里，直接调用vite无法定位到可执行文件
• vite处于devDependencies中，即使禁用生产模式，仍可能存在安装缓存或路径映射问题

解决方法： #

1. 用npx调用vite
   修改start脚本，通过npx确保调用本地安装的vite：

"start": "npx vite preview --host 0.0.0.0 --port $PORT"

2. 将vite移至dependencies
   vite preview是生产环境用于托管构建产物的工具，建议把它从devDependencies移到package.json的dependencies中，确保生产环境会安装：

npm install vite --save

问题二：Express服务器运行几分钟后退出（状态143） #

状态码143对应SIGTERM信号，是Heroku定期重启dyno（默认24小时一次）或调整资源时发送的终止信号。你的服务器未处理该信号，导致进程被强制终止。

解决方法： #

在server.cjs中添加信号监听，实现优雅关闭：

const express = require('express')
const serveStatic = require('serve-static')
const path = require('path')

const app = express()

app.use('/', serveStatic(path.join(__dirname, '/dist')))

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

const port = process.env.PORT || 8000
const server = app.listen(port)
console.log(`app is listening on port: ${port}`)

// 处理SIGTERM信号，优雅关闭服务器
process.on('SIGTERM', () => {
  console.log('收到SIGTERM信号，开始关闭服务器')
  server.close(() => {
    console.log('服务器已关闭')
    process.exit(0)
  })
})

最优Heroku部署配置推荐 #

方案一：使用Vite Preview（简单快捷） #

1. 确保vite在dependencies中，或用npx调用
2. package.json脚本配置：

"scripts": {
  "build": "tsc && vite build",
  "start": "npx vite preview --host 0.0.0.0 --port $PORT"
}

3. 无需额外环境变量设置，若需保留devDependencies可设置NPM_CONFIG_PRODUCTION=false，但更推荐将vite移至dependencies。

方案二：使用Express静态服务器（灵活扩展） #

适合需要自定义路由、中间件的场景：

1. 安装依赖：

npm install express serve-static --save

2. 使用添加了SIGTERM处理的server.cjs
3. package.json脚本：

"scripts": {
  "build": "tsc && vite build",
  "start": "node server.cjs"
}

额外注意事项 #

• 确认.gitignore未阻止dist目录被Heroku识别（build脚本会生成dist，无需移除.gitignore中的dist规则）
• 在package.json中指定node版本，确保与本地环境一致：

"engines": {
  "node": ">=16.x"
}

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