“This is the sixth day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

A brief introduction to Jenkins

Official note:

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 for continuous integration of software projects.

Official website address:

www.jenkins.io/index.html

In a word:

With Jenkins, one-click deployment is possible.

Jenkins pulls the code from SVN > deploy to the server of the release project > and starts the service. Instead of manually running buil package > Upload to server > restart service.

2. Install Jenkins

Jenkins has been installed on the server at the back end. I won’t go into the details of the installation process.

Install plugins (nodejs)

  • The Publish over SSH plug-in is required because SSH packages need to be uploaded to the server.
  • Because the front end is packaged with Node.js, the NodeJS plug-in is required.
  • The former, the background has been installed, and will not be described here, mainly explaining the nodeJS plug-in installation process.

1. Install nodeJS

Go to Manage Jenkins > Manage Plugins

In the optional plugin TAB, search for NodeJS and click the Install button.

It is installed here, so it cannot be searched.

After the installation is complete, you can search for it in installed.

2. Configure nodeJS

Go to Manage Jenkins > Global Tool Configuration

Scroll down to nodeJS.

Click the NodeJS install button.

Enter an alias for subsequent configuration and packaging. Select the nodeJS version and click Apply.

4. Configure the server

Configure the server to be used for project publishing.

Go to Manage Jenkins > Configure System.

If you go to SSH Servers, you do not need to add the added server. If you do not add a server, you can add one.

Click the Add button.

Enter the server IP address and the user who logs in to the server, click Advanced, and enter the user password of the server.

After entering the password, you can click the Test button to test the server connectivity and verify the configuration.

After the connection is successful, click the Apply button.

5. Configuration items

On the TAB page, select HTML and click on the left to create a new Item.

Enter a task name. The recommended name is Server IP address – Service Description.

Select the first Freestyle Project and click OK.

Configure the project in turn:

  • General: Indicates General information. This parameter is not important.
  • Source code management: Since our project uses SVN for code version management, we choose Subversion, configure the SVN address of the project, and add a user connected to SVN. Jenkins will use this user to pull the code from the SVN address.

  • Build the environment: Select Provide Node & NPM bin/ Folder to PATH and select the previously configured NodeJS.

Construction:

1. Click Add Build step and select Execute Shell.

That is, what commands need to be executed after Jenkins pulls the code from SVN to package and compress it.

Input script:

NPM install # because there is no submission so need to install node_modules NPM run the build # NPM command packaging project find. / dist -type d - the name "SVN" | xargs rm - rf # Rm -rf dist. Tar. gz # Delete the previous dist package tar -zcvf dist. Tar. gz dist # Compress the new dist packageCopy the code

2. Click Add Build step again and select Send Files or Execute Commands over SSH.

Select the configured server to publish.

Source files Enter the name of the package to be uploaded.

Remote directory Enter the location on the server to upload to.

Exec Command Indicates the script to be executed after the upload, including backup and startup.

Input script:

CD /usr/local/nginx/html # make sure to go to mv dist dist. '(date +%Y%m%d_%H:% m)' # back up previous dist. Current date_time: tar -zxvf dist. Tar. gz # Rm -rf dist. /sbin./nginx -s stop # Forcibly stop nginx./nginx # start nginxCopy the code

Click Apply and the project is created.

Six, one-click deployment project

Click Dashboard in the upper left corner to return to the home screen.

Click the HTML TAB, select the project to publish, and click the Run button.

The build execution status in the lower left corner shows the project being released. Click there to view the execution status, deployment failure, and locate the problem according to the log.

After completing the above configuration, Jenkins could just click the “run” button of the project and pull down the latest code for deployment. Later, Jenkins could also carry out automatic and timed deployment and other configurations to explore by himself.

Note: You need to submit the code to SVN because Jenkins pulled the code from SVN. If you don’t want to submit it locally, you can manually deploy it yourself.

Seven, attached to create pipeline type project

As you can see, you can create a Freestyle Project. The next section explains how to create a Pipeline project.

First look at the difference between Pipeline projects, built after the long is not the same, each component, each step listed more clearly, as for how to create steps as follows.

1. On the corresponding TAB page, click create Item on the left.

2. Enter a task name (recommended name: Server IP address – Service Description).

Select the third Pipeline and click OK.

3. Enter a description

This project is parameterized, which can be unchecked. The parameter of Boolean type is checked and selected, and a parameter name of “Prevent multiple startup” is randomly entered. The purpose is that the page will not jump when you click the “Start” button after creation, and it is easy to click it repeatedly. A second click to start building is required to officially launch the project. The parameter has no practical meaning, just to prevent multiple clicks to start.

4. Enter the script

Attached scripts and instructions :(modify the corresponding projects separately, thanks for the script template provided by boss Lin)

SVN_ID = "" // SVN user credentials (Manage Jenkins > Manage Jenkins The Credentials on the remote deployment server are as follows: t_ssh = "" // The remote deployment folder directory micro_name = "" // } stages {stage(' get code ') {steps {echo "start fetch code from ${REPOSITORY}" // deleteDir() checkout([$class: 'SubversionSCM', additionalCredentials: [], excludedCommitMessages: '', excludedRegions: '', excludedRevprop: '', excludedUsers: '', filterChangelog: false, ignoreDirPropChanges: false, includedRegions: '', locations: [[ cancelProcessOnExternalsFail: true, credentialsId: SVN_ID, depthOption: 'infinity', ignoreExternalsOption: true, local: '.', remote: REPOSITORY ]], quietOperation: true, workspaceUpdater: [$class: 'UpdateUpdater']])}} stage(' build code ') {steps {echo "start package" sh "" CD ${WORKSPACE} sed -i 's/\\("microServe": "\\).*/\\IP"/g' public / static / microConfig.json npm install sleep 1s npm run build find ./dist -type d -name "SVN" | xargs rm - rf rm -f dist., tar, gz tar - ZCVF dist., tar. Gz dist ""}}" stage (' copying files') {steps {/ package/upload script is necessary to modify sh "" "  echo "start copy file" scp dist.tar.gz ${ t_ssh }: ${ t_dir } ssh ${ t_ssh } " cd ${ t_dir }; mv ${ t_dir } /dist ${t_dir}/dist.`(date +%Y%m%d_%H:%M)`; tar - zxvf dist.tar.gz; Rm -rf dist. Tar. gz """"}} stage(' deploy ') {steps {// Start package scripts modify sh """ echo "start deploy" SSH ${t_ssh} 'docker Restart ${micro_name}' """}}} POST {always {echo 'Build complete... '} success {echo 'congratulations!! '} failure {echo 'sorry, build failed!! '} unstable {echo 'This task has been marked as unstable.... ' } changed { echo '' } } }Copy the code

Other notes:

A, / / deleteDir ()

Delete all files in the folder where Jenkins pulled the package. After testing, it is unnecessary to delete. Jenkins updates files from SVN, and the deleted files will be deleted, and the DIST folder will also be deleted when NPM packages.

The advantage of commenting out all files is that packages inside node_moudules are not deleted, which makes NPM install much faster.

B, NPM install

If packages for private libraries are involved, simply follow the private library address.

For example: NPM install –registry http://IP:4873

C, sed -i command is the main application of the micro front-end needs to write the service address of the Akiko application, but different projects have different service address, so this method is used to dynamically write.

The regular expression matches and replaces the microServe IP address in the file. Note that this step needs to be performed before the NPM Run build is packaged.

sed -i 's/\\("microServe": "\\).*/\\IP"/g' public/static/microConfig.json
Copy the code

D. The size of Dist automatically packaged by Jenkins is twice that of local manual NPM run build

After checking, it is found that only the outermost layer of the code pulled from SVN has a. SVN file, and there is no. SVN file in DIST after NPM run build is packaged.

In Jenkins’ workspace, the code pulled from SVN was found in many places. SVN files were also found in many places in Dist after automatic packaging through the command line.

As a result, Jenkins automatically packaged dist twice as large as the native manual NPM run build.

The solution is as follows:

  • ① Configure Jenkins to ignore the. SVN file when pulling codes from the SVN
  • ② Ignore the. SVN file when configuring NPM packaging
  • ③ Delete all. SVN files in dist through the command line

Since the first two methods failed, the last method was used, simply adding the following command:

find ./dist -type d -name ".svn"|xargs rm -rf
Copy the code

5. Click Apply to complete the creation.

Go back to the TAB TAB of the first step, click the Start button, and then click the “Start Building” button to complete the one-click release of the project.

Reference Documents:

Liubing. Me/Jenkins – vue… www.jianshu.com/p/93238a7ad…