Automatic construction and deployment of Jenkins + Vue project

Time:2020-9-25

Jenkins

Update address: https://sunseekerx.yoouu.cn/common/jenkins.html

Update time: 2020-05-05 20:39:33

Automatic construction of Vue project

JenkinsInstallation viewDockerChapter.

JenkinsThe first time the installation is completed, it is better to restart it, because if the language pack is installed, some places are still in English. It should be a bug.

premise

  • VueProject+Git
  • YesJenkinsEnvironmental Science
  • Server with deployment project
  • domain name
  • Linux knowledge

target

Write the code locally, once it is submitted toGit, throughweb-hook, triggerJenkinsThe automatic build task of,JenkinsAutomatically fromGitPull code > install dependency > package > send to deployed server.

In short, I write the code locally, and I submit it toGitAfter that, there’s something that helps me package and send it to the server. I don’t have to deal with these things. I just write code, test, push code and it’s all done.

At present, we need to realize this function, butJenkinsThere’s more to it than that. But it’s enough for my current project.

realization

Install SSH send plug-in-Publish Over SSH

See the name, know the meaning, passsshRelease, used to package the projectsshConnect to the deployed server and execute other commands.

  1. Select system management
  2. Select plug-in management
  3. Page directctrl+fsearchssh, direct installationPublish Over SSHPlug in (don’t use the built-in filter to search useless)

Automatic construction and deployment of Jenkins + Vue project

0x2 configurationsshplug-in unit

The deployment website server to be configured here is password login, or configure key file login. It depends on what you like.

  1. Select system management
  2. Select system configuration
  3. Pull to the back to find itPublish over SSH
  4. newly addedSSH - Server
  5. nameThat identifies the server
  6. HostnameServer’sIP
  7. UsernameFill in the user of the server
  8. Click on advanced settings
  9. CheckUse password authentication, or use a different key
  10. PassphraseFill in the password
  11. ClickTest ConfigurationTest whether the connection is successful

Automatic construction and deployment of Jenkins + Vue project

Installationnodejsplug-in unit

  1. installnodejsPlug in(JenkinsIt doesn’t seem to be possible to use external ones at the momentnodejs

    This plug-in is used to package Vue projects and execute them locallyyarn buildIt doesn’t make any difference.

    1. Select system management
    2. Select plug-in management
    3. Page directctrl+fsearchnodejs, direct installationnodejsPlug in (don’t use the built-in filter to search useless)
    4. installation is complete
    5. Select system management
    6. Select global tool configuration
    7. Select new nodejs

      1. aliasnode 12.16.3
      2. Check auto install
      3. Version selection12.16.3This is the current stable, long-term support version
      4. preservation

Automatic construction and deployment of Jenkins + Vue project

New project configuration

0x1 New projectChoose a free style project

0x2 enter name

Automatic construction and deployment of Jenkins + Vue project

Source management select your project’sGit

My document project access is public and can be accessed directly. If it is a private project, you need to configure an accessible account. It’s down hereCredentialsOptions.

Automatic construction and deployment of Jenkins + Vue project

0x4 build trigger

CheckGitHub hook trigger for GITScm pollingThis is that once we push the code, the build will be triggered.

0x5 build environment

CheckProvide Node & npm bin/ folder to PATH, this is to provideNodeOrders for us to use.

Automatic construction and deployment of Jenkins + Vue project

0x6 add build steps-Execute shell

Automatic construction and deployment of Jenkins + Vue project

Execute shell content

Because of the internalnodeThe environment is isolated from the outside, so we need to install it the first time we use ityarnAnd set up some domestic sources.

In this step, we install the dependency and package the project, and compress the packaged project to be sent to the deployed server.

#Enter the hxkj project directory in Jenkins workspace
cd /var/jenkins_home/workspace/sunseekerx

#The following command only needs to be executed once and can be deleted later
###
#Switch NPM to Taobao source
npm config set registry http://registry.npm.taobao.org/
#Install yarn
npm i yarn -g
#Switch from yarn to taobaoyuan
yarn config set registry https://registry.npm.taobao.org
###

#Installing dependencies in a project
yarn
#Packing
yarn build
#Enter the directory where the package file is generated
cd docs/.vuepress/dist
#Package the generated project into a compressed package, which is convenient to move to the project deployment directory
tar -zcvf sunseekerx.tar.gz *

After execution, it will be generated on the serversunseekerx.tar.gzThe next step is to send this file to the server for the specified deployment. Unzip.

Automatic construction and deployment of Jenkins + Vue project

0x7 add steps after build

This step sends the file packaged in the previous step to the server and decompresses it.

cd /www/wwwroot/sunseekerx.yoouu.cn
\Echo "> > > current working path:" PWD`
\shopt -s extglob
\Echo "> > > delete: (. Htaccess | user.ini A kind of sunseekerx.tar.gz )Other documents“
\rm -rf !(.htaccess|.user.ini|sunseekerx.tar.gz)
\Echo "> > > decompression: sunseekerx.tar.gz "
\tar -zxvf sunseekerx.tar.gz -C ./
\Echo "> > > remove: sunseekerx.tar.gz "
\rm -rf sunseekerx.tar.gz
\Echo "> > > execution successful"

Automatic construction and deployment of Jenkins + Vue project

0x8 test build

You can see that the server has the built file

Automatic construction and deployment of Jenkins + Vue project

Try visiting the website, nice

Automatic construction and deployment of Jenkins + Vue project

0x10 git settingsWebhooks

Premise isGitNeed access to yourJenkinsOnce the code is submitted,GitI’ll ask you for this address, and thenJenkinsTrigger build action.

In short, I submit the code to tell youGitGittellJenkinsIt’s time for you to build. It’s overJenkinsTo build.GitIt’s like a warehouse keeper,JenkinsIt’s a coolie.

Automatic construction and deployment of Jenkins + Vue project

0x10 commit build under test

Modify some documents locally, submit them and check them laterJenkinsThe waiting task is the submitted task

Automatic construction and deployment of Jenkins + Vue project

visit https://sunseekerx.yoouu.cn/ Try it. The update is successful

Automatic construction and deployment of Jenkins + Vue project