Setting Up Jenkins with Docker for Automated Frontend Project Build and Deployment

The article starts by describing the pain point of manually pulling, building, and uploading a frontend project and proposes using Jenkins to automate the workflow.

Jenkins is installed via Docker by creating a docker-compose.yml file that maps the host directory /root/jenkins/jenkins_home to the container’s /var/jenkins_home and exposes port 8999 . After running docker compose up -d , the container can be accessed at http://192.168.36.2:8999 .

During the initial setup, the admin password is retrieved either from the host file /root/jenkins/jenkins_home/secrets/initialAdminPassword or by executing docker exec -it jenkins cat /var/jenkins_home/secrets/initialAdminPassword . The wizard then installs the recommended plugins.

Additional plugins are installed: NodeJS (to manage multiple Node versions and npm mirrors), Publish Over SSH (for remote deployment), and optionally DingTalk (for build notifications). The NodeJS plugin is configured to use the Alibaba mirror https://mirrors.aliyun.com/nodejs-release/ and to install global packages such as pnpm . An NPM registry entry pointing to http://registry.npmmirror.com is also added.

The SSH server configuration includes host, username, password (or key), and a remote directory where build artifacts will be uploaded. The connection can be tested with the “Test Configuration” button.

For DingTalk notifications, a custom robot is created in a DingTalk group, the signature and webhook URL are saved, and then entered in Jenkins under the DingTalk plugin settings.

A freestyle job is created to build the frontend project. In the job configuration:

Source Code Management: Git repository URL (GitHub or GitLab) with credentials (GitHub token or GitLab token).

Build Triggers: enable “GitHub hook trigger for GITScm polling” or the equivalent GitLab webhook.

Build Environment: check “Provide Node & npm bin/folder to Path”.

Build Steps: run commands such as node -v , pnpm -v , rm -rf node_modules dist , pnpm install , pnpm build .

Post‑build Actions: use “Publish Over SSH” to transfer the dist/**/** files to the remote server, set the remote directory (e.g., /data/sites/homepage ), and optionally execute a remote command to restart services.

After saving, the job can be triggered manually or automatically via webhooks. For GitHub, the webhook URL is http:// :8999/github-webhook . For GitLab, the webhook URL is taken from the Jenkins trigger configuration. Once a commit is pushed, Jenkins pulls the code, runs the build steps, uploads the artifacts, and sends a DingTalk notification.

The guide concludes with a brief postscript noting that the workflow is suitable for small‑scale projects and may need adaptation for larger enterprises.