The front-end project of this article takes VUE as an example (in fact, the operation method of front-end engineering project is the same), which is deployed on Linux system (centos).

Before doing front-end project deployment, has been manually run packaging command, packaging. Then use FTP, Xshell and other tools to upload to the server. This method is not only inefficient, but also prone to error, accidentally misplaced. Or the company has operation and maintenance, just need to package the front-end project code and send it to operation and maintenance, but the general small company does not have operation and maintenance. So, I was looking for something that would automatically do that for me, and I found this guy, Jenkins. With the use of more and more, more and more satisfactory, this little old man is also more and more see more pleasing to the eye!!

The main purpose of this article is to realize the pastgithub pushCode or merge code into a projectmasterOr some other branch,jenkinsAutomatically deploy the code to the corresponding server.

I. Jenkins installation and configuration

Jenkins is an open source software project. It is a Continuous integration tool developed based on Java for monitoring continuous repetitive work. It aims to provide an open and easy to use software platform to make continuous integration of software possible. (From Baidu Baike)

1. Java environment construction

Since it relies on the Java environment, you must install the Java environment first, otherwise an error will be reported when starting the Jenkins service. Run the following command to install JDK in one step. You are advised to install version 1.8 or later

Yum install Java -- 1.8.0 comes with itsCopy the code

2. Install the Jenkins

I usually use Yum to install software. Since Jenkins does not exist in the yum repos repo by default, you need to add the Jenkins library to yum Repos by executing the following commands:

cd /etc/yum.repos.d/
wget http://pkg.jenkins.io/redhat/jenkins.repo
rpm --import http://pkg.jenkins.io/redhat/jenkins.io.key
yum install -y jenkins
Copy the code

Grant Jenkins read and write permission to the root directory of the website. The root directory of my website is /usr/share/nginx/ HXKJ

chown -R jenkins.jenkins /usr/share/nginx/hxkj
Copy the code

Start the Jenkins

service jenkins start
Copy the code

Because Jenkins uses port 8080 by default, if you use a cloud server, you need to open port 8080 in the security group (if you don’t want to use port 8080 or the port is occupied, you can change the default port in the Jenkins configuration file).

3. Initial use of Jenkins

3.1. Enter in the browserhttp://server IP address :8080Open thejenkinsTo open it for the first time, the administrator’s password is required, as shown in the figure below:

Enter the following command to find the password on the server as prompted :(the path following the cat command is the text marked in red on the page. The password may vary from person to person.)

cat /var/lib/jenkins/secrets/initalAdminPassword
Copy the code
3.2. Install the default plug-in: Enter the password, the plug-in installation page will jump to after submission, select the first one and then install, as shown in the figure:

This step, don’t do anything, take your time…

After the default plug-in is installed, create an administrator account and log in after the configuration is completeJenkins 了

3.3. Install NodeJs plug-in for vUE project package construction.

Open theSystem management= >Management plug-insearchNodeJsThen check install openSystem management= >Global Tool ConfigurationDrag to the bottom to configure the Node version, as shown:

4. Configure the automatic deployment task

4.1. Create a Task: ClickA new task= >Enter the task name, the choice ofBuild a free-style software projectAnd then determine

4.2. Configure GitTask allocation, the choice ofSource code managementBecause my project is open source, there is no need to fill in the account password

4.3. Set the build environment and selectProvide Node & npm bin/ folder to PATHThen select the version of Node you configured when you installed the plug-in

4.4 Configure automatic packaging of items, selectAdding build steps= >Excute shellThis is to run the related sh command (this step is recommended for time-consuming operation separation step)

All commands

CD/var/lib/Jenkins/workspace/HXKJ # into Jenkins work space HXKJ project directory under the node - v # detection node version (this command is not necessary) NPM - v # test NPM version NPM (this command is not necessary) Config set registry https://registry.npm.taobao.org # set NPM source to taobao source (this) you understand NPM config get registry # test for a switch NPM success (this command is not necessary) CD dist rm -rf hxkj.tar.gz: Dist rm -rf hxkj.tar.gz: Dist rm -rf hxkj.tar.gz: Dist rm -rf hxkj.tar.gz: Dist rm -rf hxkj.tar.gz: dist rm -rf Tar-zcvf hxkj.tar.gz * # Package the generated project into a compressed package, Convenient to move to project deployment directory CD/usr/share/nginx/HXKJ # into the root directory of the web project mv/var/lib/Jenkins/workspace/HXKJ/dist/HXKJ tar. Gz. / Gz -c dist/ # Unpack the project to dist rm -rf hxKj.tar. gzCopy the code

The steps are separated as shown below

4.5. Save and clickBuild immediatelyTo see if the task can be built successfully,Console outputMenu to view the build log.

Now that the Jenkins build has been configured, it’s time to work with Github to complete the operation.

2. GitHub+Jenkins linkage configuration

1. Create github AccessToken

Enter thegithubSettings page, selectDeveloper settings

choosePersonal access tokens= >Generate new Generate

Check the following configuration and clickGenerate Generate Make sure you keep thistokenOh, it only shows once.

2. Jenkins added the Github plugin

Open theSystem management= >Management plug-insearchGithub PluginAnd I’m gonna go ahead and install

Then enter theSystem management= >System Settings= >Github ServerAdd information

The credentialsClick there againaddAdd the following information

Remember to select the credential information we just added

Finally clickConnect the testIf the following information is displayed, the configuration is correct

Git push test

Git push operations are not shown here

When completepushAfter the operation, go back toJenkinsOn the admin page, you can see that a new record has been added to the build queue.Also, if you look at the build log, it says success!!

At last, you can leave a message if you don’t understand.

Reprint please indicate the source: www.jianshu.com/p/4c4f92209…

Personal space: HXKJ.VIP