如何在Heroku单个dyno部署分目录的Vue前端与Express后端

你当前使用的git subtree push --prefix server heroku master命令，作用是仅将本地项目根目录下的server子目录内容推送到Heroku的运行环境，Heroku端根本不存在client目录，所有尝试访问client目录的操作自然会报错找不到路径。

你可以根据自己的使用习惯选择以下任意一种方案实现单dyno部署：

方案1：推送完整项目（推荐） #

该方案无需每次本地提前构建前端，所有流程自动在Heroku端完成：

• 第一步：在项目根目录新增一个package.json文件，配置如下：

{
  "scripts": {
    "start": "node server/index.js", // 替换为你实际的服务端启动文件路径
    "heroku-postbuild": "npm install --prefix server && npm install --prefix client && npm run build --prefix client"
  },
  "engines": {
    "node": "16.x", // 替换为你本地使用的Node.js大版本，避免版本兼容问题
    "npm": "8.x" // 替换为对应版本的npm
  }
}

• 第二步：修改Express服务端的静态资源配置，指向前端构建后的产物目录，示例代码如下：

const path = require('path')
// 放在所有接口路由定义的后面
app.use(express.static(path.join(__dirname, '../client/dist')))
// 如果你的Vue前端使用了history路由模式，需要新增以下配置，防止刷新页面404
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../client/dist/index.html'))
})

• 第三步：放弃subtree推送方式，直接推送完整项目到Heroku即可：

git add .
git commit -m "configure full project deployment"
git push heroku master

方案2：保留subtree仅推送server目录 #

如果你一定要使用subtree仅推送server目录，需要提前在本地完成前端构建，将产物同步到server目录后再推送：

• 第一步：本地每次部署前先执行前端构建命令：

cd client
npm install
npm run build

• 第二步：将client/dist目录下的所有文件复制到server目录下的静态资源目录（比如public/static文件夹）
• 第三步：修改Express的静态资源指向，指向复制过来的前端构建产物目录
• 第四步：删除服务端package.json里的heroku-postbuild配置，再执行原来的subtree推送命令即可

• 确认本地项目结构为根目录下直接存在client和server两个平级子目录，不要嵌套多余层级
• 如果使用yarn作为包管理器，把上述配置里的npm命令替换为对应的yarn命令即可

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