Cutting edge: Guys, are you still manually “dropping bags”? Don’t you like being a mechanized porter? If you want to learn how to automate pipeline construction, this article is for you, combining CICD to automate front-end construction projects. This article is about how to make CI/CD run based on Jenkins and Travis, free your hands 👋, goodbye 996

1. Ancient times

As we know, for the general SPA application, the nature is static resources (back-end rendering SSR ignored), execute the build command, package the project after build, compress the packaged file, SSH connection to the server and “throw” the compressed file to the server, decompress the uploaded file, Finally, Nginx can be configured to access the resources of the project. The process is as follows in Stone Age

We probably need to do the following

  • Local implementationnpm run buildBuild the project and compress the compiled resource files
  • Drop the compressed package to the remote server
  • SSH to the remote server and decompress the package
  • Configure nginx

2. Iron Age

To then front had their own tool chain, in order to make the code prior to release of robustness and functional integrity of a validation, joined the unit tests in the release process and code scanning, after verification again through the server manually pull latest build compiled code (git) project, the final configuration Nginx can access to the resources, Here’s how we did it in the Iron Age

To complete a complete front end project release loop, we probably need to do the following

  • Code scanningnpm run lintCheck that the code is canonical (eslint)
  • Local run unit testsnpm run unitReview the unit test results
  • withgitSubmit the tested code to a remote repository such asgitlab
  • Log in to the remote test server, pull the code, and executenpm run buildBuild the project
  • If it is a back-end rendering project (SSR), if it is based on PM2 to do process management, it needs to restartpm2 restart

Every release requires manual “package dropping” and repeated mechanized work, which can be incredibly slow, and it’s harder to ensure that every step is not missed, and that code is submitted without unit testing, causing errors, and so on

Thinking: 👨🎓 Ah Le: So I can integrate these details into a shell script, which is not automatic?

3. The CICD era

What is CICD? Continuous Integration and Continuous Delivery is a simple way to automate the deployment and construction process that we previously had to perform manually

👨🎓 Ah Kuan: Still a little confused about the difference between continuous integration and continuous delivery

  • Continuous integration: When code changes to the code repository, the code is automatically tested and built, and the results are reported back.

  • Continuous delivery: Continuous delivery is based on continuous integration, the integrated code can be successively deployed to the test environment, release environment, production environment, etc

🌲

  • What is continuous integration and continuous delivery

So what tools do we have to help us do this? I usually use Jenkins CI/CD and Travis CI

3.1 Travis CI

Travis CI is one way to implement a continuous integration service, but it’s a bit of a “bundle” with GitHub, since Travis only supports GitHub, GitLab, and other code hosting platforms. If there is a new code change in the repository, it is automatically captured, tested and built. Here is 🌲 Chan’s guide to the proper usage of “Travis”

3.1.1 Preparations

1. Register your own Travis -ci account at Travis-ci.org, bind to Github, log in and select the project you want to integrate with

2. Once you have done so, create a file in the root directory of the project where you want to do continuous integration. Travis. When there is a new Commit in the repository, Travis will go to the project root directory to find the file and execute the command inside. Let’s look at the tree defined.travis

The above definition consists mainly of the following main configurations 👇

  • languageThe: field specifies the default runtime environment
  • node_js: Specifies the Node version.
  • install: Specifies installation scripts or dependencies
  • script: Run the script

There is one detail to distinguish between the Install phase and the Script phase:

  • If one of the tasks in the Install phase fails, the entire task is aborted and the state of the entire build phase fails.
  • If one of the tasks in the Script phase fails, the task proceeds, and the build phase fails as well as Install

3. When code changes in the repository, Travis automatically triggers and executes you.travis.ymlDefined commands to test and build

3.1.2 Practical operation

👩🎓 Ahle: What happens if tree jam makes a mistake in the CI process?

Projects fail more or less during build and test. Here is an example of an actual unit test error that interrupts CI behavior (because the tree is configuring the unit test command in the Install phase)

This is a simple demo of Travis implementing automated integration. Travis can do many more things, such as building your Page, Github, and more

🌲

  • Use Travis + GitBook + Github Pages to gracefully publish your book
  • Continuous Integration Services Travis CI tutorial

3.2 Jenkins CI/CD

We introduced Travis in the last section and know that Travis relies on Github for repository management, but what if the company uses SVN internally instead of Git? Although Git is the mainstream now, Jenkins has a strong ability to expand, and both Git and SVN are supported. At the same time, Jenkins, as an extensible automation server, can be used as a simple CI server with automatic construction, testing and deployment functions. In short, Jenkins can facilitate our daily front-end project version update iteration (development, testing, production environment, etc.). It also automates a range of operations including compilation and packaging meta-tests, code scanning, and so on

The following builds by introducing two build configurations: the default configuration and pipeline configuration

3.2.1 Mode 1: Modify the default Settings

  • Source Code Management, the first is the repository configuration

  • Build Triggers

Select a build trigger mode. The default is manual, which supports code-triggered builds and timed builds

  • The build command

Select the script command to execute

  • Post-build Actions

It is mainly used for multi-node remote deployment and cluster deployment

Remote access can be added to multiple machines to upload a build-packaged resource to multiple nodes to update the resource

3.2.2 Mode 2: Jenkins pipeline configuration

The Jenkins pipeline configuration is mainly introduced here. The pipeline code defines the entire build process, which usually includes the stages of building, testing and delivering the application. The following is the configuration of the path and warehouse

Image configuration is as follows:

  • SCM: Select Git or SVN as the code trigger
  • Script path: Create jenkinsfile in the project root directory to write pipelining

Here is a simple version of JenkinsFile pipelined task writing, complete the whole front-end engineering deployment involved compilation packaging, static scanning, unit testing and so on

Once completed, the project can be built and completed in stages, starting with the drop-down source code, code build and compile, code scan, and so on. Automatic deployment is successful only when all steps are successful, as shown below

🌲 sauce previous articles:

  • Construction of front-end Knowledge System of Tree Jam (PART 1)
  • Construction of front-end Knowledge System of Tree Jam (Part 2)
  • Talk about daily collaboration tools for front-end development
  • Babel configuration is stupid
  • How to better manage the Api
  • The interviewer asks you about Node
  • Front-end engineering stuff
  • Did you learn BFF and Serverless
  • Front-end operations and deployment

Please drink a cup 🍵 remember three even oh ~

1. Remember to give 🌲 sauce a thumbs up after reading oh, there is 👍 motivation

2. Pay attention to the interesting things at the front of the public account, and chat with you about the interesting things at the front

3. Github frontendThings thanks to Star✨