Monorepo之 15min体验一下lerna吧- 前端自动化集成[二]

hello！ 大家好，我是一名前端开发，致力于用最简单直白的介绍方式来和大家分享技术、期待共同进步的好青年，哈哈

---

接着上一篇介绍lerna部署的文章，我把基于这个项目的自动化集成方面的内容总结一下，最好结合看，才能明白我本文的目的，希望对你们能够有点帮助！

上一版文章地址：Monorepo之 15min体验一下lerna吧

---

ok，回归正题

我将由以下几个部分阐述自动化集成实践：

• 为什么要用自动化集成（缘起） ：网上资料一堆，没重点写，有兴趣大家去搜搜大佬们的BLOG详解，非本文重点

• 我在项目中是如何降低劳动力提升自动化的 ：重点看！！！和我一样的小白们可以跟我一起来一步一步试试哦

  - shell脚本实现一键打包一键提交
  - Gitlab runner实现自动化部署测试环境
  

• 其中我遇到了哪些问题 ：因为我遇到不少问题！都总结在此，希望看到此文章遇到其他问题或已解决的可以留言，分享出来！嘻嘻！

为什么要用自动化集成

想必各位平时都听说过 CI（持续集成）/CD（持续部署）
用流程图简单说明一下我接下来用的gitlab CI的工作流程：

在我看来，自动化集成就是利用服务器来提高开发效率，提升业务稳定性

那么以此为出发点，我总结一下我目前项目中觉得影响我开发效率的原因：

1. 当前项目的子项目较多（所以采用lerna管理），但耦合较大（公用组件较多），如果修改公用组件，就要进入每个目录，一次一次的进行npm run build -> git一系列操作
2. 测试环境部署，当前业务状态是，给项目打tag，然后利用Jenkins平台推送到测试服务器。

以上两个痛点，是我最痛心疾首的，看似罗列的少，可是项目个数多的提前下，我的操作是以倍数重复的！！！（呕...）

好了！我要解决这件事了。

我在项目中是如何降低劳动力提升自动化的

优化一：子项目较多，一处修改，四处打包，优化为一键打包

优化二：git操作繁琐，优化为命令行快速提交

方案：利用shell脚本

1.新建两个shell脚本在项目根目录下：
我命名为：pack.sh commit.sh

2.在package.json 下，我定义了两行执行命令。

"scripts": {
    "commit": "sh ./commit.sh",
    "pack": "sh ./pack.sh"
  }

3.打包脚本代码

echo "\033[32m 请选择打包目录的数字 [1：xiangmu1, 2:xiangmu1, 3: xiangmu3, 4:xiangmu4]"
read number

if [[ $number = '1' || $number = '2' || $number = '3' || $number = '4' ]]; then
echo "================build start===================="
case $number in
1) 
    cd ./packages/xiangmu1
    # workdir=$(cd $(dirname $0); pwd)
    # echo $workdir
    sudo npm run build
;;
2) 
    cd ./packages/xiangmu2
    # workdir=$(cd $(dirname $0); pwd)
    # echo $workdir
    sudo npm run build
;;
3) 
    cd ./packages/xiangmu3
    # workdir=$(cd $(dirname $0); pwd)
    # echo $workdir
    sudo npm run build
;;
4) 
    cd ./packages/xiangmu4
    # workdir=$(cd $(dirname $0); pwd)
    # echo $workdir
    sudo npm run build
;;
*)
    echo "Usage: sh pack.sh default"
    exit;
esac
else
echo "Input Is Error."
fi

4.提交脚本代码

echo "\033[32m 请确认是否提交 y/n"
read submit 
if [ $submit == 'y' ]; then
echo "\033[32m 请输入提交描述[不支持带空格] "
read detail
git add .
git commit -m $detail
# git commit -m "asd"
git push
else 
echo "终止提交"
fi

5.执行

npm run pack //打包项目
npm run commit //提交代码

优化三：测试环境部署自动化

利用 Gitlab Runner
官方文档： https://docs.gitlab.com/runne...

---

gitlab runner简介：

gitlab-runner即项目自动化的驱动，它可以执行 .gitlab-ci.yml文件（写在你项目根目录下即可），提交代码后，会执行写好的脚本，由脚本再执行进一步的操作，从而实现自动化。
我粗糙的说一下我的理解：在项目里创建一个.gitlab-ci.yml文件，当你提交代码的时候，会依据这个文件的命令来帮你自动化做一些事情！比如：帮你给文件打个包啦，帮你给文件部署到哪个位置去啦，帮你给项目做个自动化测试啦（这功能我还没做）等等等等

.gitlab-ci.yml的官方文档：https://docs.gitlab.com/ce/ci...

---

Gitlab Runner的版本需要跟Gitlab对应（很重要），我所开发的项目gitlab为8.X, 对应的runner应该为11.X，所以我最后选择runner 1.11.2

我运行Gitlab与Runner的环境均为CentOS

安装

1.下载

sudo wget https://gitlab-ci-multi-runner-downloads.s3.amazonaws.com/v1.11.2/binaries/gitlab-ci-multi-runner-linux-386

2.添加运行权限

sudo chmod +x gitlab-ci-multi-runner-linux-386

3.创建用户

sudo useradd --comment 'GitLab Runner' --create-home gitlab-runner --shell /bin/bash

4.安装

sudo gitlab-ci-multi-runner-linux-386 install --user=gitlab-runner --working-directory=*****（pwd你自己的路径)/gitlab-runner
sudo gitlab-ci-multi-runner-linux-386 start

配置 Gitlab Runner

官方文档： https://docs.gitlab.com/runner/

1.去git的项目中，找到项目runner的url和token

2.运行命令

./gitlab-ci-multi-runner-linux-386 register

之后就按照提示就行了
2.输入url地址
3.输入token
4.输入描述，任意即可
5.输入标签，这里直接Enter跳过
6.选择Runner executor，这里选择shell

到这里就已经注册成功了，输入./gitlab-ci-multi-runner-linux-386 list就能看到上面的注册的条目。

在git中也能看到注册成功的显示

当当当当！还没有完！

你要在项目根目录下创建一个.gitlab-ci.yml 作为提交代码后gitlab-runner运行的依据（我主要进行了，代码在服务器上的拉新，build文件copy到线上地址目录）

ok, 大功告成啦。嘻嘻

部署当中我遇到了哪些问题

部署gitlab-runner我是遇到一些坎坷的

1. gitlab与gitlab-runner版本不兼容，导致注册失败，报错提示为：

ERROR: Registering runner... failed runner=< token > status=405 Method Not Allowed PANIC: Failed to register this runner. Perhaps you are having network problems

以上问题的解决方式是：找对gitlab 和 gitlab-runner的版本！网上有的博主说官方文档里说是有...可是我并没有找到...你们可以去看看

1. 权限问题。提交后自动化失败，提示 permission 问题；

解决方案：修改GitLab Runner的权限跟root保持一致。

vim /etc/passwd

通过上面命令可以编辑用户对应的权限，我这里打开默认为gitlab-runner:x :601:601:GitLab Runner:/home/gitlab-runner:/bin/bash,权限组修改为跟root的一致gitlab-runner:x :0:0:GitLab Runner:/home/gitlab-runner:/bin/bash。(root的权限组名为0)

以上为我在项目中的自动化实践

参考文章：（感谢你在我没找到对应版本的时候出现解救我哈哈）
https://blog.csdn.net/yzf9132... albert_knag