如何在Heroku为单主分支仓库创建不同构建命令的两条流水线？

你可以通过以下两种方式实现同一主分支部署两个不同的Heroku应用，分别对应主应用和Storybook，无需拆分仓库：

方法一：用环境变量动态切换构建/启动逻辑 #

这种方式仅需修改一次package.json，通过环境变量控制执行哪套命令：

1. 创建两个Heroku应用：
   在Heroku CLI中分别创建主应用和Storybook应用：

   heroku create my-main-app
   heroku create my-storybook-app
   

   再将两个应用关联到本地仓库的远程分支：

   git remote add heroku-main https://git.heroku.com/my-main-app.git
   git remote add heroku-storybook https://git.heroku.com/my-storybook-app.git
   

2. 修改package.json脚本：
   在scripts字段中添加带条件判断的构建和启动命令，根据环境变量DEPLOY_TARGET切换执行逻辑：

   "scripts": {
     "build": "if [ \"$DEPLOY_TARGET\" = \"storybook\" ]; then npm run build-storybook; else npm run build; fi",
     "start": "if [ \"$DEPLOY_TARGET\" = \"storybook\" ]; then npm run storybook; else npm run start; fi",
     "build-storybook": "your-existing-storybook-build-command",
     "storybook": "start-storybook -p $PORT"
   }
   

   注意：Storybook的启动命令必须监听Heroku分配的$PORT环境变量，不能硬写固定端口。

3. 为两个应用设置不同环境变量：

   • 给主应用设置变量（也可省略，默认走主应用分支逻辑）：

     heroku config:set DEPLOY_TARGET=app --app my-main-app
     

   • 给Storybook应用设置变量触发Storybook逻辑：

     heroku config:set DEPLOY_TARGET=storybook --app my-storybook-app
     

4. 分别部署应用：
   将代码推送到对应的远程仓库即可：

   git push heroku-main main
   git push heroku-storybook main
   

方法二：直接在Heroku应用设置中覆盖命令 #

这种方式无需修改本地代码，直接在Heroku控制台为每个应用配置专属命令：

1. 创建两个Heroku应用：
   同方法一，创建两个独立应用并关联本地仓库远程分支。

2. 配置主应用的构建/启动命令：
   打开Heroku控制台，进入主应用的「Settings」页面：

   • 在「Build Command」中填入npm run build
   • 在「Start Command」中填入npm start

3. 配置Storybook应用的构建/启动命令：
   进入Storybook应用的「Settings」页面：

   • 在「Build Command」中填入npm run build-storybook
   • 在「Start Command」中填入npm run storybook（确保命令监听$PORT）

4. 分别部署应用：
   同方法一，将代码推送到对应的远程仓库即可。

注意事项 #

• 必须保证Storybook的启动脚本使用$PORT环境变量，否则Heroku无法正常对外提供访问。
• 两个应用完全独立，拥有各自的资源和配置，互不干扰。

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