heroku上部署vue项目

公司有一个前端项目,近期折腾了一下,改成从 heroku 的一个替代产品 dokku 部署了,记录一下过程。
不熟悉 dokku 的可以看这里,是一个 heroku 的个人级替代产品,用法基本差不多。

dokku 和 heroku 一样,只支持有后端的项目,所以对于 vue 项目,我们需要用 express 来提供服务。

方案如下,先安装 express 和@suntower/serve-static2

1
yarn add express @suntower/serve-static2

在 package.json 里添加一行 start 命令:

1
2
3
4
"scripts": {
...
"start": "node root.js"
}

然后,root.js 的内容如下:

1
2
3
4
5
6
7
const express = require('express')
const serveStatic = require('@suntower/serve-static2')
const path = require('path')
app = express()
app.use(serveStatic(path.join(__dirname, 'dist'), { tryFile: '/index.html' }))
const port = process.env.PORT || 5000
app.listen(port)

网上有一些教程让在 packge.json 里添加一个 postinstall 命令,其实是没有必要的,nodejs 类项目,在 package.json 里有 build 和 start 命令就行 了。verel 也是这样一个要求。

有一些项目的路由使用了 HTML5 模式,需要 nginx 的 try_files 支持,所以其他一些教程里的 serve-static 包,并不满足需求,我 fork 了这个包,命名为@suntower/serve-static2 发布在了 npm.org 上。主要实现的功能是,当文件找不到时,自动使用 /index.html (这样也永远不会 404 了)。如果不需要这个特性,将 tryFile 选项留空即可。


heroku上部署vue项目
https://404.ms/2023/02/14/deploy-vue-to-heroku-or-dokku/
作者
rocky.xander
发布于
2023年2月14日
许可协议