preface

In actual development, different compilation modes and project configurations (for example, requested domain names, compression methods, etc.) will be selected depending on the environment. By the time the project was in beta, it was easy to ship three or four times a day. When we are thinking clearly and highly focused, we are suddenly interrupted: XXX, help me make a package and send a version. If you come three or four times a day, in this situation, you have to compose a poem: I have a sentence oh my God, I don’t know whether to say it or not… After all, we all know that it takes time and effort to get in the mood, and if the flow of ideas becomes complicated, it’s not a simple “oh my God” response.

The biggest advantage of deploying Jenkins in the work is that the code is deployed in the development and test environment every time, and only the relevant developers and testers need to log in Jenkins to build the tag or branch that needs to be deployed, which reduces repetitive labor and improves work efficiency.

The local operating environment is macOS and the server is Aliyun Centos7.

Content scope: Jenkins, Nginx, Vue, Github

1. Configure the Java environment

I choose to install JDK in the tar.gz package, download the package to the local PC, decompress it, and then upload it to the server through the command line interface.

According to their own needs to download the corresponding JDK (official website), I downloaded the JDK version is: JDK-8U241-linux-x64.tar.gz

Upload the file to the server and check whether the file is successfully uploaded to the target directory.

Scp-vrc source [email protected]:targetCopy the code

Go to the opt directory and decompress the package

tar -zxvf jdk-8u241-linux-x64.tar.gz
Copy the code

Configuring environment Variables

Vim ~/.bash_profile # add the following PATH according to your configuration, Target + '/bin:$PATH' PATH="/opt/jdk1.8.0_231/bin:$PATH" # save and update Echo $PATH # run the Java command to print the JDK version informationCopy the code

Centos7 install Jenkins

Check out the Jenkins stable version

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

Download the dependent

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

Import the secret key

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

Install Jenkins

yum install jenkins
Copy the code

Change Jenkins user to root, port number (default 8080)

vim /etc/sysconfig/jenkins
Copy the code

Configure Jenkins’ Java path

vim /etc/init.d/jenkins
Copy the code

To start Jenkins, visit http://IP:8080, as shown below.

Service # Stop Jenkins systemctl stop Jenkins. Service # Stop Jenkins systemctl enable Jenkins. Service # Check Jenkins' status systemctl status Jenkins. ServiceCopy the code

Add: Jenkins default port is 8080, make sure server port 8080 is turned on. If it still fails, check to see if the firewall is blocking access.

After opening the page, copy the password in the red prompt file to unlock Jenkins.

The next step is to customize Jenkins. The plug-in extends Jenkins with additional features to meet different needs. I chose to install the recommended plug-in.

Once the installation is complete, create an admin user and save the instance configuration to enter the Jenkins console.

At this point, our Jenkins is basically installed.

Get Personal Access tokens on Github

Log in to Github, click on your profile picture and select Settings. Select Developer Settings at the bottom of the list on the left.

After selecting Personal Access Tokens, click Generate New Token to configure.

Click Generate Tokens to Generate Personal Access tokens

If the token is not saved or the configuration needs to be modified, click the green area in the following figure for modification. Each time the generation needs to be modified in the corresponding position of Jenkins configuration.

Create a task

Go to Jenkins Workbench – System Administration, locate the GitHub Server, and add “GitHub Server”.

Click add and select “Secret Text” for “Personal Access Tokens” just generated on Github. Description Fill in according to your personal understanding ~ Click Add.

Select the newly added credentials and click the connect test button. If the text on the left of the button appears as shown below, the configuration is successful. Click on the bottom to save the operation.

1. Create a task

Click On the left side of the New task, enter the task name and select “Build a Free style software project”, click OK.

2. General

This section is set up according to your needs.

3. Source code management

Click to add the github account name and password for the project.

4. Build triggers

Select GitHub Hook Trigger for GITScm polling.

5. Build the environment

Select Use secret text(s) or file(s).

6. The binding

Click Add and select “Secret Text”. Select Personal Access Tokens configured previously.

7. Build

Dist /dist/* NPM run build # delete all files in /root/hexh/vue-demo/dist -rf /root/hexh/vue-demo/dist/* # Copy the contents of the dist file compiled in the workspace to the "/root/vue-demo /dist" directory cp -rf./dist/* /root/hexh/vue-demo/distCopy the code

5. Configure github webhook address

Webhook is the requested address to notify Jenkins, so that after developers push code to Github, Github can use this address to notify Jenkins that the project needs to be deployed.

Go to the project for this build, on the project homepage click Settings in the upper right corner, then click Webhooks on the left, and then click Add Webhook. As shown below:

Suppose the Jenkins login address is: XXX.XXX.xxx. XXX :8080

Then webhook address is: XXX. XXX. XXX. XXX: 8080 / lot – webh…

Click Add Webhook to complete the addition.

Six, test,

Any code to modify the project used in the build was pushed to Github and Jenkins executed the build.

You can see that Github has just “notified” Jenkins where Webhook was configured.

You can see the build history on the left side of Jenkins workbench. Click the just executed Build history and view the console output. You can see that the shell command is successfully executed.

/root/hexh/vue-demo/dist /root/hexh/vue-demo/dist

Seven, supplement

If the node version installed on the server is too early, the vUE project may fail to compile. Nodejs can be upgraded in the following ways.

# # delete nodejs yum remove nodejs NPM - y replace the source curl - silent - the location https://rpm.nodesource.com/setup_8.x | sudo bash - # yum install nodejs # yum install nodejsCopy the code

Configure nginx

For a detailed Nginx configuration and introduction, check out my other article, “Getting Started with Nginx Basics, Zero-to-one Practice.”

# # to install nginx yum install nginx start nginx systemctl start nginx. Service # stop nginx systemctl stop nginx. # service restart nginx systemctl restart nginx.serviceCopy the code

Access the external IP address of the server to see if the web page can be opened properly

# open nginx default configuration file, modify the default startup directory server vim/etc/nginx/conf. D/default. ConfCopy the code

Access the same IP address and you should be able to see the project we just deployed

Possible problems: After the modification, you must have the access permission to open the path using an external IP address. I’ve set the read and write permissions directly here.

chmod -R 777 /root
Copy the code

Install Jenkins on macOS using Homebrew

Jenkins Brew Services start Jenkins Brew Services stop Jenkins jenkinsCopy the code

Now we have achieved the entire process from development to automated deployment

Pass by each little elder sister little elder brother leave a praise bar, write a blog for the first time, in the article if have mistake or inadequacy place welcome everybody to point out, thank ~

This year saw the deepest feeling of a sentence: learn or not learn, age will only increase will not decrease. I hope this blog will be the beginning of 2020, and we will not waste our time together.