Implement continuous integration based on Git hooks

For the great revival of the Chinese nation for reading.

Antecedents to review

The last article shared the question of why server-side rendering is good for SEO, and a future article will probably cover how to implement Vue isomorphism step by step, i.e. implement server-side rendering based on Vue. But it’s going to be a little bit long, so you need to think about it a little bit.

So the question to think about today is how to achieve continuous integration.

The nature of CI/CD continuous integration

CI stands for Continuous Integration. CD Continuous delivery. The translation is continuous integration, continuous delivery.

For the front end, the essence of publishing is: upload static files (HTML, CSS, JS) developed in the front end to the root directory of the server. For simple publishing, you can use shell script and SCP command. Such as:

#! /bash

yarn build:

echo "\033[32m compiled......\033[0m"

file="/ *"

BASE_PATH=`pwd`

echo $BASE_PATH$file

# display path

echo $BASE_PATH$page

Upload files to the corresponding directory on the server

scp -r  $BASE_PATH$file root@your ip:/usr/share/nginx/html/work

# Upload success message

echo "\033[32m-- index page -- upload successful......\033[0m"

Delete the local dist folder

rm -rf dist

# Delete complete prompt

echo "\033[32mdist folder deleted......\033[0m"% %

Copy the code

Persistence, however, means that after the front-end function is developed, there is no need to hand over front-end files to the back-end staff for release. But after the development is completed, the test can be released freely.

Continuous integration solutions

According to the continuous integration solutions that individuals know of, there are three general principles:

Nginx works with Git hooksYou just have to be familiar with thisnginxThe common configuration of,linuxBasic commands as well as understandinggit hooksCan be implemented without the involvement of backend personnel.
Docker virtual container. This needs to be rightDockerThere is a very clear understanding that some front-end gods are also familiar with the light.
jekens. This is usually used inIn the Java projectIt is usually up to the back-end people to set up such a process.

How to implement continuous integration based on Git hooks

The first:Create a bare warehouse for the project on the server.Note that you need to create a bare warehouse, otherwise the local code push will report an error

  # bash

  git init --bare name.git

Copy the code

Example of building a bare warehouse:

[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

Initialize the empty Git repository in/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]#

Copy the code

Second,Clone the repository in another directory on the server. After clone is complete, you can see that testCi is already in the home folder. And it is a Git repository because it has.gitFolder. Sample code:

[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: repository'/home/projects/testCi/.testCi.git'There is no

[root@VM_0_16_centos home]# git clone /home/projects/testCi/testCi.git

Is cloning to'testCi'.

Warning: You seem to have cloned an empty version library.

To complete.

[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

Copy the code

Third,Clone server project on a local computerAfter clone, the command can be executedcdGo to the project directory and executels -aCheck if there are.gitFolders, that’s not important, the important thing is that we can now do local development. Sample code:

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

Copy the code

Fourth,Configure Git hooks on the server. The key to continuous integration lies in this part. First of all,Go to the hooks folder that you built in the bare barn on the server and configure the post-update file. I wrote a little bit hereecho "git push success"For testing purposes.

[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]#

Copy the code

Fifth, add a file to your local repository and commit it once.

Example: local commit readme.md

  testCi git:(master) git add .

➜ testCi git:(master) qualify 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)

Copy the code

With a clone repository, you will find that readme.md has been synchronized. The continuous integration configuration has been more than half successful up to this point.

Example:

[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.

From/home/projects/testCi/testCi

* [new branch] master -> Origin /master

[root@VM_0_16_centos testCi]# ls

readme.md

Copy the code

Sixth, bare warehouse update on the server sidepost-updateHook.

[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



Copy the code

If you are familiar with shell scripts, it is possible to write them in the following format:

#! /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

Copy the code

At this point, oneContinuous integration based on Git hooksEven if it’s done

conclusion

You need to understand the nature of continuous integration
Need some knowledge of Git hooks, shell scripts
The rest is just a copy of the demo

One last word

Move your rich little hands and “like it.”
Move your rich little hands, “click here”
All see here, might as well “add a follow” search wechat public account “javascript Advanced Programming”
Might as well “forward”, good things to remember to share

Implement continuous integration based on Git hooks

Antecedents to review

The nature of CI/CD continuous integration

Continuous integration solutions

How to implement continuous integration based on Git hooks

conclusion

One last word

Related Posts

CSS page design concept and implementation (1)

Spent half a day, a clear vuex source code implementation

Cross domain