Zero‑Base Automated Deployment Using Docker, Jenkins, and GitLab CI

Introduction

As a frontend developer, you may still be manually running npm run build and copying the dist folder to a server. This guide shows how to replace those low‑effort steps with a fully automated deployment workflow.

GitLab CI and Jenkins

The two mainstream CI/CD solutions are Jenkins and GitLab CI. GitLab CI is lightweight and easy to configure, while Jenkins offers low coupling, a rich plugin ecosystem, and features such as build statistics.

Kubernetes (K8s) Overview

KubeSphere builds on top of Kubernetes to provide an enterprise‑grade, multi‑tenant container platform with a user‑friendly UI, simplifying storage, networking, security, and operational tasks.

Implementation Steps

Create a project and push it to a remote repository (GitHub or Gitee).

Start a Tomcat container in Docker and map the deployment directory to the host.

Run a Jenkins container in Docker and configure it.

Set up Jenkins triggers and configure WebHooks in GitHub.

Add the shell script Jenkins will execute for building and deploying the application.

1. Create a Project and Publish to GitHub

Initialize an empty repository (the example uses Gitee for faster access), clone it locally, create a Vue project, and push the code to the remote.

2. Start a Tomcat in Docker

Key Docker concepts are introduced (image vs container) and common commands are listed.

docker search tomcat

docker pull images

docker run -it -p 8888:8080 -v /Users/temp:/usr/local/tomcat/webapps/my-project --name tomcat tomcat

After the container starts, you can access the Tomcat UI at http://localhost:8888 and serve a test HTML file placed in the mapped directory.

3. Create a Jenkins Container

Run Jenkins with the host folder mounted:

docker run -it -p 9999:8080 -p 50000:50000 -v /Users/temp:/var/tomcatspace --name jenkins1 jenkins/jenkins

Open http://localhost:9999 to view Jenkins, retrieve the admin password from the container, and install the recommended plugins.

4. Configure Jenkins

Create a new Freestyle project, discard old builds, add Git credentials, and set the repository URL.

5. Set Up Triggers and WebHooks

Configure a build trigger URL such as http://localhost:9999/job/weihao-project/build?token=goujian and add a WebHook in GitHub (or trigger manually with Postman when the service is not publicly reachable).

6. Add the Shell Script

cd /var/jenkins_home/workspace/weihao-project/
node -v
npm -v
echo '开始安装依赖'
npm config set registry http://registry.npm.taobao.org/
npm config get registry
npm i
echo '依赖安装完毕'
echo '开始打包'
npm run build
echo '打包完毕'
echo '准备部署'
cp -r /var/jenkins_home/workspace/weihao-project/dist/* /var/tomcatspace

When the trigger URL is accessed, Jenkins runs this script, builds the Vue project, and copies the compiled files to the Tomcat container.

Final Workflow

Developer pushes code to GitHub.

GitHub triggers Jenkins via WebHook.

Jenkins executes the shell script to build and deploy.

The application is served by Tomcat (or Nginx) and can be accessed via the mapped port.

Project Repository

Project address: https://gitee.com/mslimyjj/weihao_project

Reference Documents

How to Manually Build an Automated Deployment System

Jenkins Environment Configuration and Project Creation