Getting Started with Jenkins for Frontend Deployment: Installation, Configuration, and CI/CD Pipelines

As a front‑end developer, you may think Jenkins is just a button to click, but the article explains why learning Jenkins is essential for automating the entire build‑deploy‑release cycle.

Deployment history : The author describes three stages – the manual "original era", the scripted era using a Node ssh2‑sftp‑client script, and the modern CI/CD era where Jenkins replaces manual steps.

Scripted upload example :

const chalk = require('chalk')
const path = require('path')
const fs = require('fs')
const Client = require('ssh2-sftp-client')
const sftp = new Client()
const envConfig = require('./env.config')

const defalutConfig = {
  port: '22',
  username: 'root',
  password: '123',
  localStatic: './dist.tar.gz',
}

const config = {
  ...defalutConfig,
  host: envConfig.host,
  remoteStatic: envConfig.remoteStatic,
}

function upload(config, options) {
  if (!fs.existsSync('./dist') && !fs.existsSync(options.localStatic)) {
    return
  }
  let isDist = false
  sftp.connect(config)
    .then(() => {
      if (fs.existsSync(options.localStatic)) {
        return sftp.put(options.localStatic, options.remoteStatic)
      } else if (fs.existsSync('./dist')) {
        isDist = true
        return sftp.uploadDir('./dist', options.remoteStatic.slice(0, -12))
      }
    })
    .then(() => {
      sftp.end()
      if (!isDist) {
        const { Client } = require('ssh2')
        const conn = new Client()
        conn.on('ready', () => {
          const remoteModule = options.remoteStatic.replace('dist.tar.gz', '')
          conn.exec(`cd ${remoteModule};tar xvf dist.tar.gz`, (err, stream) => {
            if (err) throw err
            stream.on('close', (code) => {
              conn.end()
              fs.unlink(options.localStatic, (err) => { if (err) throw err })
            })
          })
        }).connect(config)
      }
    })
    .catch(err => { sftp.end() })
}

upload(config, {
  localStatic: path.resolve(__dirname, config.localStatic),
  remoteStatic: config.remoteStatic,
})

Jenkins installation on CentOS : Two methods are shown – adding the official repository and installing via yum install jenkins , or downloading the RPM directly. The guide stresses installing JDK 17+ and configuring /usr/lib/systemd/system/jenkins.service to point to the correct JAVA_HOME .

sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key yum install jenkins

wget https://pkg.jenkins.io/redhat/jenkins-2.449-1.1.noarch.rpm rpm -ivh jenkins-2.449-1.1.noarch.rpm

After installation, start Jenkins with systemctl start jenkins , adjust the service file to set Environment="JAVA_HOME=/usr/lib/jvm/jdk-17.0.10" , reload the daemon, and restart the service.

Freestyle project configuration : The article walks through each section (General, Source Code Management, Build Triggers, Build Environment, Build Steps, Post‑build Actions), showing how to set parameters, discard old builds, and use the "Publish over SSH" plugin to transfer artifacts.

Pipeline (Declarative) example :

pipeline {
  agent any
  stages {
    stage('Build') { steps { echo 'Build' } }
    stage('Test')  { steps { echo 'Test' } }
    stage('Deploy'){ steps { echo 'Deploy' } }
  }
}

The guide expands this into a full CI/CD pipeline that pulls code, installs Node, runs yarn build , creates a timestamped tarball, and deploys it via the SSH publisher, using parameters like ${params.delopyTag} and environment variables such as ${BUILD_NUMBER} .

Common pitfalls are addressed, including workspace permission errors ( chown -R jenkins:jenkins /var/lib/jenkins/workspace ) and Git Parameter visibility issues.

In conclusion, mastering Jenkins equips front‑end engineers with automation skills that reduce manual errors, speed up releases, and broaden their technical competence beyond pure UI development.