[Jenkins Advanced]-Front-end CI/CD

What is front-end automation

Front-end automation does not mean automatically generating code, but automatically building projects.

If there is no automation, our front-end work flow from development to testing may be as follows:
1. Write code on the local machine
2. Enter npm run unit/lint on the command line to view the unit test/eslint verification results
3. Submit the code, push to the git remote warehouse
4. Execute npm run build to build the project
5. Various methods such as ssh/ftp sending packages to the test server
In this process, each step has to be repeated manual operations, which greatly increases the time cost and cannot guarantee the accuracy of the operation. For the result of unit or build, there is no automatic feedback mechanism. It is necessary to manually check the running result. The final deployment is also to manually log in to the server to execute the script, which is very cumbersome.

introduces automation, the whole process becomes:
1. Write code on the local machine
2. Submit the code, push to the git remote warehouse
3.Git hook triggers the construction of jenkins job
4. Pull the project code from jenkins job, run npm run unit/lint and npm run build.
5. Execute the deployment script of the test server in jenkins job
In the automated process, only step 1 and step 2 require manual operation, and other steps are automatically run. It is a very standardized process, which reduces the risk of manual operation, eliminates repetitive work, and enhances the visibility of the project.

Effect picture

accomplish

flow chart

• Developers submit code to the code base
• Trigger jenki build task
• The build is successful, the package is sent to the nginx server, and the update is complete
• Build failure, remind developers of code build failure through DingTalk notification/Enterprise WeChat/Email, etc.

1. Preparation:

Prepare git project: https://github.com/wzc570738205/frontproject.git
Prepare group (used to receive CI/CD result notification): 35669766
Ready to install the cloud server here, refer to on the linux server

2. Notification of access code submission

When you push the code to the code base, automatically send a message to Dingding through the git webhook

2.1 Add Dingding Group Robot (Smart Group Assistant)


Copy webhook, you will use it next


2.2 Add Dingding webhook to the corresponding webhook corresponding to github

2.3 Notification of test code submission

Configuration is complete, we submit the code for testing

far, the code submission notification configuration is complete

3. Access project CI

After we submit the code, we need to verify that there are no fatal errors in the code merge. Here we take a simple method to allow npm run build . If there is no error in the operation, then the submission is passed. Failure means that the code has a fatal error and needs to be modified

3.1 Jenkins new project

Here are brief steps. For details, please refer to Use Jenkins to automatically build a github project

• Create a build a free-style software project
• The source code manager selects git, and fills in the address and credentials (create a new one if not)
• Build trigger selection: GitHub hook trigger for GITScm polling

• Add node environment: system management/global tool configuration-add nodejs, select the appropriate version

• Select node for the build environment, check the node just downloaded

• Build selection execute the shell:

  npm install -g cnpm --registry=https://registry.npm.taobao.org&&
  cnpm install&&
  npm run build

  

• Post-build operation (optional):


We use the jenkins job to determine whether the CI is successful

3.1.1 Test

Submit the code again and successfully trigger the jenkins job

Successfully built


3.2 Access to build status notifications

• Configure Dingding custom robot, and select security settings custom keywords, here you can #

• Download the jenkins plugin DingTalk for notification

• Configure plug-in=>System management select Dingding, fill in the custom robot webhook address just now


• Turn on robot notifications in the project


• Click to start building and test

  
Wait for CI to end

Failure reminder


far, the CI configuration is over, we have implemented the code submission nail reminder, and the CI notification reminder

4. Access CD

In the above steps, we implemented the CI operation, that is, whether the package of the generation environment can be packaged to suggest whether the code has fatal errors. After this step is passed, we need to send the deployment package to the nginx server

4.1 Send package to server

• Install the jenkins plugin Publish Over SSH
• Configure the plug-in in the settings, fill in the server ip, use the password in the advanced, and set the remote server folder /

Click to test connectivity

• Project configuration

• Modify the build shell, add compression

  npm install -g cnpm --registry=https://registry.npm.taobao.org&&
  cnpm install&&
  rm -rf dist&&
  npm run build&&
  cd ./dist&&
  tar -zcvf dist.tar.gz *

• Add post-build operation Send build artifacts over SSH


• Server configuration nginx

  location /testPage{
   alias     /home/test;
   index     index.html;
  }

Test, after the build is successful, visit https://wangzc.wang/testPage
At this point, the CD integration is complete, and now you only need to submit the code to realize automatic packaging and automatic deployment.

Concluding remarks

I will continue to write how to access gitee, gitlab, and svn in the future.