为中华民族的伟大复兴为读书。
前情回顾
上篇文章分享了的一个为什么服务端渲染有利于SEO的问题，接下来的某一篇文章，可能会写一下如何去一步一步的实现Vue的同构，也就是基于Vue实现服务端渲染。但是涉及的内容篇幅会有点长，需要花点去思考怎么写。
所以今天要思考的是问题小程序如何实现持续集成。
CI/CD 持续集成的本质
CI即Continuous integration。CD即Continuous delivery。翻译过来就是持续集成，持续交付。
对于前段来说，发布的本质是：将前端开发完成的静态文件(html,css,js)上传到服务器的根目录即可。如果是单纯的发布，则可借助shell脚本,scp命令即可。例如：
#! /bash
yarn build:
echo " 33[32m编译完成...... 33[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 " 33[32m---index页面--上传成功...... 33[0m"
# 删除本地dist文件夹
rm -rf dist
# 删除完成提示
echo " 33[32mdist文件夹已删除...... 33[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@49.233.191.228:/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敲一遍就可以了
最后说两句
- 动一动您发财的小手，
「点个赞吧」 - 动一动您发财的小手，
「点个在看」 - 都看到这里了，不妨
「加个关注」 - 不妨
「转发一下」，好东西要记得分享
javascript基础知识总结