实现基于git hooks的持续集成

为中华民族的伟大复兴为读书。

前情回顾

上篇文章分享了的一个为什么服务端渲染有利于SEO的问题，接下来的某一篇文章，可能会写一下如何去一步一步的实现Vue的同构，也就是基于Vue实现服务端渲染。但是涉及的内容篇幅会有点长，需要花点去思考怎么写。

所以今天要思考的是问题如何实现持续集成。

CI/CD 持续集成的本质

CI即Continuous integration。CD即Continuous delivery。翻译过来就是持续集成，持续交付。

对于前段来说，发布的本质是：将前端开发完成的静态文件(html,css,js)上传到服务器的根目录即可。如果是单纯的发布，则可借助shell脚本,scp命令即可。例如：

#! /bash
yarn build:
echo "\033[32m编译完成......\033[0m"
file="/*"
BASE_PATH=`pwd`
echo $BASE_PATH$file
# 显示路径
echo $BASE_PATH$page
# 上传文件到服务器对应目录
scp -r  $BASE_PATH$file root@your ip:/usr/share/nginx/html/work
# 上传成功提示
echo "\033[32m---index页面--上传成功......\033[0m"
# 删除本地dist文件夹
rm -rf dist
# 删除完成提示
echo "\033[32mdist文件夹已删除......\033[0m"%%

而持续，意味着前端功能开发完成后，不用再将前端文件交给后端人员去发布。而是开发完成，测试无误后即可自由的发布。

持续集成的方案

根据个人所知道的持续集成方案，有以下三总：

• nginx 配合 git hooks这个只要熟悉nginx的常用配置，linux的基本命令，以及了解git hooks的一些知识，不需要后端人员参与即可自行实现。
• docker虚拟容器。这个需要对Docker有一个非常清楚的认知，有些前端大神也是驾熟就轻。
• jekens。 这个一般用在java项目中，通常由后端人员去搭建这样的一套流程。

如何基于git hooks实现持续集成

• 第一：在服务器上建立项目的裸仓。 注意这里需要建裸仓，否则本地代码push的时候会报错

  # bash
  git init --bare name.git

建裸仓示例：

[root@VM_0_16_centos projects]# mkdir testCi
[root@VM_0_16_centos projects]# cd testCi/
[root@VM_0_16_centos testCi]# ls
[root@VM_0_16_centos testCi]# git init --bare testCi.git
初始化空的 Git 版本库于 /home/projects/testCi/testCi.git/
[root@VM_0_16_centos testCi]# ls
testCi.git
[root@VM_0_16_centos testCi]# ls -a
.  ..  testCi.git
[root@VM_0_16_centos testCi]#

• 第二，在服务器的其他目录clone这个仓库。clone完成后，可以看到home文件夹下已经有了testCi这个文件夹。并且它是一个git仓库，因为它有.git文件夹。 示例代码:

[root@VM_0_16_centos testCi]# cd /home
[root@VM_0_16_centos home]# ls
backend  blog  git  projects  public_code  repos  testCi
[root@VM_0_16_centos home]# rm -rf testCi
[root@VM_0_16_centos home]# ls
backend  blog  git  projects  public_code  repos
[root@VM_0_16_centos home]# git clone /home/projects/testCi/.testCi.git
fatal: 版本库 '/home/projects/testCi/.testCi.git' 不存在
[root@VM_0_16_centos home]# git clone /home/projects/testCi/testCi.git
正克隆到 'testCi'...
warning: 您似乎克隆了一个空版本库。
完成。
[root@VM_0_16_centos home]# ls
backend  blog  git  projects  public_code  repos  testCi
[root@VM_0_16_centos home]# cd testCi/
[root@VM_0_16_centos testCi]# ls
[root@VM_0_16_centos testCi]# ls -a
.  ..  .git

• 第三，在本地的电脑上clone服务器上的项目，clone后可以执行cd进入项目目录，然后执行ls -a查看是否有.git文件夹，这个不重要，重要的是我们现在可以进行本地开发了。 示例代码：

git clone root@your ip:/home/projects/testCi/testCi.git
Cloning into 'testCi'...
warning: You appear to have cloned an empty repository.
cd testCi
ls -a
.    ..   .git

• 第四，配置服务器上的git hooks。能否实现持续集成，关键在这个部分。首先，进入服务器上建好的裸仓的hooks文件夹，配置post-update文件。这这里写了个echo "git push success"做测试用。

[root@VM_0_16_centos ~]# cd /home/projects/
[root@VM_0_16_centos projects]# ls
testCi
[root@VM_0_16_centos projects]# cd testCi/
[root@VM_0_16_centos testCi]# ls
testCi.git
[root@VM_0_16_centos testCi]# cd testCi.git/
[root@VM_0_16_centos testCi.git]# ls
branches  config  description  HEAD  hooks  info  objects  refs
[root@VM_0_16_centos testCi.git]# cd hooks
[root@VM_0_16_centos hooks]# ls
applypatch-msg.sample  post-update.sample     pre-commit.sample          pre-push.sample    update.sample
commit-msg.sample      pre-applypatch.sample  prepare-commit-msg.sample  pre-rebase.sample
[root@VM_0_16_centos hooks]# vim post-update
[root@VM_0_16_centos hooks]# cat post-update
echo "git push success"
[root@VM_0_16_centos hooks]#

• 第五，在本地的仓库中，添加个文件，提交一次试试。

示例： 本地提交readme.md

  testCi git:(master) git add .
➜  testCi git:(master) ✗ git commit -m "test ci"
[master (root-commit) 6cae699] test ci
 1 file changed, 1 insertion(+)
 create mode 100644 readme.md
➜  testCi git:(master) git push
Enumerating objects: 3, done.
Counting objects: 100% (3/3), done.
Writing objects: 100% (3/3), 225 bytes | 225.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To 49.233.191.228:/home/projects/testCi/testCi.git
 * [new branch]      master -> master
➜  testCi git:(master)

然后回到服务端的仓库(注意这个仓库不是裸仓，而是clone裸仓的那个仓库)执行git pull，你会发现，readme.md已经同步过来了。到这里持续集成配置已经成功了一大半。

示例：

[root@VM_0_16_centos home]# cd testCi/
[root@VM_0_16_centos testCi]# git pull
remote: Counting objects: 3, done.
remote: Total 3 (delta 0), reused 0 (delta 0)
Unpacking objects: 100% (3/3), done.
来自 /home/projects/testCi/testCi
 * [新分支]          master     -> origin/master
[root@VM_0_16_centos testCi]# ls
readme.md

• 第六, 在服务器端的裸仓更新post-update钩子。

[root@VM_0_16_centos ~]# cd /home/projects/
[root@VM_0_16_centos projects]# ls
testCi
[root@VM_0_16_centos projects]# cd testCi/
[root@VM_0_16_centos testCi]# ls
testCi.git
[root@VM_0_16_centos testCi]# cd testCi.git/
[root@VM_0_16_centos testCi.git]# cd hooks
[root@VM_0_16_centos hooks]# ls
applypatch-msg.sample  post-update         pre-applypatch.sample  prepare-commit-msg.sample  pre-rebase.sample
commit-msg.sample      post-update.sample  pre-commit.sample      pre-push.sample            update.sample
[root@VM_0_16_centos hooks]# vim post-update
[root@VM_0_16_centos hooks]# cat post-update
echo "git push success"
cd /home/testCi
git pull

如果对shell脚本比较熟悉的话,有可能写成下面的格式:

#!/bin/sh
unset GIT_DIR 
DIR_ONE=/home/user/apps/blog

if [ -d $DIR_ONE ]; then
    rm -rf $DIR_ONE
fi

mkdir -p $DIR_ONE
cd $DIR_ONE
git init
git remote add origin /home/repos/nirvana.git
git pull origin master

yarn
yarn build

• 至此，一个基于git hooks的持续集成就算是完成了

总结

• 需要对持续集成的本质有所了解
• 需要对git hooks ，shell 脚本有所了解
• 其他的就是照着demo敲一遍就可以了

最后说两句

1. 动一动您发财的小手，「点个赞吧」
2. 动一动您发财的小手，「点个在看」
3. 都看到这里了，不妨 「加个关注」搜索微信公众号《javascript高级程序设计》
4. 不妨 「转发一下」，好东西要记得分享