DockerCompose+Jenkins+Pipeline流水线打包Vue项目(解压安装配置Node)入门

news2025/1/23 11:14:13

场景

DockerCompose+Jenkins+Pipeline流水线打包SpringBoot项目(解压安装配置JDK、Maven等)入门：

DockerCompose+Jenkins+Pipeline流水线打包SpringBoot项目(解压安装配置JDK、Maven等)入门-CSDN博客

以上使用流水线配置和打包springboot后台项目，如果要使用流水线和配置node打包vue项目，

可按如下步骤。

注：

博客：
霸道流氓气质-CSDN博客

实现

1、按照上面博客步骤搭建jenkins并安装node插件。

2、下载node的linux的离线压缩包

下载地址：

Node.js

这里项目编译使用的node的版本是14.16，所以下载指定版本的压缩包

Node.js — Node v14.16.1 (LTS)

下载linux上64位版本，比如这里是node-v14.16.1-linux-x64.tar.xz

然后将其解压并移动到jenkins容器映射路径下的tool目录下，使解压后的bin目录位于tool下的node目录下

这里是在windows下，所以使用解压软件管理员模式运行，如果是linux上直接运行解压命令，使路径

同上面一致即可。

3、全局工具配置-NodeJS安装

新增NodeJS,别名这里叫node,记住这个别名，后续与jenkinsfile中tool一致。

然后安装路径为

/tool/node

4、配置npm的镜像源为淘宝镜像源

为了提高下载依赖的速度，需要修改npm的镜像源

系统管理-Managed files-Add a new Config

选择类型为Npm config file

记住生成的配置文件的id和名称，后面会用到

然后就可以在配置文件的Content中进行npm的配置修改了。

比如这里修改镜像源为淘宝镜像

将registry修改为如下

registry = https://registry.npmmirror.com

然后提交保存。

5、新建任务-流水线项目，配置gitee地址，SCM以及git凭证与上面一致

然后在前端代码仓库的根目录下新建Jenkinsfile文件

然后修改内容为：

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 '构建失败'
        }
    }
}

注意这里的tools中左边是nodejs固定的，右边是对应上面安装node时的别名。

然后下面配置nodejs时nodeJSInstallationName也是指定node的别名，后面configId指定上面添加全局配置文件

时生成的id，代表npm会使用这个配置文件。

后面就是跟的具体的构建指令。

6、点击立即构建测试效果

第一次构建需要加载依赖，时间较长