前言
为了捣鼓自动化，又把忘记的东西全部重新捣鼓了一遍,目前只对小程序进行了自动化操作，后续补齐jenkins等，估计也不需要前端做jenkins，玩玩嘛，学习学习
前期准备
- 基于CentOS 8 服务器一台
- 后端项目一个
- 前端项目一个
技术架构
- 前端
- vue3全家桶(vuex,router,等)
- vue-cli(vue3版本+自己加的一些琐碎模块)
- husky eslint prttier等系列团队协作方案
- 后端
- koa2 (没用koa-generator) 对后端着实不熟，但是希望自己能够对后端的目录架构有一个清醒的了解，所以自己搭了一遍,目前来看，还是不错，只是有些东西偷了懒
- 数据库
- mongodb 增删改查，包括一些常用sql
- 服务器
- 还是常规的CentOS 8 不过据说CentOS 8 开发者已经不玩了
- 使用nvm进行node版本管理
实现目标
通过搭建koa+CentOS+gitee+miniprogram-ci，实现小程序自动化部署的功能,通过前端将代码push到指定分支，自动触发ci打包小程序的功能
注意事项
- locahost指的是项目的根目录!，所以每次建议当每次使用koa api应当查看要在哪个目录执行，一般api都有参数cwd
服务器操作
- 下载putty
- 也可以使用腾讯云自带的一键登录
- 输入服务器公网地址
-
登录服务器
-
输入登录服务器的账号
login as root //我直接超管
输入密码 这里是隐藏的密码
cd / 就可以看到你的目录
复制代码服务器基础搭建
基础搭建的文章已经很多了，我就不喧宾夺主了
- nginx的搭建
-
此篇文章虽然是阿里云的，但是一法通万法通，大同小异 ，皆可实现
-
为了方便我的nginx.config 里面 localhost写了多个地址，把前端，后端 还有一些其他东西都塞进去了，
- mongodb的安装
-
记住要自己在mongodb的目录下创建 data db等目录
-
安装完毕，记得 重启服务器
基础准备
gitee github gitLab都是相同思路，这里以gitee作为展示
生成webhooks
生成后链接
每次提交到当前指定分支，就会通知后端接口代码更新
小程序生成秘钥
秘钥生成后会生成 private.appid.key的文件, 与下方的privateKeyPath 对齐
自执行上传逻辑
优化方向，appid privateKeyPath等由后端接口请求得到，获取时进行解密操作，ci不仅仅只是支持上传，还有诸多功能，可以通过接口进行操作， 执行不同方法操作各种环境上的小程序代码
const ci = require('miniprogram-ci');
const path = require("path");
(async () => {
const appid='wx43970f2914c69223';
const project = new ci.Project({
appid,
type: 'miniProgram',
projectPath: path.resolve(__dirname,'../dist/dev/mp-weixin'),
privateKeyPath: path.resolve(__dirname,`./private.${appid}.key`),
ignores: ['node_modules/**/*'],
});
const uploadResult = await ci.upload({
project,
version:'1.0', // 版本号
desc:'我要备注', // 自定义备注
setting: {
es6: true,
},
onProgressUpdate: console.log,
}).then(()=>{
console.log('上传成功')
});
console.log(uploadResult);
})();
复制代码后端准备
写入在gitee上的webhooks接口
此处为了区分扩展，我接入三个参数 gitUrl，branch env
//cwd 为当前shell脚本的目录
async getWebHook(ctx, next) {
const { env, gitUrl, branch } = ctx.request.body;
const { err, stdout, stderr } = await exec(`webhooks.sh ${gitUrl} ${branch} ${env}`,{ cwd: 'config' });
if (!err) {
await SUCCESS(ctx, {}, "打包成功,请等待一至两分钟")
} else {
await NOT_FOUND_ERROR(ctx, {}, "打包失败");
}
}
复制代码执行对应脚本
这里我比较粗鲁，直接拉下来，安装依赖，上传完 抛弃他，后续优化
#!/bin/bash
url=$1
branch=$2
scenes=$3
echo '参数如下'
echo "git地址 $1"
echo "branch $2"
echo "scenes $3"
echo '开始拉取代码'
git clone -b $2 $1
cd mini-program
echo '开始安装依赖'
npm install
echo '依赖安装完成'
echo '开始打包'
npm run build:$3
echo '开始上传'
npm run upload:$3
echo '上传完成'
cd ../
rm -rf 删了这个目录
复制代码前端配置
前端配置三个选项,github地址，分支，环境
通过按钮形式点击打包
