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_sitehttps://npm.taobao.org/mirrors/node-sass三、Jenkins配置nodeManage 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_CONFIGpackage.json VUETEMPLATECOMPILER2.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 disttar解压命令不需要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上全局安装 pnpmnpm install -g pnpm打包pnpm install --ignore-scripts pnpm build其他过程类似包管理器位yarn时jenkins上全局安装yarnnpm install -g yarn打包yarn install --pure-lockfile #--pure-lockfile 这个参数是在服务器install不生成yarn.lock防止服务器和本地代码冲突 yarn run build其他过程类似六、多pnpm yarn版本发布jenkins发布多npm版本时可以使用nvm相关插件解决那么pnpm如何解决答案是使用corepack命令 或者 npx1.corepack方案以node18和node16对应的多版本pnpm为例(1).下载node下载地址node18 https://nodejs.org/dist/v18.20.0/node-v18.20.0-linux-x64.tar.gznode16 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 variablesCOREPACK_NPM_REGISTRYhttps://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 PATHNodeJS Installation选择上面配置的别名shell脚本使用corepack启用pnpmnode -v npm -v npm config ls corepack enable pnpm pnpm -v pnpm install --ignore-scripts pnpm build2.npx方案corepack在启用pnpm时会强制外网下载对内网不友好虽然可以先把pnpm离线包放进来还是有点遗憾以node18为例 可以用npx pnpm10 替换掉pnpm命令常见打包命令npm config set registry http://mirror.example.cn/ # 去掉 --no-install让 npx 临时下载到当前项目不污染全局 npx pnpm10 -v npx pnpm10 install --ignore-scripts npx pnpm10 build七、常见报错1.node-sass低版本安装不成功建议安装node版本node13因为低版本node-sass不支持高版本的node2.node-sass mkdir没有权限由于node-sass不能用root用户命令运行npm install命令需要加上 --unsafe -perm或者改权限不用root用户执行这个命令3.Syntax Error: TypeError: Cannot read property parseComponent of undefinedvue的版本与vue-template-compiler不一致导致的检查package.json里vue 和 vue-template-compiler版本号是否完全一致不能带有“^” 或者 “~”如果有去掉改成数字点号形式。上面的版本都是2.6.11但是vue-template-compiler前带有“^” 所以上面的命令用sed命令替换掉了。4.长时间npm build没有反应清理工作空间