This article uses the GitHub project as an example to hook up the branch code merge and complete the package distribution.

⚠️⚠️⚠️ Multigraph Warning: for non-combatants, please be nervous and look down at ⚠️⚠️⚠️

preface

In the previous article, er and Jenkins built the sustainable integration environment. We have built the sustainable integration environment.

Let’s start using this environment for our own or company’s front-end projects.

The target

  • Monitor GitHub project branch code changes and automatically perform packaging
  • Upload the packaged code to the specified server
  • Restart the Node service on the server to complete publishing (if Node service exists)

Main process:

  1. Configure the server environment 1.jpg
  2. Configuring Jenkins Environment
  3. Test Project Preparation
  4. Configuration making Hook
  5. A new task
  6. test

software

Server environment software

  • NVM: Node version management software, used to manage different versions of nodes.
  • Node: v11.12.0 base environment, not introduced.
  • Pm2: Node service daemon management tool.

Jenkins plug-in

  • GitHub Plugin: A necessary plugin for GitHub integration
  • NodeJS Plugin: The Node project packages the necessary plug-ins
  • Publish Over SSH: a necessary plug-in to operate the server Over SSH

Set up the project server environment

⚠️ Note: If the project is purely static and does not involve Node services, you can skip this step.

Installing the Node Environment

Install the NVM

The curl - o - https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash#orWget - qO - https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bashCopy the code

Adding environment variables

vi ~/.zshrc
#End of file add
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
Copy the code

Install the Node

#View all existing Node versions
nvm list-remote
Copy the code

Install the appropriate version of Node based on your needs.

For testing, I installed the latest version, V11.12.0.

NVM install v11.12.0Copy the code

Install the pm2

You can install or install the same type of software that requires Node service support.

npm install pm2 -g
Copy the code

Jenkins configure the Node environment

This item depends on the NodeJS plug-in. Ensure that the plug-in has been installed before configuration.

Our project uses Node environment, so we need to configure the Node environment we need to package in Jenkins.

To open System Administration => Global Tool Configuration Select the NodeJS bar and click the NodeJS install button.

Name, select Automatic installation, and select a Node version to use.

Test Project Preparation

The test project is Webpack4 + Vue2 + VUE-Router + Vuex as an example.

The test items are not explained too much, but you can refer to JenkinsTest if you are interested.

One area of interest are the related commands in package.json.

"dev": "cross-env ENV=dev webpack-dev-server --hot",
"build-dev": "cross-env ENV=dev webpack --config webpack.config.js",
"prod": "cross-env ENV=prod webpack-dev-server --hot",
"build-prod": "cross-env ENV=prod webpack --config webpack.config.js"
Copy the code

The project has three branches: Master, Dev, and PROd.

Use the Prod branch as our release branch and the Dev branch as our development branch to demonstrate.

Add GitHub authorization

Generate a GitHub authorization token

Open GitHub Settings and select Developer Settings.

Select the Personal Access Tokens menu and click Generate New Token to Generate a new token.

Select repo and admin: rePO_hook and fill in a name to generate the token.

Copy the token for later use.

Jenkins Configured GitHub global authorization

Before configuring GitHub authorization, install the GitHub API Plugin. If the GitHub API Plugin is not installed, install it and try again.

Open the Jenkins configuration page and choose System Management => System Settings.

Find the GitHub entry and select Add GitHub Server.

Name it, and then select Add credentials.

Select Secret text and fill in Secret with the GitHub authorization token obtained in the previous step.

Once saved, select the Secret Text you just added in the credential bar and click Connect Test to see if it works.

In order for a hook to work properly, you need to generate a web_hook link.

Click advanced check to specify another Hook URL for Github and it will generate a URL that will be copied for use.

Open our test project JenkinsTest and select Settings.

Select the Webhooks TAB and click the Add WebHook button to Add a URL.

Fill in the Payload URL field with the URL we just copied and click Add to generate the link in the image above.

If links are available, they are prefixed with a green ✔️.

⚠️ Precautions

Because the VM is an Intranet, hook configuration cannot be correctly added on GitHub. Therefore, Intranet penetration must be enabled.

Guest officers can set Intranet penetration based on their own experience to ensure that the extranet can access the server.

The following is a simple Intranet penetration method provided by me. This method is available on the local machine, but not on the VIRTUAL machine.

Enabling Intranet Penetration

Install localtunnel for Intranet penetration.

#Installing dependent libraries
npm install -g localtunnel
#Open to penetrate
lt --subdomain jenkins --port 8080
Copy the code

For the sake of trouble, I used my own server to build Jenkins, so I can directly configure an online address, if I have my own server can also be used in the same way.

After passing the test, you can be happy to use 😊 ~~~

Configuring the SSH Service

This setting depends on the Publish over SSH plug-in, so make sure the plug-in is installed before setting it.

In order to facilitate the distribution and release process of online code packaging, we need to configure the corresponding server.

Open system Management => System Settings, select Publish over SSH, and enter the corresponding name, server address, user name, and forward directory.

Save and use.

New Jenkins task

Now that our environment is configured, it’s time to create tasks and start the automated process.

Click New Task to create a task. Enter the project name, then select build a free style software project, ok.

Basic configuration

Check the lot project, fill in our test project address: https://github.com/BingKui/JenkinsTest.

In order not to waste resources, we checked discard to the old build. The specific value can be filled in according to your own needs.

Source code management

Source management select Git, fill in our project, select the global certificate GitHub Token we added above, set the branch to prod, code browser to githubWeb, fill in the address.

Build trigger

For compliance automation, we chose GitHub hook trigger for GITScm polling.

Build environment

We make the Webpack project, all select the build environment as Provide Node & NPM bin/ Folder to PATH, and select the Node environment we added earlier.

build

Here is our main build process, click Add Build step, select Execute shell, and write our script.

#! /bin/bash
#Output current environment$PATH node -v NPM -v echo 'current branch' git branch#Toggle pull codeGit pull origin prod#Installing dependent librariesEcho 'install dependencies' NPM install#Perform packagingEcho 'start packing' NPM run build-prod#Package the built files
tar -cvf demo.tar ./dist
Copy the code

With this step done, our code is built and packaged, and it’s time to upload the code to the server we need.

Go ahead and select the server we added above and fill in the command to execute.

So far, as a static project, our release is complete. If the project has Node service, we need to perform additional operations.

⚠️ Note: The following steps are additional steps for projects with Node services.

Click Add Build step, select Send Files or Execute Commands over SSH, select server, fill in our service file and the commands to execute.

test

Now that our sustainable integrated environment is complete, let’s test our environment to see if it works.

Modify the proD branch files of the test project, commit code to the repository, push it to the remote repository, and see if our environment is working properly.

After submitting the code, a packaging task is automatically generated and runs itself. ✌️ done!!