Heroku部署React+Vite应用遇Error R10启动超时问题求助

核心问题分析 #

R10错误的本质是Web进程未在60秒内绑定到Heroku分配的$PORT，且Vite的preview命令默认仅绑定localhost，Heroku无法访问该地址，导致超时。

解决方案步骤 #

1. 修正Vite Preview的绑定配置 #

如果坚持使用vite preview，需要强制指定绑定到所有网络接口（0.0.0.0），修改你的Procfile为：

web: npm run preview -- --port $PORT --host 0.0.0.0

注意：这里需要额外加一个--，确保参数正确传递给Vite命令。

同时可在package.json的scripts中更新preview命令（避免重复参数）：

"scripts": {
  "preview": "vite preview --host 0.0.0.0"
}

2. 改用更稳定的静态文件服务器（推荐） #

Vite的preview仅用于开发环境预览，生产环境建议使用serve包托管静态文件：

• 安装依赖：

  npm install --save-dev serve
  

• 更新package.json的scripts：

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "start": "serve -s dist -l $PORT"
  }
  

• 修改Procfile为：

  web: npm start
  

3. 确认Heroku环境配置 #

• 在package.json中指定Node.js和npm版本，避免环境不一致：

  "engines": {
    "node": ">=16.x",
    "npm": ">=8.x"
  }
  

• 确保Heroku使用Node.js buildpack，可通过命令设置：

  heroku buildpacks:set heroku/nodejs
  

4. 验证构建产物 #

确认npm run build能正确生成dist文件夹，Heroku会在构建阶段自动执行该命令，若产物路径不符，需在vite.config.js中指定输出目录：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'dist'
  }
});

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