Jenkins Giao get up!

What the hell is Jenkins

It’s time for Jenkins to finally get here.

The use of Jenkins

Ok, then let’s go to Giao.

docker run \
  --rm \
  -u root \
  -p 8080:8080 \
  -v jenkins-data:/var/jenkins_home \ 
  -v /var/run/docker.sock:/var/run/docker.sock \
  -v "$HOME":/home \ 
  jenkinsci/blueocean
Copy the code

-v "$HOME":/home
Copy the code

Configuration Jenkins

At this point we can configure Jenkins by visiting http://ip address :8080.

2. Fill in the password on the page to unlock

3. Click continue to continue

Write Jenkinsfile

Ok, the next step is to create the task and execute it, so let’s stop here and do another thing, which is to create a Jenkinsfile in the local Web project (note, no suffix), Gulpfile. js in gulp and webpack.config.js in webpack.

pipeline {
	#Here is the dependency image, because our code needs to be packaged on the server, so we need the Node environment
	#Configure the docker to start a node container (if no node:8.16.1-alpine image is pulled automatically when started, don't worry)Agent {docker {image 'node:8.16.1-alpine' args '-p 300:3000 '} Environment {CI = 'true'} Stages ('Build') {# steps stands for steps. A stage can have multiple steps. Each sh is followed by the code that this step executes. # One step can also set multiple sh steps. # Use YARN because NPM is too slow. Yarn does not need to be downloaded separately. Node-sass = node-sass; node-sass = node-sass; Or even yarn # download up is also a thief slowly and then packaged mission sh "' yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass - g yarn yarn build ''' } }		#There should be more when I'm donetestForget it. Keep it simpleEmpty the /home/nginx/ WWW /react-mixture directory. Because we are start Jenkins # container configuration, Jenkins access/home is on a visit to $home (# is ~, namely/root) and then put the packaging of the build all the files in the folder to throw the past (vue - cli after packaging should be the dist directory). The nginx server can access these files, Steps {sh "" rm -rf /home/nginx/ WWW /react-mixture/* mv./build/* /home/nginx/ WWW /react-mixture" "}}}}Copy the code

Isn’t this very, very easy to configure, hahaha, and then commit the code to the Github repository.

But don’t get too excited, my Beggar version server will almost certainly fail to run YARN Build. I have no choice but to pack the code locally and submit it to Github. Jenkins will help me move the code directly to Nginx. If your server is ok, you can install the above version. Please refer to the following Jenkinsfile for beggar version like mine:

pipeline {
	#Node containers are no longer neededAgent any environment {CI = 'true'} # Stages {stage('Build') {steps {sh ''}} stage('Deliver') {steps {sh '' rm -rf /home/nginx/www/react-mixture/* mv ./build/* /home/nginx/www/react-mixture ''' } } } }Copy the code

Ok, once the Jenkinsfile is ready, you can create a task in Jenkins, step by step.

Create Jenkins task flow

Task flow is the basic unit in Jenkins, let’s do it step by step:

1. Select Create Task from the navigation tree on Jenkins’ home page

2. Fill in the task name and select Pipeline.

3. Configure task information

Enter the blue ocean and become one Piece king!

After the task is established, it will automatically jump to the details page of the task (you can also click the task to enter details from the task list), and then choose to operate in BlueOcean (mainly because of the beautiful UI).

Then, the operation of each task can be viewed in the table below. Click on the details and you can also see the specific situation of this operation.

If it fails, check where it failed and then come back. If it succeeds, then it is ok, this automatic deployment is over. It is very easy to note that the remote connection is always broken, and Jenkins still crashes.

Webhook hooks

Ok, if we want the code to automatically execute every push, we need to do something else.

Let’s first go to the Jenkins home page to find the system Settings:

Then go to Github, click advanced Settings and check “Specify another Hook URL for Github”. Just leave the URL below unchanged and save it.

Then go to the Github repository, enter the Settings screen, select webhook, and click Add Webhook to add a hook:

Then do some configuration on the hook, fill in the URL, select the action that triggers the hook, etc. :

After this configuration is complete, when we push the corresponding branch, Jenkins will automatically execute the task we have configured for automatic deployment.

---

After the language

It is certainly not easy to proceed here, I just pointed out a “relatively simple” direct route, but the specific knowledge of automated deployment still needs to be explored and learned by ourselves. If you encounter problems, don’t panic, solve them bit by bit, well, that’s all!

ば ば with her husband s teeth!