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

作者 : admin 本文共2017个字,预计阅读时间需要6分钟 发布时间: 2024-06-16 共1人阅读

场景

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

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

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

可按如下步骤。

注:

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

实现

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

DockerCompose+Jenkins+Pipeline流水线打包Vue项目(解压安装配置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目录下

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

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

同上面一致即可。

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

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

然后安装路径为

/tool/node

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

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

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

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

选择类型为Npm config file

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

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

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

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

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

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

将registry修改为如下

registry = https://registry.npmmirror.com

然后提交保存。

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

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

然后在前端代码仓库的根目录下新建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、点击立即构建测试效果

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

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

构建成功之后会在相应的映射目录下生成dist包文件。

7、踩坑记录

构建时提示:

Error: Cannot find module ‘../lib/utils/unsupported.js’
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)

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

需要将容器停掉,然后将映射路径下node下面所有文件删除,然后重新解压移动一遍,再重新启动容器。

如果是在linux上,则卸载重装node。

构建时提示:

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

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

这是因为一开始配置的淘宝镜像不对,网上较老的教程写的淘宝镜像过期了!

在 2021 年,淘宝就发文称,npm 淘宝镜像已经从 registry.npm.taobao.org 切换到了 registry.npmmirror.com。

旧域名也将于 2022 年 5 月 31 日停止服务(不过,直到今天 HTTPS 证书到期才真正不能用了)。

本站无任何商业行为
个人在线分享 » DockerCompose+Jenkins+Pipeline流水线打包Vue项目(解压安装配置Node)入门
E-->