Getting Started with Docker Compose, Jenkins Pipeline, and Node to Build a Vue Project

Scenario

DockerCompose+Jenkins+Pipeline can be used to package a SpringBoot backend project; this article extends the approach to package a Vue frontend project by installing and configuring Node.js.

Implementation

1. Follow the referenced blog to set up Jenkins and install the Node.js plugin.

2. Download the Linux offline tarball for the required Node.js version (v14.16.1) from the official release page and extract it. Move the extracted bin directory to the /tool/node path inside the Jenkins container so that the tool directory contains the Node installation.

3. In Jenkins global tool configuration, add a new NodeJS installation named node with the installation path set to /tool/node.

4. Configure npm to use the Taobao mirror to speed up dependency download. Create a Managed file of type "Npm config file", set the registry to https://registry.npmmirror.com, and remember the generated config ID.

5. Create a new Pipeline job, point it to the Git repository, and add a Jenkinsfile at the root of the Vue project with the following content:

pipeline {
    agent any
    tools {
        nodejs 'node'
    }
    stages {
        stage('编译构建') {
            steps {
                nodejs(nodeJSInstallationName: 'node', configId: '14997e88-6fc1-42bb-b9e8-bc54fe8aff81') {
                    // npm 编译安装
                    sh 'node -v'
                    sh 'npm install'
                    sh 'npm run build:prod'
                }
            }
        }
    }
    post {
        always { echo '构建结束，结果：' }
        success { echo '构建成功' }
        failure { echo '构建失败' }
    }
}

Note that the tools block uses nodejs on the left and the alias defined in step 3 on the right. The nodeJSInstallationName must match the alias, and configId must refer to the npm config file created earlier.

6. Trigger the build. The first run may take longer because dependencies are downloaded.

After a successful build, the compiled dist folder appears in the mapped directory.

7. Troubleshooting:

If the build fails with Error: Cannot find module '../lib/utils/unsupported.js', stop the container, delete all files under the mapped node directory, re‑extract the Node tarball, and restart the container (or reinstall Node on Linux).

If npm reports

request to https://registry.npm.taobao.org/... failed, reason: certificate has expired

, the Taobao registry URL is outdated. Update the registry to https://registry.npmmirror.com as the old domain stopped service in May 2022.

These steps provide a complete end‑to‑end pipeline for building a Vue application inside Jenkins using Docker Compose.