将个人作品集部署至Heroku失败：缺失npm start脚本报错

问题根源 #

从日志可以明确看出，Heroku默认尝试执行npm start启动应用，但你的项目package.json中没有定义start脚本，导致进程退出，触发H10应用崩溃错误。

解决方案 #

根据你的项目类型选择对应的修复方式：

1. 纯静态HTML/CSS/JS项目 #

如果你的作品集是纯静态文件（没有框架构建步骤），可以通过http-server来启动静态服务：

• 安装依赖：

  npm install http-server --save
  

• 编辑项目根目录的package.json，在scripts字段中添加start命令：

  {
    "scripts": {
      "start": "http-server -p $PORT"
    }
  }
  

  这里$PORT是Heroku提供的环境变量，必须使用该端口才能让Heroku正确路由请求。

2. 框架构建项目（React/Vue等） #

如果你的项目是用前端框架构建的，需要先完成构建，再启动静态服务：

• 确保package.json中已有build脚本（比如React默认的"build": "react-scripts build"）
• 添加或修改start脚本，指向构建产物目录：

  {
    "scripts": {
      "build": "react-scripts build",
      "start": "http-server build -p $PORT"
    }
  }
  

  注意：build是React的产物目录，Vue通常是dist，请根据你的项目实际目录调整。

3. 使用Heroku静态构建包（可选） #

也可以直接使用Heroku官方的静态构建包来部署静态项目：

• 在项目根目录创建static.json文件，配置静态文件根目录：

  {
    "root": "public", // 替换为你的静态文件目录，比如build/dist
    "routes": {
      "/**": "index.html"
    }
  }
  

• 设置Heroku构建包：

  heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static.git
  

后续操作 #

修改完成后，将代码提交到GitHub（或直接推送到Heroku）：

git add .
git commit -m "fix: add start script for heroku deployment"
git push origin main # 推送到GitHub，触发Heroku自动部署
# 或者直接推送到Heroku
git push heroku main

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