One‑Click Frontend Deployment with Jenkins: From GitLab to Server

1. Frontend vs. Backend Deployment Differences

Front‑end deployment only requires copying the generated static files to the server, while back‑end deployment involves uploading a JAR package and restarting the service.

Front‑end builds depend on Node.js, and the Node.js version must match the framework (e.g., Angular).

Back‑end builds rely on Maven, which does not need strict JDK version alignment.

2. Frontend Deployment Dependencies

To compile the project you must install specific versions of Node.js and npm.

2.1 Node.js

Node.js is a JavaScript runtime based on the Chrome V8 engine. Download the installer from the official site:

https://nodejs.org/dist/

Verify the installation with node -v .

2.2 npm

npm is the Node.js package manager. Use npm run build to trigger the build script defined in package.json . Check the npm version with npm -v .

3. Jenkins Frontend Deployment Workflow

Pull code from the Git repository.

Delete previous compiled files in the Jenkins workspace.

Install dependencies with npm.

Run npm run build to generate the dist folder.

Compress the dist directory into dist.tar.gz .

Copy the archive to the target Linux server via the SSH plugin.

Backup existing front‑end files on the server and extract the new package.

4. Configuring Jenkins Tasks

4.1 Repository Settings

Provide the Git repository URL, username, and password so Jenkins can clone the code into its workspace.

4.2 Delete Workspace Files

Add an Execute Windows batch command step with the following commands:

del /q /a /f "%workspace%\dist\*.*"
del /q /a /f "%workspace%\dist.tar.gz"

4.3 Compile Project

Use separate Execute Windows batch command steps to run:

npm install
npm run build

After execution, the workspace will contain node_modules and the compiled dist folder.

4.4 Compress Compiled Files

Compress the dist directory into dist.tar.gz (e.g., using tar -czvf on the Jenkins agent).

4.5 Copy and Extract on the Server

Install the “Publish Over SSH” plugin, then configure the global SSH server settings (name, hostname, credentials, remote directory).

In the job, add a “Send files over SSH” step pointing to the workspace file C:\ProgramData\Jenkins\.jenkins\workspace\<JobName>\dist.tar.gz and the target remote directory.

4.5.1 Backup Existing Front‑end Files

Create a backup directory on the remote server and move the current front‑end directories into a timestamped folder:

# Backup files
cd /nfs-data/wukongliaojiagou/web-bak
timestamp=$(date +%Y%m%d%H%M%S)
mkdir ${timestamp}
cd /nfs-data/wukongliaojiagou
mv admin ./web-bak/${timestamp}/admin-${timestamp}
mv front ./web-bak/${timestamp}/front-${timestamp}
mv control ./web-bak/${timestamp}/control-${timestamp}

# Extract new package
cd /nfs-data/wukongliaojiagou
tar -zxvf dist.tar.gz
cp -r ./dist/admin admin
cp -r ./dist/front front
cp -r ./dist/control control
exit

4.6 Test Execution

Click “Build Now” in Jenkins; the console output should show successful execution of all steps.

5. Summary

The article demonstrates a complete Jenkins pipeline for building an Angular front‑end project, packaging it, and deploying it to a Linux server, including environment preparation, workspace cleanup, backup, and verification.