preface

Hello, everyone, I am Xu Zhu, martial arts practice de no matter how good, but also to learn from each hero. Today we’re going to start by talking about automated build deployments for front-end projects. Search and collect a lot of relevant information tutorial are not complete, relatively simple, all wrote this actual combat hydrology. Super, super detailed, suggested collection slowly look. If you have this aspect of the foundation or experience can be picked.

As the front-end automation construction and deployment tools have been very mature, it is a trend to become a good helper of front-end developers. Recently, WHEN I have some spare time, I will practice skills alone, thinking about how to do, and improve work efficiency for the company’s front-end team to promote front-end engineering. We will start with Jenkins, the most popular deployment tool, front-end automated build deployment release.

Not much to say, hug the sleeve on a disorderly operation, feel like going astray. After constantly trying to study and experience some time, I found that the front-end projects written before are purely manual packaging and deployment to each environment, but also manually input commands to execute, package, then compress, log in to a variety of server accounts, and then upload to the server to decompress the deployment process (feeling tedious, time-consuming and laborious). Especially in the rapid iterative development stage of the product, BUG feedback in the test environment can be quickly repaired and updated, and multiple project switches and release versions are particularly obvious. I think this kind of approach is really a little low and inefficient. It’s also a good idea to do more important things, like writing a few more bugs, instead of spending time building, deploying and releasing.

Since using the Jenkins continuous integration tool, write the front-end project engineering more and more, don’t have to worry about forgetting deployment project, also need not be agitated to deploy multiple servers and after each packing compression environment, more happy is if write code in the home, not remote deployment project corporation, will automatically for you after submit the code deployment.

This article is based on the Vue framework front-end project and Gogs code repository, Github code repository, as well as Windows10 operating system, CentOS operating system (other operating system platforms are almost the same), the beginning of the topic.

What is CI/CD?

  • Continuous Integration (CI) : Code merge, build, deploy, test all together, continuously perform the process, and feedback on the results.
  • Continuous Deployment (CD) : Deploy to test environment, pre-production environment, production environment.
  • Continuous Delivery (CD) : Release the final product to production for use by users.

The simple flow chart is as follows:

CI/CD advantages:

Improving developer productivity The CI/CD practice increases team productivity by freeing developers from manual tasks, dealing with complex dependencies, and focusing on providing new functionality. Instead of having to integrate their code with the rest of the business and spend time on how to deploy this code to the platform, developers can focus on the coding logic that provides the required functionality.

Automated Software Release Process Continuous delivery provides teams with a way to check in code that has been automatically built, tested, and prepared for release to production, making software delivery efficient, resilient, fast, and secure.

3. Improving code Quality CDS help you find and fix bugs early in the delivery process before turning them into bigger problems. Teams can easily perform other types of code testing because the entire process is automated. By doing more tests more often, teams can iterate more quickly and get immediate feedback on the impact of changes. This enables teams to drive quality code with a high degree of stability and security. Developers will know through immediate feedback whether the new code is working and whether any significant changes or bugs have been introduced. Bugs found early in the development process are the easiest to fix.

4. Faster delivery of update CDS helps teams deliver updates to customers quickly and frequently. When CI/CD is implemented, the overall team speed, including the speed of release features and bug fixes, increases. Businesses can respond more quickly to market changes, security challenges, customer needs and cost pressures. For example, if new security features are needed, the team can implement CI/CD and perform automated testing to introduce fixes quickly and reliably into production systems with a high degree of confidence. What used to take weeks or months can now be done in days or even hours.

What is Jenkins?

Jenkins is an open source, extensible Web-based platform for continuous integration, delivery, deployment (compilation, packaging, deployment of software/code). Allows continuous integration and continuous delivery of projects, regardless of platform, to handle any type of build or continuous integration.

Jenkins’s official website

Jenkins Official Documentation

Jenkins features:

  • Open source Java language development continuous integration tools, support CI/CD;
  • Easy installation, deployment and configuration: Quick installation and deployment can be realized through YUM installation or download of WAR package and docker container, which can facilitate configuration and management on web interface;
  • Message notification and test report: integrate RSS/Email to publish build results by RSS or generate JUnit/TestNG test reports by Email notification when build is completed;
  • Distributed build: Jenkins support allows multiple computers to build/test together;
  • Document identification: Jenkins can track which JAR packages are generated for which build, which version of JAR package is used for which build, etc.
  • Rich plugin support: With support for extension plugins, you can develop tools suitable for your team, such as Git, SVN, Maven, Docker, etc.

The preparatory work

Install the JDK 8

  • Oracle’s official download address: www.oracle.com/java/techno…
  • Select the corresponding version to download, I choose the Windows OS version to install JDK 8
  • Double click on thejdk-8u301-windows-x64.exeInstall, and then the next step until complete, the JDK installation path needs to know.

  • Configure environment variables (install the jenkins.jar package and publish the Java program code)

If the following screen is displayed, the installation is successful.

Install GIT

  • Git download: git-scm.com/download/wi…
  • Select the latest version and double-clickGit - 2.33.0.2-64 - bit. ExeInstall, follow the next step until complete.

  • Configuring environment Variables

If the following screen is displayed, the installation is successful.

Install Jenkins

Jenkins official download address: www.jenkins.io/zh/download…

Select the corresponding installation package, I choose the Windows version to download

Double-click the Jenkins. Msi package and follow the instructions to complete the next step, as shown below:

If this screen appears, it indicates that Jenkins has been successfully launched. Now you can open the address http://localhost:9090. It is recommended to use your IP address to access.

Find the path shown below, open the file with Notepad, and copy and paste the password here, as shown below:

To install plug-ins, select recommended plug-ins

The plug-in is being installed. Please wait patiently.

After the plug-in is installed, an administrator account will be created, as shown below:

The appearance of this screen indicates that Jenkins has been successfully installed, as shown below:

Congratulations, you can visit Jenkins website

Jenkins switch Chinese (prefer English version can ignore this item)

Operation steps:

  • Install Plugins: Manage Jenkins -> Manage Plugins -> Available -> Filter Locale -> check and click Install without restart
  • 英 文 : Manage Jenkins -> Configure System -> Default Languagezh_CN-> Select Ignore Browser preference and force this language to all users -> Click Save

Jenkins configuration

Install git, gogs, email, nodejs, Publish Over SSH

Git, gogs, email, nodejs, Publish Over SSH -> Install directly

After the installation is complete, all in url root input/restart click is restart, such as: http://localhost:9090/restart

After the plug-in is installed, you can configure it as follows

System Administration -> Global Tools configuration -> Configure JDK, Git, nodeJS -> Click Apply to save

The configuration is complete.

Gogs establishes the project and configures it

Establish warehouse

The company has set up the Gogs service, so we will not introduce how to build our own code server here. We will first create our own repository and upload the locally built Vue project directly to git repository, as shown in the picture below:

Configuration Webhooks

Warehouse Settings -> Manage Web constructs -> Add Web Hooks -> Select Gogs -> Click Add Save

Add a web hook and tell Jenkins to “post it for me” and Jenkins will post it.

The push address format is: HTTP (s)://< your Jenkins address >/gogs-webhook/? Job =< Your Jenkins task name >

Once the addition is complete, the Gogs side is complete.

Create Jenkins automation tasks

Click Create task on the main screen, enter the task name and confirm. Note: The task name must be the same as that in the Web hook address

Choose to create a free-style software project, as shown below:

Click OK to enter the task interface, as shown below:

Project configuration

Enter the newly created task interface and click the configuration button on the left to enter the configuration process, as shown below:

A total of 7 modules:

  1. Is the global configuration for this project
  2. Is the warehouse configuration used by the code. I use the open source GOgs plug-in found in the community. In the same way, gitLab, Github, Gitee and other mainstream open source warehouse communities have relevant plug-ins, which can be installed.
  3. Source code configuration module, mainly configuration source code related;
  4. Is the build trigger, which mainly configures the build trigger, build timing, build interval, etc.
  5. Is the build environment configuration;
  6. Build related operations and configurations, such as pulling source code, installing dependencies, compiling, packaging and publishing can be completed in this module;
  7. Post-build operations, publish to the server, delete or archive old code on the server are all operated in this module.

Click Config and select Gogs Webhook. If you don’t set the key text in Gogs, leave it here

Go to source control and check git configuration parameters, as shown below:

The above fields are described:

  • Repository URL: Repository clone address (I use HTTP, SSH configuration is cumbersome)
  • Credentials: Password of the git login account
  • Branch Specifier (blank for ‘any’) : Branch that needs to be built (specify the Branch to publish)
  • Source library browser: Select GOgs or automatic by default

Build the trigger configuration as shown below:

Build environment configuration, as shown below:

Build configuration, as shown below:

Click “Save” to complete the project configuration and enter the task interface automatically. Click “Build Now” button, as shown below:

The build history and status appear, with green markers indicating success, red markers indicating failure, and orange markers indicating instability. Click the tag to view the log, console output results.

Publish remote server

SSH plug-in needs to be configured. Generally, publish over SSH plug-in commonly used in the community is adopted. This plug-in has been installed in the previous Jenkins configuration.

System Administration -> System Configuration -> Publish over SSH -> Save

Click the advanced button on the right and select connect with user password, as shown below:

Click the Test Configuration button to Test whether the remote server is successfully connected. If “Success” is displayed, the connection is successful.

Use the FinalShell tool to log in to my server. My operating system is CentOS 7. Run the following command:

/ / installation
yum install nginx

/ / start
nginx -s start

/ / restart
nginx -s reload

/ / stop
nginx -s stop
Copy the code

To view system information about your own server, run the following command:

// Check the operating system information
uname -a

// Check the system version
cat /etc/redhat-release

// Check the port usage
netstat -tunlp

/ / kill process
kill -9 PID
Copy the code

The following screen appears, indicating that nginx has been installed successfully and is ready to play happily.

Create a Jenkins. Conf file in /etc/nginx/conf.d, configure the following information, and restart the nginx command:

server {
        listen 9999;
        listen [::]:9999;
        server_name _;
        root /usr/share/nginx/jenkins/test/dist;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
}
Copy the code

Create a folder to store the code path addresses for the packaged deployment, as shown below:

Now you can test the one-click publishing feature. First change the local project code, git submits the update, as shown below:

The code has been published to the remote server through Jenkins tool, you can visit the project address to see the effect, as shown in the picture below:

At this point, the front – end automated build deployment release is complete. It’s too long to cover a lot of points, but I’ll briefly cover the differences in github’s build configuration, as well as some tips and tricks.

Github establishes projects and configures them

To generate the secret text

Secret Text is called token on Github, Go to Github -> Settings -> Developer Settings -> Personal Access Tokens -> Generate new Token

Fill in the name of your token, check the following two boxes, and then press the Generate Token button to confirm. Save your token.

Set the lot webhooks

Next, create a Github project repository, upload the local project code to the Github repository, go to the github project specified -> Settings -> Webhooks -> Add Webhook -> Enter Jenkins server IP

Payload URL http://your IP :port/github-webhook/

Configuration is making the Plugin

Github Plugin has been installed for Jenkins. Go to System Administration > System Settings > Github > Add Github server

Click Add on the Credentials and select Secret Text, as shown below:

After clicking the Add button, select the credential you have added from the drop-down list, and then click the Connection Test button. When the information on the Credentials Verified for user XXX, Rate Limit: XXX is displayed, the Credentials are valid.

General Settings

Source code management

Click Add credentials, as shown in the picture below:

Build trigger

Other module operations are the same as Gogs configurations, which are not covered here.

Leak fill a vacancy

Code the rollback

There are two rollback modes:

  • Roll back and forth with Git
  • You can select backup files to roll back

I chose the first simple and crude method, which is to commit the local code to git repository and tag it with the following command:

git commit -a -m "Lazy code farmer"
git push origin master
git tag -a v1. 0. 0 -m "Explanatory Version number"
git push origin v1. 0. 0

// View the commit ID
git log --pretty=oneline --abbrev-commit
// Delete the tag version
git tag -d v1. 0. 0
Copy the code

The effect is shown below:

Go to Task name -> Configure -> Gogs Webhook -> Select Parameterized Build process -> Add Parameters (select Git parameter Configuration) -> Save

In addition to the release version, the rollback version is already configured, perfect.

The workspace

There are two ways to modify the default workspace: global configuration and local configuration

Partial modification, directly enter a work task interface, click the advanced button at the lower right corner of Gogs Webhook, check the custom workspace, as shown below:

Global modification, I choose this way, considering that many projects will occupy the capacity of DISK C, so the global location change, as shown in the picture below:

Email notification

In the Jenkins configuration above, the Email Extension Plugin has been installed in the plug-in management. Go to System Management -> System Configuration, as shown below:

Note The SMTP authentication password in the email notification is the authorization code, not the email password. Method of obtaining authorization code for QQ Mailbox (QQ Mailbox setup page -> Account Security -> Click generate authorization Code)

Enter the gogs-Test task configuration interface, click “Operation after Build”, as shown below:

After one-click deployment, view the console interface, as shown below:

At this point, the mail notification configuration is complete and you can check to see if the build deployment is successful at any time.

conclusion

Due to the length of space, I will write here, in fact, there are a lot of details not covered, and the installation and deployment of Jenkins in the Linux system to build an automation platform and so on. And how to implement the automatic deployment of our company, such as our company really implement the implementation of a period of time, and then share a experience. Each original is the author of the heart, if you feel that this article is also good, or to you have a drop of help, please praise to encourage, thank you.

In addition, if there is a bad place to write this article, welcome criticism and correction. I would like to communicate and discuss with you, learn and make progress together.

Pay attention to the public number [lazy code farmers], get more project actual combat experience and a variety of source resources. If you also love technology and are obsessed with it, please add us to wechat [LazyCode520], and we will invite you to join our front-end combat communication group to create bugs and program for happiness ~ 🦄