Automating Front‑End Deployment with Jenkins and Yarn

Install Node plugins in the Jenkins system management center

First, add the required Node-related plugins through Jenkins' plugin manager.

Configure the global NodeJS tool

After the plugins are installed, go to System Management → Global Tool Configuration → NodeJS and click “Add NodeJS”.

Set a custom name (e.g., Nodejs16), uncheck “Install automatically”, and specify the Node installation directory ( /root/.nvm/versions/node/v16.17.0).

Create a new freestyle project

Select a “Freestyle software project” when creating the job.

Discard old builds

Configure Git source management

Set up the build environment

Check “Provide Node & npm bin/folder to PATH”. All other options can remain default, and you will see the custom NodeJS alias nodejs16 you defined earlier.

Add a shell build step

The shell script performs the following actions:

cd /root/.jenkins/workspace/xingyouwuye-manage-html-pro
node -v
npm install -g yarn -registry=https://registry.npm.taobao.org
yarn -v
yarn install --pure-lockfile
# Build the project
yarn run build:prod
yarn build:prod
cd dist
rm -rf dist.tar.gz
tar -zcvf dist.tar.gz *

Send build artifacts over SSH

Execute the following command on the remote server to deploy the artifact:

cd /tools/xingyou/manage-html
./deploy.sh /tools/xingyou/manage-html/dist.tar.gz /tools/xingyou/manage-html/dist

deploy.sh script

Place deploy.sh in /tools/xingyou/manage-html with the following content:

#!/bin/bash
tar -xzvf $1 -C $2
find $2 -name "*.tar.gz" -exec rm -rf {} \;
echo '发布成功';

After completing these steps, the front‑end project is automatically built and deployed via Jenkins. The key part of the automation is the Yarn commands in the shell script; extending the script can add version rollback or other custom actions.