前端自动化(包含服务器构建,前端,后端,以及各类杂项)

·  阅读 689

前言

为了捣鼓自动化,又把忘记的东西全部重新捣鼓了一遍,目前只对小程序进行了自动化操作,后续补齐jenkins等,估计也不需要前端做jenkins,玩玩嘛,学习学习

前期准备

  1. 基于CentOS 8 服务器一台
  2. 后端项目一个
  3. 前端项目一个

技术架构

  • 前端
  1. vue3全家桶(vuex,router,等)
  2. vue-cli(vue3版本+自己加的一些琐碎模块)
  3. husky eslint prttier等系列团队协作方案
  • 后端
  1. koa2 (没用koa-generator) 对后端着实不熟,但是希望自己能够对后端的目录架构有一个清醒的了解,所以自己搭了一遍,目前来看,还是不错,只是有些东西偷了懒
  • 数据库
  1. mongodb 增删改查,包括一些常用sql
  • 服务器
  1. 还是常规的CentOS 8 不过据说CentOS 8 开发者已经不玩了
  2. 使用nvm进行node版本管理

实现目标

通过搭建koa+CentOS+gitee+miniprogram-ci,实现小程序自动化部署的功能,通过前端将代码push到指定分支,自动触发ci打包小程序的功能

注意事项

  • locahost指的是项目的根目录!,所以每次建议当每次使用koa api应当查看要在哪个目录执行,一般api都有参数cwd

服务器操作

  1. 下载putty
  • 也可以使用腾讯云自带的一键登录

微信截图_20220106150204.png

  1. 输入服务器公网地址

输入服务器公网地址

  1. 登录服务器

  2. 输入登录服务器的账号

 login as root  //我直接超管  
 
 输入密码  这里是隐藏的密码
 
 cd /   就可以看到你的目录
复制代码

服务器基础搭建

基础搭建的文章已经很多了,我就不喧宾夺主了

  1. nginx的搭建
  • 此篇文章虽然是阿里云的,但是一法通万法通,大同小异 ,皆可实现

  • 为了方便我的nginx.config 里面 localhost写了多个地址,把前端,后端 还有一些其他东西都塞进去了,

    nginx安装

  1. mongodb的安装
  • 记住要自己在mongodb的目录下创建 data db等目录

  • 安装完毕,记得 重启服务器

    mongodb的安装

  1. nvm安装

  2. ssh生成

基础准备

gitee github gitLab都是相同思路,这里以gitee作为展示

生成webhooks

微信截图_20220106152013.png

生成后链接

每次提交到当前指定分支,就会通知后端接口代码更新

image.png

小程序生成秘钥

秘钥生成后会生成 private.appid.key的文件, 与下方的privateKeyPath 对齐

微信截图_20220106152159.png

自执行上传逻辑

miniprogram-ci

优化方向,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地址,分支,环境

通过按钮形式点击打包

项目地址

前端

后端

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改