In conventional front-end projects, deployment projects need to go through local build, compressed file, upload the compressed package to the server and decompress the file, and the process is tedious. Therefore, a set of automatic deployment process is prepared in daily work, which is used to say goodbye to manual upload process, simple configuration and use, and realize one-click automatic deployment of the front end.

First, let’s clarify the process:

1. The code was uploaded to GitLab. Jenkins detected changes in the code on GitLab and downloaded the code to his own workspace.

2. After the code is downloaded, Jenkins automatically downloads the dependent files required for the project.

3. Run the customized package command in package.json to compress the package into a ZIP file and save the package to the specified path on the Linux server.

4. If the deployment is successful, check whether the project address published by nginx is successful.

The next step is to set up the environment.

Install Jenkins

Download Jenkins Epel source

wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat-stable/jenkins.repo

Then run RPM –import https://jenkins-ci.org/redhat/jenkins-ci.org.key

Jenkins runs a Java dependent environment and needs to be configured in advance

View the Java version information java-version

Yum install Jenkins -y

Find the Java program execution path which Java

Add our Java command path to the Jenkins startup script, skip this step if it’s in the default path of the script

Then execute chown -r Jenkins: Jenkins /var/lib/jenkins/

Load the Jenkins service systemctl daemon-reload

Perform vim/var/lib/Hudson/Jenkins. Model. UpdateCenter. XML, due to an earlier version of before Jenkins operation according to the problems may arise when the plugin, amend the HTTPS to HTTP, If there is no this file first start Jenkins, start after if there is a problem can be modified to open http://IP:8080/pluginManager/advanced connection

Service Jenkins start

Check whether the port is enabled. The default port is 8080 netstat -tnlp

Check whether Jenkins is downloaded successfully and running properly service Jenkins status

At this time, we can access Jenkins’ page by accessing port 8080 of the server. If it cannot be opened, we can check whether port 8080 is open.

Then follow Jenkins’ guidance for initialization:

  1. Follow the prompts to obtain the administrator password and enter the password Jenkins generated.
  2. Configure the plug-in.
  3. Create a user.

Write nodessh scripts

Create a directory named buildssh in the project root directory and create nodessh.js within the directory as follows:

const commander = require("commander"); const fs = require("fs"); const node_ssh = require("node-ssh"); const archiver = require("archiver"); const ssh = new node_ssh(); Commander.version("0.1.0").option("--zip_dir [value]", "subproject dir").option("--zip", "need zip") .option("--dist [value]", "upload file name , contain surfix") .option("--service [value]", "gitbooks's name, folder in nginx") .option("--env_mode [value]", "env mode") .option("--remote_host [value]", "remote_host") .option("--remote_user [value]", "remote_user") .option("--remote_pwd [value]", "remote_pwd") .option("--service_root [value]", "service_root") .parse(process.argv); if (! process.argv.slice(2).length) { commander.outputHelp(); return; } if (! commander.zip_dir || ! commander.dist || ! commander.service) { commander.outputHelp(); return; } let remote_host; let remote_user; let remote_pwd; let service_root; let cwd = process.cwd(); let dist_zip = `${commander.dist}`; let local_zip = `${cwd}/${dist_zip}`; let service_dir = `${commander.service}`; If (commander. Env_mode === "test") {// Remote_host = "xxx.xxx.xxx.xxx"; // Server IP remote_user = "XXXX "; // user name remote_pwd = "XXX "; / / password service_root = "/ usr/share/nginx/HTML/XXX/"; Else if (commander. Env_mode === "prod") {remote_host = ""; remote_user = ""; remote_pwd = ""; service_root = ""; } if (fs.existsSync(local_zip)) { fs.unlinkSync(local_zip); } let output; let archive; // create a file to stream archive data to. if (commander.zip) { output = fs.createWriteStream(local_zip); archive = archiver("zip", { // Sets the compression level. zlib: { level: 5 } }); // listen for all archive data to be written // 'close' event is fired only when a file descriptor is involved output.on("close", function() { console.log(archive.pointer() + " total bytes"); console.log( "archiver has been finalized and the output file descriptor has closed." ); upload(); }); // This event is fired when the data source is drained no matter what was the data source. // It is not part of this library but rather from the NodeJS Stream API. // @see: https://nodejs.org/api/stream.html#stream_event_end output.on("end", function() { console.log("Data has been drained"); }); // good practice to catch warnings (ie stat failures and other non-blocking errors) archive.on("warning", function(err) { if (err.code === "ENOENT") { // log warning console.log(`${JSON.stringify(err)}`); } else { // throw error throw err; }}); // good practice to catch this error explicitly archive.on("error", function(err) { throw err; }); // pipe archive data to the file archive.pipe(output); Archive. Directory (' ${CWD}/${commander. Zip_dir} ', false); // archive. Directory (' ${CWD}/${commander. Zip_dir} ', '${service_dir}'); archive.finalize(); } else {// upload a specified file (); } function upload() { ssh .connect({ host: remote_host, username: remote_user, password: remote_pwd }) .then( () => { return ssh .exec(`rm -rf ${service_root}/${service_dir}/*`, [], { cwd: "", onStdout(chunk) { console.log("stdoutChunk", chunk.toString("utf8")); }, onStderr(chunk) { console.log("stderrChunk", chunk.toString("utf8")); }}). Then (() => {console.log(" start uploading file "); return ssh.putFile(local_zip, `${dist_zip}`); }). Then (() => {console.log(" upload complete, start decompressing "); return ssh.exec( `unzip -d ${service_root}/${service_dir} ${dist_zip}`, [], { cwd: "", onStdout(chunk) { console.log("stdoutChunk", chunk.toString("utf8")); }, onStderr(chunk) { console.log("stderrChunk", chunk.toString("utf8")); }}); }). Then (() => {console.log(" unzip, delete file "); return ssh.exec(`rm -f ${dist_zip}`, [], { cwd: "", onStdout(chunk) { console.log("stdoutChunk", chunk.toString("utf8")); }, onStderr(chunk) { console.log("stderrChunk", chunk.toString("utf8")); }}); }). Then (() => {console.log(" all done "); return ssh.dispose(); }); }, error => { console.log("Something's wrong"); console.log(error); }); }Copy the code

Then add a command “pubtest” to the scripts object of package.json: “node buildssh/nodessh.js –zip –zip_dir dist –dist dist.zip –service dist –env_mode test”

Configuration items

  1. Log in to Jenkins to create the project

2. Configure project information

3. Select a build environment

4. Write build commands

5. Click Save and Apply, enter the home page of the project and click Build now. After the build is completed, you can test it.