无后端VueJS应用部署Heroku遇崩溃问题求助

问题 #

尝试将无后端基础Vue.js应用部署到Heroku，已将Heroku Review App Deployment Status相关代码添加到GitHub Actions的YML文件中，YML配置如下：

name: CI

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]

build:
  runs-on: ubuntu-latest
  - uses: actions/checkout@v3
  - name: Heroku Review App Deployment Status
    uses: teamniteo/reviewapps-deploy-status@v1.4.0

关联GitHub仓库与Heroku应用后，页面显示应用错误，相关日志信息：

2022-07-11T17:09:26.062281+00:00 app[web.1]: npm ERR! 
2022-07-11T17:09:26.062296+00:00 app[web.1]: npm ERR! To see a list of scripts, run:
2022-07-11T17:09:26.062391+00:00 app[web.1]: npm ERR!   npm run
2022-07-11T17:09:26.064160+00:00 app[web.1]: 
2022-07-11T17:09:26.064320+00:00 app[web.1]: npm ERR! A complete log of this run can be 
found in:
2022-07-11T17:09:26.064361+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2022-07- 
11T17_09_26_012Z-debug-0.log
2022-07-11T17:09:26.200951+00:00 heroku[web.1]: Process exited with status 1
2022-07-11T17:09:27.385385+00:00 heroku[web.1]: State changed from starting to crashed
2022-07-11T17:09:44.444515+00:00 heroku[router]: at=error code=H10 desc="App crashed" 
method=GET path="/" host=my-portfolio-salim.herokuapp.com request_id=996e2ca5-4565-4340- 
b2e3-81e1d46b35e4 fwd="154.243.68.33" dyno= connect= service= status=503 bytes= 
protocol=https
2022-07-11T17:09:45.669090+00:00 heroku[router]: at=error code=H10 desc="App crashed" 
method=GET path="/favicon.ico" host=my-portfolio-salim.herokuapp.com 
request_id=7ab2a333-4346-4067-99cf-0f633aa76bdb fwd="154.243.68.33" dyno= connect= 
service= status=503 bytes= protocol=https

询问是否遗漏配置步骤及解决方法。

解决方法 #

1. 修复GitHub Actions YML语法错误 #

你的YML配置存在结构错误：缺少jobs层级，步骤缩进不符合规范，且未添加action必需的参数。修正后的配置示例：

name: CI

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Heroku Review App Deployment Status
        uses: teamniteo/reviewapps-deploy-status@v1.4.0
        with:
          heroku_api_key: ${{ secrets.HEROKU_API_KEY }}
          heroku_app_name: "my-portfolio-salim"
          github_token: ${{ secrets.GITHUB_TOKEN }}

2. 配置Vue.js部署核心文件 #

无后端Vue应用部署到Heroku需要以下基础配置：

• 添加启动脚本与依赖：安装静态文件服务包serve，并在package.json中补充脚本：

  npm install --save-dev serve
  

  修改package.json的scripts字段：

  "scripts": {
    "build": "vue-cli-service build",
    "start": "serve -s dist"
  }
  

• 创建Procfile：在项目根目录新建Procfile文件，内容为：

  web: npm start
  

• 设置Heroku buildpack：确保Heroku使用Node.js构建包，通过CLI执行：

  heroku buildpacks:set heroku/nodejs --app my-portfolio-salim
  

3. 排查npm脚本问题 #

日志显示npm无法找到指定执行脚本，需做以下验证：

• 确认package.json中存在build和start脚本
• 本地执行npm run build和npm start，验证应用能否正常编译与启动
• 检查依赖是否完整，执行npm install后再重新测试

4. 获取完整错误日志定位问题 #

通过Heroku CLI拉取完整日志，查看具体错误详情：

heroku logs --tail --app my-portfolio-salim

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