jenkins部署nodejs前端项目-洪萨配资

一、jenkins安装node插件

Manage Jenkins-->Manage Plugins

在可选插件钟搜索NodeJS，找到NodeJS ，勾选，然后点击Install without restart

安装完插件之后需要web端重启jenkins，地址为http://[ip]/restart，我这里是http://192.168.3.42/restart

二、安装node

以node13为例，node14对安装低版本的node-sass有影响

下载和解压

wget https://nodejs.org/dist/v13.9.0/node-v13.9.0-linux-x64.tar.gz tar zxvf node-v13.9.0-linux-x64.tar.gz -C /usr/local cd /usr/local mv node-v13.9.0-linux-x64 node13

配置环境变量

#编辑/etc/profile vi /etc/profile #在最后添加 #set nodejs env export NODE_HOME=/usr/local/node13 export PATH=$NODE_HOME/bin:$PATH #用source命令是环境变量生效 source /etc/profile

查看版本

node -v npm -v

配置淘宝镜像

npm config set registry https://registry.npmmirror.com npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass

三、Jenkins配置node

Manage Jenkins-->Global Tool Configuration--> NodeJS 安装
新增NodeJS

别名node-v13
安装目录/usr/local/node13

四、项目配置

Manage Jenkins-->Manage Plugins

搜索Git Parameter安装

以git项目打包为例说明使用

新建item

任务名称任意，类型选Freestyle project

填写内容分6块，分别是 General 、源码管理、构建触发器、构建环境、构建、构建后操作
General内容

1.勾选Discard old builds 设置 策略Loq Rotation 保持构建的天数=1 保持构建的最大个数=5 2.GitLab Connection 选择 jenkins 3.勾选This project is parameterized 添加参数 Git Parameter（这里用到的就是刚才的 Git Parameter插件） 名称 填 branch 参数类型 选择 分支

源码管理内容

1.选择Git Repositories Repository URL 填git地址如http://git.aaa.com/bbb_projects/ccc.git Credentials 这里添加 你的git账号 可以用gitlab的用户名密码，也可以用之前的全局配置的apitoken Branches to build 指定分支（为空时代表any） 填 $branch 其他选项 默认

构建触发器

不填 这里可以配置一些比如push代码后自动构建的操作等

构建环境

勾选 Provide Node & npm bin/ folder to PATH NodeJS Installation 选择之前配置的node-v13 其余选项默认

构建

增加构建步骤-Execute Shell 脚本如下 PACKAGE_CONFIG=package.json VUETEMPLATECOMPILER=2.6.11 sed -i 's#\("vue-template-compiler": "\).*#\1'"$VUETEMPLATECOMPILER"'",#g' $PACKAGE_CONFIG npm install --unsafe -perm npm run build:dev zip -r dist.zip dist /usr/local/transfer/transfer cow dist.zip >wenshushu.txt linklineNumber=$(sed -n '/Download\ Link/=' wenshushu.txt) echo $linklineNumber linklinestr=$(sed -n "${linklineNumber}p" wenshushu.txt) echo $linklinestr str=${linklinestr#*Link: } mosquitto_pub -h mq.tongxinmao.com -t topic/sunwardtest -m "{\"module\":\"saas-wis-web\",\"link\":\"${str}\"}"

关键构建命令

npm install npm run build:dev zip -r dist.zip dist

若使用push on ssh命令，注意chmod -R 755 dist，tar解压命令不需要

unzip dist.zip chmod -R 755 dist cp dist path/to/nginx/html

大部分linux系统最小化安装是不带zip命令，如果不想安装zip，我们可以用tar命令替换

#tar压缩(这个压缩后带dist文件夹，建议使用) tar czvf dist.tar.gz -C ./ dist #tar解压 tar -zxvf dist.tar.gz

五、其他包管理器处理

怎么判断node项目使用哪个包管理器，最简单的方法，查看package.json

有pnpm的基本为pnpm包管理，有yarn的基本就是yarn包管理，如果都没有就是npm包管理。

包管理器为pnpm时

jenkins上全局安装 pnpm

npm install -g pnpm

打包

pnpm install --ignore-scripts pnpm build

其他过程类似

包管理器位yarn时

jenkins上全局安装yarn

npm install -g yarn

打包

yarn install --pure-lockfile #--pure-lockfile 这个参数是在服务器install不生成yarn.lock，防止服务器和本地代码冲突 yarn run build

其他过程类似

六、多pnpm yarn版本发布

jenkins发布多npm版本时，可以使用nvm相关插件解决，那么pnpm如何解决

答案是使用corepack命令或者 npx

1.corepack方案

以node18和node16对应的多版本pnpm为例

(1).下载node

下载地址

node18 https://nodejs.org/dist/v18.20.0/node-v18.20.0-linux-x64.tar.gz

node16 https://nodejs.org/download/release/v16.18.1/node-v16.18.1-linux-x64.tar.gz

(2).配置corepack全局环境变量的npm镜像

Jenkins-->Manage Jenkins--Configure System

全局属性-->Environment variables

COREPACK_NPM_REGISTRY=https://registry.npmmirror.com

这个地方配置corepack的npm镜像

(3).配置多个node版本路径

Jenkins-->Manage Jenkins--Global Tool Configuration

配置多个node路径

NodeJS --NodeJS 安装--新增NodeJS

(4).工作项配置

node版本选择

Provide Node & npm bin/ folder to PATH

NodeJS Installation

选择上面配置的别名

shell脚本使用corepack启用pnpm

node -v npm -v npm config ls corepack enable pnpm pnpm -v pnpm install --ignore-scripts pnpm build

2.npx方案

corepack在启用pnpm时会强制外网下载，对内网不友好，虽然可以先把pnpm离线包放进来，还是有点遗憾

以node18为例可以用npx pnpm@10 替换掉pnpm命令

常见打包命令

npm config set registry http://mirror.example.cn/ # 去掉 --no-install，让 npx 临时下载到当前项目，不污染全局 npx pnpm@10 -v npx pnpm@10 install --ignore-scripts npx pnpm@10 build