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

jiezi

5 年前

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

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

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

ok，回归正题

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

为什么要用自动化集成（缘起 ）： 网上资料一堆，没重点写，有兴趣大家去搜搜大佬们的 BLOG 详解，非本文重点
我在项目中是如何降低劳动力提升自动化的 ： 重点看！！！和我一样的小白们可以跟我一起来一步一步试试哦
```
- shell 脚本实现一键打包一键提交
- Gitlab runner 实现自动化部署测试环境
```
其中我遇到了哪些问题 ： 因为我遇到不少问题！都总结在此，希望看到此文章遇到其他问题或已解决的可以留言，分享出来！嘻嘻！

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

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

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

当前项目的子项目较多（所以采用 lerna 管理），但耦合较大（公用组件较多），如果修改公用组件，就要进入每个目录，一次一次的进行 npm run build -> git 一系列操作
测试环境部署，当前业务状态是，给项目打 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

官方文档：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 我是遇到一些坎坷的

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 的版本！网上有的博主说官方文档里说是有 … 可是我并没有找到 … 你们可以去看看

权限问题。提交后自动化失败，提示 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

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

为什么要用自动化集成

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

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

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

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

gitlab runner 简介：

安装

配置 Gitlab Runner

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