background

Some time ago, I talked with my roommate about the responsibilities of each position on the Internet, and then I talked about the testing position!

One student couldn’t help asking, “If we get a really big project and the development cycle is really long, does the testing team just wait for us to finish the development before testing? Well, wouldn’t that be fun to test?! “

I wondered, “Is one testing team connected to multiple development teams?”

With this question, I asked a big brother, he said to me: “rookie, know about automated deployment?”

This is where today’s article came from. I also looked up materials and watched relevant videos. By the way, my semi-finished graduation design has been automated deployment, I have to say, really sweet! After writing the code every day, I only need to initiate a local Git submission, and the rest of the package construction and code deployment are all automated by Jenkins, the hero of today. (My back-end interface has been written and deployed in a traditional way, so I mainly deployed my front-end project automatically.)

Traditional development model

code --> build --> test --> release --> opearte 
Copy the code

The obvious downside is that projects can’t be tested and deployed until developers have finished. Each post can not work synchronously, very uncoordinated! And once there is a bug on the line, we can only wait for the problem, and then go through such a process, which is very low efficiency!

Automated deployment

In fact, the simplest way to describe automated deployment: after I develop locally, I just need to push the code to a remote repository (such as github), and the server will automatically build the package and complete the deployment!

Deployment requirements

  • Develop completed or in-development front-end projects
  • Buy Ali cloud server, I in double eleven when a white piao!

Setting up the Server Environment

The installation of Jenkins

The remote connection

SSH root@ add your server IP address (for example, my own server: SSH [email protected]) and enter the password to successfully connect to the serverCopy the code

Install the DNF

CentOS8 is installed with DNF by default

dnf
Copy the code

CentOS7 uses yum, which can be used to install DNF

yum install dnf
Copy the code

Installing the Java Environment

Jenkins itself is Java dependent, so we need to install the Java environment first

DNF install java-1.8.0-openJDk.x86_64Copy the code

Install Jenkins

Since Jenkins itself is not in the software warehouse package of DNF, we need to connect Jenkins warehouse:

Execute command:

Wget - O/etc/yum. Repos. D/Jenkins. 'http://pkg.jenkins-ci.org/redhat-stable/jenkins.repoCopy the code

After downloading, we check it through ls command, and the installation is successful

jenkins.repo
Copy the code

But after may download is not installed in our specified folder: / etc/yum repos. D/Jenkins. Repo

We use the PWD command to check, my own situation is not installed in the specified folder, but in /root

So I need to move the file

CD /etc/yum.repos. D / # check whether Jenkins. Repo ls is availableCopy the code

Next step: Import the GPG key to make sure your software is legitimate

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

Edit the file/etc/yum. Repos. D/Jenkins. Repo

vi jenkins.repo
Copy the code

Enter the file and press I to enter edit mode

[Jenkins] name = Jenkins - stable baseurl = http://pkg.jenkins.io/redhat (delete this out more words - stable) gpgcheck = 1Copy the code

Click Esc, hold shift, press:, enter wq, save and exit

Finally, Jenkins was installed

dnf install jenkins
Copy the code

To start Jenkins’ service:

Systemctl start Jenkins # start systemctl status Jenkins # check the status systemctl enable Jenkins # Set the OS restart, Jenkins will automatically restartCopy the code

Jenkins uses port 8080 by default, so port 8080 is enabled in the server security group

Direct access IP address + port 8080,

View the password as prompted to log in

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

After a successful login, follow the prompts to install the recommended plug-ins

After the installation is successful, create an administrator user as prompted

Now that Jenkins has been installed successfully, we have created our own administrator account, and then we will install and configure the nginx reverse proxy server.

Nginx installation and configuration

Install nginx

dnf install nginx
Copy the code

Start the nginx

systemctl start nginx
systemctl status nginx
systemctl enable nginx
Copy the code

If you use your IP address in the browser, you will see the corresponding Nginx interface (default port is 80).

Actually access interface corresponding files for this time: / user/share/nginx/HTML/index. The HTML

We can place the project we want to deploy in a new folder under /root

Mail_project = mail_project = mail_project = mail_project = mail_project = mail_project = mail_project = mail_project = mail_project HTML vi index. HTML # Enter editing mode, you can edit as you likeCopy the code

The next thing we want to see in the browser is this index.html that we just created

At this point we need to change the default configuration of nginx

Configure nginx

Enter the command to edit the file

vi /etc/nginx/nginx.conf
Copy the code

Nginx configuration file, we need to modify, but in Linux environment editing text may not be very convenient, easy to modify the error, so the recommended method is: connect vscode to the remote server

Vscode configuration

Install plug-in: remote-SSH

And then connect

After the connection is successful, enter the file inside click open folder, the file opened at this time is the server file, you can do any modification

At this point, you can modify /root/mail_project/index.html

/etc/nginx/nginx.conf

Nginx users and default directories:

Configuring users:

Configure access directory:

Restart nginx after the configuration is complete

systemctl restart nginx
Copy the code

Then go back to the browser and see the page rendered by the HTML file we just wrote!

Now, we just need to package our project and put it in the mall_project to complete the deployment!

This is the traditional way of deployment, we are going to do automatic deployment this time, so next we are going to configure our project on the Jenkins we just installed!

Jenkins configuration

Local Project Push

The first thing we need to do is push our project to Github

  • Create a new repository and name it

  • Open git bash in your local project directory,

    • git init
    • Git remote add Specifies the remote address
    • git add .
    • Git commit -m
    • git push -u origin master

Jenkins user

We will access some folders in centos later. By default, Jenkins uses Jenkins as the user and may not have access permission, so we need to modify its user:

Change the file path to /etc/sysconfig/jenkins

And then you need to reboot Jenkins:

systemctl restart jenkins
Copy the code

Jenkins Project Configuration

Log into our Jenkins visualization in your browser and type in the IP address :8080

Click New Item

Then write a description of the project

Source management We chose Git

We don’t have Git on our server, so we need to install it

dnf install git
Copy the code

After the installation is successful, proceed to our source management authoring

We need to add, Jenkins

The user name is your Github account, and the password is a token, which can be generated on Github. It will not be expanded here.

After filling in add, you can choose your account!

Specify the branch and fill it in as the branch of your repository: **/master or /main

Build trigger

Here’s the trigger rule:

  • Timing characters from left to right are minute hour day month week
# Build every half hour OR check remote code branches every half hour with updates H/30 * * * * # Build every two hours OR check remote code branches every two hours, Build H H/2 * * * # build H 2 * * * # build H H 15 * * # work day, execute H 9 * * 1-5 at 9 am # 1,3,5, start from 8:30 to 19:30, Build every 4 hours 30 minutes H/30 8-20/4 * * 1,3,5Copy the code

Build environment

Node.js environment is not included in the build environment option at this point

We need to install it externally, save it

Click the Jenkins icon, go back to the main page, click System Management, then click Plug-in Management (probably in English)

Click on optional plug-ins, search for Node, check NodeJS, and click Download Now and Install After restart

After installation, restart Jenkins

Click System Administration, click Global Tool Configuration

Drag to the bottom, add NodeJS, select it and click Save

After returning to the home page, click on the project we just created, and then click Configure

The build is to execute the shell script we write

PWD node -v NPM -v NPM install NPM run build PWD echo 'build successfully' ls # Delete all contents in /root/mall_cms rm -rf /root/mall_project/* cp -rf ./dist/* /root/mall_project/Copy the code

Go back to the project page and click Build Now

Once the build has started, we can view the console output

Build success refresh our project page IP address /8080, successfully deployed!

The last

Through this process, the automatic deployment of our project was successfully realized. Of course, I also completed the automatic deployment of my graduation project, which was still under development. And every half hour, Jenkins would pull the code and package it for deployment.

We can happily develop locally and push the code to our Github repository at some point! Successfully get rid of the traditional way of manual deployment after development!!