preface

Another suffocating graduation project led me to embark on the road of tossing CI/CD.

In order to do the graduation project, the two cloud servers were directly reset as the experiment, during the reset several times, but also encountered some strange and strange problems, so I decided to write an article to record, also want to do something about the students to fill in the pit.

There seems to be no follow-up this time. I wrote this article in great detail until 3:00 in the morning. I want to have the guts to ask for a like, and your like is the biggest motivation for my productivity.

Check out “Hello FE” for more good tutorials that are easy to understand.

As we all know, we spend a small portion of our development time writing code. We spend more time designing, building, and deploying code.

Code design is very test code foundation, MY talent is shallow, will not explain this part.

Build and deploy is usually less complicated, but it can be quite tedious, especially if you build and deploy manually. Repeated operations, long process, very patience and energy consumption.

Careful students should notice that a new noun has appeared in the title: CI/CD.

In software engineering, CI/CD or CICD usually refers to the combined practice of continuous integration and continuous delivery or deployment. CI/CD Bridges the gap between development and operations teams by automating the build, test, and deployment of applications.

— quoted from Wikipedia

Continuous Integration (CI) refers to Continuous Integration, in which new changes to the project code are regularly built, tested, and merged into the code repository, effectively resolving code conflicts caused by developing multiple branches of the project at once.

CD (Continuous Delivery/Continuous Deployment) refers to Continuous Delivery/Continuous Deployment, where new changes to the project code can be automatically or manually merged into the main branch and the build, test process can be automatically executed once merged into the main branch. Check to see if new changes affect the main branch code. After the build test passes, it is automatically released and deployed to the production environment, effectively reducing the burden on the operation and maintenance team.

Concept said so much, a lot of students must be called straight don’t understand. That’s okay. Let’s find a real scenario.

I believe that many of the students must have had an idea: write a website on their own server.

The following steps are usually required to implement this idea:

Write code -> (unit test/integration test) -> Upload to repository -> Package build -> Upload to server -> Configure Nginx/Apache to map port 80 to the website folder

Is it a very long process?

Once we have the CI/CD system, we just need to write the code, and the rest of the steps are handled by the CI/CD system, which greatly frees our hands and improves the development efficiency.

JenkinsIntroduction to the

Jenkins is the open source CI&CD software leader, providing over 1000 plugins to support build, deploy, automate, and meet the needs of any project.

In short: Jenkins is a software that implements CI/CD in a plug-in way.

The early stage of the work

A clean physical machine, VM, or cloud server running CentOS 7+ is available.

Note: You are advised to perform subsequent operations inrootUser under, to avoid permission problems!

Install the pagoda panel

Pagoda panel is an easy to use server operation and maintenance software. It is recommended to use the panel to install various server software after installing the pagoda panel.

# Physical machine/virtual machine classmate directly in the terminal execution
# Cloud server students can remotely connect to the server after the terminal executionYum install wget - y && wget - O the sh http://download.bt.cn/install/install_6.0.sh && sh the shCopy the code

After the panel is installed, the terminal outputs the random entry of the panelURLAnd initialize the account password that can be setURLEnter the browser to access the login page.

If users who use the cloud server cannot access the panel after entering the URL into the browser, remember to access the management console of the cloud server manufacturer and permit port 8888.

The installationLNMP

LNMP actually refers to a set of server architecture for website operation: L (Linux), N (Nginx), M (MySQL), P (PHP).

Once inside the panel, the panel recommended that we install one of two server architectures: LNMP/LAMP, so we chose the LNMP on the left.

We may not use MySQL and PHP for the time being, but pagoda recommended that we install them, so we will install them first.

Once the installation is complete, we can start installing Jenkins.

The installationJenkins

First, let’s check to see if Java is installed on the machine.

Simply, if the terminal inputs Java and the output is not Command not found, our machine has Java installed.

I recommend using yum to reinstall:

yum install java
Copy the code

Next, install the download tool wget:

wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo
Copy the code

Then, import the download key:

rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key
Copy the code

Once the above steps are complete, we can start installing Jenkins:

yum install jenkins
Copy the code

During the installation process, there may be several prompts, so just enter yes or Y to release.

Start theJenkins

After a long wait, we can start Jenkins:

service jenkins start
Copy the code

Jenkins is running on port 8080 of the machine. If you are using the cloud server, remember to check the firewall port.

Initialize theJenkins

Enter http://< your server IP>:8080 in your browser to access the Jenkins unlock screen.

Initializing Jenkins requires a single command to view the password:

cat /var/lib/jenkins/secrets/initialAdminPassword
Copy the code

Copy the password output from the console to the Jenkins unlock screen. The plug-in installation screen is ready.

Installing a plug-in

We select the recommended plug-in on the left and wait for the plug-in to be installed.

If you have a plug-in that failed to install, just click retry. It usually takes several tries.

Of course, do not rule out more than a few times also not good, suggest reset the server again from the beginning.

If you don’t mind the trouble can also be a manual installation, plug-in download address: manual download address.

Create a user

Once you’re done, create an administrator account. Enter your favorite user name and password, and enter your full name and email address.

The installationNode.jsThe plug-in

Once you’ve created the user you’ll be able to go to the welcome page, we’ll go to manage Jenkins on the left, and then to Manage plug-ins.

On the Plugins management page we click the Optional Plugins Tab and type NodeJS in the search bar. Only one plugin will be hit and we will install it.

Wait until the installation is complete.

configurationNode.jsThe plug-in

Next we are going to configure Node.js. Click Manage Jenkins, find global Tool configuration, and go to the bottom to find the NodeJS configuration area.

Let’s click on new NodeJS, give it a name and a version, and suggest LTS version.

The installationPublish Over SSHThe plug-in

Once node.js is configured, go back to Plug-in management, search Publish Over SSH, and install.

configurationPublish Over SSHThe plug-in

After the installation, it is necessary to configure SSH. Click manage Jenkins, find system Configuration, configure SSH connection information of the cloud server, and click Test Configuration in the lower right corner to Test whether the connection is normal. If Success is displayed, the Configuration is correct.

The installationGitHub APIThe plug-in

We installed the GitHub API plugin as we did before.

configurationGitHub APIThe plug-in

Before configuration, we need to generate a Personal Access token on GitHub.

Click avatas-Settings in the upper right corner, find Developer Settings, then select Personal Access Tokens, click Generate New Token in the upper right corner, and check the corresponding content as shown in the picture.

Clicking Generate token will Generate a token. ** Note: The token will only be displayed once! The token will only be displayed once! The token will only be displayed once! ** A notepad is recommended.

Since we want the code to be automatically built and released when it is pushed to the repository, we must use Webhook, but we don’t need to create Webhook manually, the plug-in will do it for us automatically.

Now to continue with the plugin configuration, go to the System configuration, find the GitHub configuration section, click add GitHub server, click the add button to the right of the credential, select Jenkins.

Click, and a window will pop up to add credentials. Select Secret Text as the type. Copy the Personal Access token we just generated into the Secret column, and click Add.

After the addition, we selected Secret Text in the credential column, checked “Manage Hook”, and clicked “Connect Test”. If your GitHub user name is displayed correctly, the configuration is successful.

A new task

Now we can create a new task. Click New Task on the left side of the main screen, select Build a free style software project, and give the task a name.

We check the GitHub project and enter the project URL (which is the browser address of the project). Select Git for source management below and put the Clone address of the project you want to build and deploy in the Repository URL (i.e., the browser address of the project plus the.git suffix).

Note: If the repository is public, the Credentials column can be selected as none; If the repository is private, you need to add a repository that can access the repositoryGitHubThe method is similar to the configurationGitHub APIPlug-in, but select the username and password in the type column, and then enter the username and password below.

Then we checked GitHub hook trigger for GITScm Polling in the column of build trigger and Use secret Text (S) or File (S) in the column of build environment. In the credentials column, select the Secret Text we added earlier and select Provide Node & NPM bin/ Folder to PATH to Provide the Node.js environment for the build project.

Then we go to the build column, add the build step, select Execute shell, and type:

node -v
npm -v

rm -rf node_modules
npm install
npm run test
npm run build
Copy the code

Note: There is one in the commandnpm run testYou don’t need to add the command, but if you’re writing a test case for a project, you need to add the command to test that the code is functioning properly.

Last step, click Add Build Artifacts, select Send Build Artifacts over SSH, and upload the code to the server using SSH.

Finally, click Save, the configuration is complete ~

Build immediately

After configuring the new task, we click on the immediate Build on the left, and we see an additional record named #1 in Build History at the bottom left.

Click #1 and select the console output on the left to see all the console output from our packaging build.

Then we can check the results on our own website! I deployed the React Demo.

testWebhook

Since we want to automate the build deployment, we need to automate it every time the code is pushed to the remote repository, so we need to test if the Webhook works and triggers the build deployment.

Back to Jenkins at this point, you’ll be surprised to see that there’s a build going on!

And we’re done!

conclusion

So I’m learning what to do in advance? After all, the entry after graduation will also involve the construction and configuration of the relevant platform.

It took Jenkins a whole day, resetting the server with all sorts of problems, and finally he trod through all the potholes and got through all at once.

It took a day and a half to write this article. There are so many pictures in the article, and the screenshots have been uploaded all the time. It’s hard to QAQ

I don’t know if my server performance is not good enough, sometimes Jenkins service will crash in the middle of the build, occasionally.

If conditions permit, we still suggest a high performance server. If it is a student party, we can consider putting Jenkins service on another clean server.

Follow “Hello FE” for more tutorials.