2020年5月

持续集成

Gitlab的持续集成

我们可以将整个运行机制,看作一个赏金猎人接任务,执行任务,并完成任务的过程。

GitLab-CI

简单来说,这就是一个任务发布平台。运行在gitlab服务器,监听代码状态变化,并发布对应的任务。

GitLab-Runner

而每个runner就是一位赏金猎人,是任务的执行者。

2020-05-22T06:04:52.png

.gitlab-ci.yml

任务的发布者,规定什么时候触发任务,任务的具体内容。

配置流程

经过前面的解释,整个思路就很清晰了。我们需要做的有三件事。

  1. 编写.gitlab-ci.yml文件,设置对应的任务
  2. 部署Runner,激活赏金猎人
  3. 配置ci,邀请赏金猎人加入系统

部署Runner

这一步需要一个服务器,能run起来赏金猎人。

安装

请务必安装最新版,不然会出现很多未知的问题

  1. 下载二进制文件
# Linux x86-64
sudo curl -L --output /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-amd64

# Linux x86
sudo curl -L --output /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-386

# Linux arm
sudo curl -L --output /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-arm

# Linux arm64
sudo curl -L --output /usr/local/bin/gitlab-runner https://gitlab-runner-downloads.s3.amazonaws.com/latest/binaries/gitlab-runner-linux-arm64
  1. 授予执行权限
sudo chmod +x /usr/local/bin/gitlab-runner
  1. Create a GitLab CI user:
sudo useradd --comment 'GitLab Runner' --create-home gitlab-runner --shell /bin/bash
  1. Install and run as service:
sudo gitlab-runner install --user=gitlab-runner --working-directory=/home/gitlab-runner
sudo gitlab-runner start

加入任务系统

注册

sudo gitlab-runner register

然后就是一些简单的配置,配置完成后就将该Runner注册到任务发布平台了,然后就可以接任务了。详细见参考文献【1】

编写.gitlab-ci.yml任务

本机部署版本
.gitlab-ci.yml

stages:
  - deploy

cache:
  paths:
    - node_modules/
    - public/

deployJob:
  stage: deploy 
  script:
    - npm install 
    - npm run build
    - rm -rf /home/data/three_miju_shopper_manager_system_front/*
    - cp -rf ./dist/* /home/data/three_miju_shopper_manager_system_front/
    - sh ./bot.sh ${CI_COMMIT_REF_SLUG} ${CI_COMMIT_SHA:0:8} ${CI_COMMIT_MESSAGE}
  tags:
    - shared_test_machine_runner
  only:
    - dev

这个版本具有企业微信群机器人推送功能,需要配置./bot.sh

#!/usr/bin/env bash
curl '群机器人地址' \
      -H 'Content-Type: application/json' \
      -d '
      {
        "msgtype": "markdown",
        "markdown": {
          "content": "商户端代码已更新,分支:'$1' 提交:'$2'
          更新:'$3'
          已发布,[点击测试](http://test.shop.gileey.cn)"
        }
      }'

远程推送版本

stages:
  - deploy

cache:
  paths:
    - node_modules/
    - public/

deployJob:
  stage: deploy 
  script:
    - mkdir -p ~/.ssh
    - echo "$SSH_PRIVATE_KEY" >> ~/.ssh/id_dsa
    - chmod 600 ~/.ssh/id_dsa
    - echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
    - rsync -avzu --progress ./dist/* root@thinkmoon.cn:/www/wwwroot/3ju.psyannabel.cn/
  tags:
    - shared_test_machine_runner
  only:
    - dev

该版本在gitlab-runner机器上执行编译等工作,编译完成后使用rsync同步到云服务器,需要配置私钥变量$SSH_PRIVATE_KEY

2020-05-30T14:20:12.png

遇到的问题

导入自定义组件时一直报错:This dependency was not found:

出现背景:由于以前命名组件是"clickImg",后改成"ClickImg",由于linux的区分大小写,所以会一直没找到。

解决方案:换个名字???

参考文献

  1. 前端的gitlab的ci初尝试
  2. Install GitLab Runner manually on GNU/Linux

为什么需要?

微信小程序里面页面与自定义组件的区别较大,而页面的可复用程度太低了。要么就是跳转页面,要么就是copy代码。如果我们要增加代码的可复用性,就可以借用Vue组件的思想,将页面改写为自定义组件。

结构对比

两者的视图文件,样式文件没有什么区别。主要区别最大的就是js文件,我们首先来看一下两者的结构。

page.js

page({
  // 数据内容
  data:{},
  // 生命周期函数
  onLoad(){},
  // 一些自定义函数
  someMethods(){}
})

componet.js

componet({
  // 预设属性
  properties: {},
  // 数据内容
  data: {},
  //组件所在页面生命周期
  pageLifetimes: {},
  // 生命周期函数-挂载
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  // 生命周期函数-卸载
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  // 自定义函数写结构里面
  methods:{
    someMethods(){}
  }
})

我们可以看到,两者的基本相似,大同小异。所以改写起来就特别方便啦~

  1. 将page改为componet
  2. 适配生命周期函数,例如将页面onLoad()函数改写为组件的attached()函数
  3. 将自定义函数someMethods()写到Componet的methods里面

按官网文档一键配置按需引入总是无法生效,目测可能是激进式预设没有选babel的原因。故写此文详细记录折腾过程,望有效!

vue ui创建新项目

选择预设,bable,eslint,vuex,vue-router(历史模式)

vue ui安装element插件

选择配置

2020-05-01T03:05:01.png

改动的内容

  1. 自动创建了bable.config.js,并添加了内容。
  2. 创建了`@/src/plugins/element.js,设置了按需引入
  3. 改写了app.vue,添加了element按钮组件

运行测试

2020-05-01T03:10:21.png

加载成功

2020-05-01T03:11:11.png

Q&A

  1. 为什么需要bable来支持按需加载

如果不使用bable转码,那你按需引入会找不到该组件。这是由于bable在将组件库转码的过程中把element整个组件库编译成了各种独立的组件模块,进而实现按需加载的功能

  1. 如何添加需要的组件

使用vue ui添加后的组件会在plugins目录下创建element.js文件,然后在main.js中引入该文件。文件内容如下:

import Vue from "vue";
import { Button } from "element-ui";

Vue.use(Button);

这就是只引入Button的方法,如果要按需添加,只需要依葫芦画瓢即可!