Pure Git implements front-end CI/CD

Recently, I want to efficiently deploy the front-end react project to a private server. I have studied several continuous deployment solutions. Here is a brief description.

There are two general deployment ideas:

• File deployment after compilation
• Source code deployment

The compiled file deployment is to npm run build locally, generate a build folder, and then transfer the build folder to the server, and then use Nginx to configure a static analysis.

This solution can be uploaded directly with rsync, so I won’t go into details here.

Source code deployment is to upload source files to the server, and then:

$ npm install && npm run build

In this way, the packaging work is handed over to the server (or other build tools), and the source code is only pushed up locally, and git listens to the push and automatically starts the build. This is the popular way now, and most continuous integration tools do this.

Today's highlight is here! We do not rely on other build tools, but only use pure Git to monitor push and build automatically. Believe me, this step is very interesting~

Server

First prepare a server, install node git nginx , and start to do it.

The server information is as follows:

host: 198.234.456.8 (false)
Project directory: /home/react-test

Create a bare warehouse

Log in to the server and create a bare warehouse in the /opt directory of the server

What is a bare warehouse? A bare warehouse is a warehouse without a working directory. To put it .git , it is the 0618dfa9ab2f2f folder in your project directory

Execute the command to create:

$ cd /opt
$ git init --bare react-test.git

After creation, the react-test.git folder will be generated, so the location of our bare warehouse is /opt/react-test.git , remember that we will use it later.

Next, enter the react-test.git folder and find that there is a hook folder inside. This folder is incredible, it's the place to put Git "hooks".

The so-called "hook" is actually a shell file. Trigger execution when git operations (such as push, pull) are executed.

Now we create a hook.

Add push hook

post-receive file in the hook directory. This hook file will be executed after the code is pushed to the bare warehouse. Here is the most important point of this article.

$ cd /opt/react-test.git/hook
$ vim post-receive

The specific content of post-receive is as follows:

#!/bin/bash
echo 'server: received code push...'
cd /home/react-test

echo 'server: checkout latest code from git...'

git --git-dir=/opt/react-test.git --work-tree=/home/react-test checkout -f release

echo 'server: running npm install...'

npm install \
&& echo 'server: buildding...' \
&& npm run build \
&& echo 'server: done...'

The most important command of this script is:

git --git-dir=/opt/react-test.git --work-tree=/home/react-test checkout -f release

What does that mean? First of all, let's talk about how we usually use git.

Generally, we initialize the git repository git init in the project directory. The execution of add, commit and other operations is to exchange files with this warehouse by default.

There are two important concepts here: project directory and git repository. The project directory is the directory where the package.json file is located, and our code is placed here. The git repository is the .git folder under the project directory. It is a hidden directory and is automatically generated git init

So, another directory in the current project directory?

Yes, the --git-dir parameter allows you to specify another git repository.

For example, I want to /home/react-test the modified files under 0618dfa9ab3072 to the temporary storage area:

# 默认加到 /home/react-test/.git
$ git add .
# 加到 /home/git-test/.git
$ git --git-dir /home/git-test/.git add .

Since the project directory can specify other git repositories, can git repositories specify other project directories?

Of course, you can. The --work-tree parameter allows you to specify other project directories.

For example, I want to check out the branch /home/react-test

# 默认从 /home/react-test/.git 检出
$ git checkout dev-test
# 从 /home/git-test/.git 检出
$ git --work-tree /home/git-test/.git checkout dev-test

Amazing, haha. This separates the project from the warehouse.

To understand this, look at the meaning of the above piece of command: the /opt/react-test.git this git repository release branch detection (checkout) to the project directory /home/react-test , thereby updating the code of the project directory.

After checking out the new code, run the packaging command and update the deployment folder, so that the deployment is achieved.

Nginx parsing

In the last part, the deployment is complete and the build folder is packaged. This folder is the folder to be deployed.

The last step is to configure a domain name and resolve to this folder.

$ cd /etc/nginx/conf.d
$ vim react-test.conf

Write the following configuration in the react-test.conf file:

server {
    listen 80;
    server_name yourhost; # 如 www.baidu.com
    root /home/react-test/build; # 指向打包后的目录

    location / {
        index index.html;
    }
}

After saving and exiting, nginx -s reload , so the analysis is ready!

At this point, the server-side packaging, deployment, and analysis processes are all completed. The following is to accept the push of the local code, and then automatically trigger this process.

Client

The git bare warehouse react-test.git built on the server earlier, and only one thing needs to be done when returning to the client: push the code to this bare warehouse.

Push code

In the first step, we first add this bare warehouse as a remote warehouse under the local project.

$ git remote add prod ssh://root@198.234.456.8/opt/react-test.git

In the second step, we directly push the code to this remote warehouse:

$ git checkout -b release
$ git push prod release

Here you must switch to the release branch and then push. Because in the remote warehouse hook, we define the release branch to be checked out, so the release branch is to be pushed.

You may be asked to enter the server password here. You can configure ssh to log in to without password to push directly, which will not be introduced here.

After pushing, you will see the output post-receive When the push is complete, check the /home/react-test directory under the server, you will see the source file and the packaged build file

At this point, CI/CD work has been completed.

The subsequent continuous deployment work only needs a push.

Wonderful in the past

This column will long-term output articles on front-end engineering and architecture directions. The following has been published:

• 1618dfa9ab3284 Front-end architect's git skills, how
• front-end architect's

If you like my article, please like and support me! Also welcome to follow my column, thanks 🙏🙏