大家好,又见面了,我是你们的朋友全栈君。
目的:将一些小服务应用部署到免费的serverless/VPS上去 环境:0成本 实现方式:github vercel/freewha
效果: 项目一:个人导航
项目二:个人博客
项目三:个人音乐服务器:
背景:上面的项目以前我都是部署在家里群晖上,或者VPS上,但是FRPC和VPS的流量,延时、运维更新等问题,实际用起来很繁琐,最近两年serverless发展很火,于是就萌生了把他们部署到免费的VPS或者serverless产品上
网络上有很多hexo博客部署到vercel、github.io的列子,我这里就用第三个个人音乐网站为例子演示一下步骤:
1. fork此项目:musify
首先你要有一个github账户,然后找到一个开源的静态音乐项目,fotk它,这里拿我的举例:musify
fork它,然后上传一些音乐本地文件,或者编辑音乐文件到链接中:
- 上传本地音乐文件到
musify/src/audio/
目录下 - 然后编辑这个文件:
musify/src/data.js
,怎么编辑就不细节了,参考我的格式就好了 - 你问音乐文件上传到哪里,你可以直接上传到github,但是不要超过100M,或者推荐下面的方式
自己找个类似图床或者别的 申请了个freewha的1.5G的空间 我也试过永硕E盘,但是直链会变 onedrive 转直链接是个方案,但是太多的重定向,手机上的浏览器不支持
2. 申请一个vercel账户:https://vercel.com/
上传文件或者编辑data.js文件后,我们申请一个vercel账户,并使用github账户注册,首次注册引导他会让你选择你的仓库,
2.1我们选择那个音乐项目即可,选择导入
2.2在部署设置里面选择默认即可,等待部署完成后
2.3 部署完成后,访问域名查看效果
系统会自动分配一个域名,访问这个域名就可以看到效果,你也可以绑定自定义域名,按照他的引导或者直接设置cnname别名转发
3.申请一个freewha账户 freewha
记住域名和密码,你可以自定义域名也可以按系统分配的,在域名后加/cpanel进入控制台
3.1 将项目文件编译为静态文件
还是以上门那个音乐项目为例,vercel可以自动编译项目为静态文件,freewha没这个功能,我们也不可能用自己电脑、vps去编译再上传,这样会失去初衷,所以这里我们使用github action 来帮助我们编译并上传到freewha
3.2 在项目上,创建一个github action,并贴入下列代码:
这段代码的用途是拉取一个docker 使用vue去编译为静态文件,并输出到gh_pages分支
代码语言:javascript复制name: 生成静态文件
on:
push:
branches: [ main ]
jobs:
build:
name: