本文已参与「新人创作礼」活动,一起开启创作之路。

Jenkins自动前端代码

最近公司项目重构,PHP的前后端代码分离,现在前端代码需要npm run build,现在根据之前的情况,进行前端构建拉取推送。

一、环境配置

[root@Minwanzo ~] curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash
#运行完成后需要退出当前环境,在连接一下,安装成功后在/root/.nvm
[root@Minwanzo ~] nvm --version
0.33.8
​
[root@Minwanzo ~] nvm install --lts     #安装最新node
[root@Minwanzo ~] node -v               #检查是否安装成功
v16.14.2
[root@Minwanzo ~] npm -v
8.5.0
​
下面是常用的nvm命令
nvm ls-remote:列出所有的node版本
nvm ls:列出本地已经安装的node版本
nvm install [-s] : 安装特定版本的node,比如:nvm install v6.0.0安装最新6.0.0的node。
nvm use [–silent]:切换到制定版本node
nvm current :当前 node 版本
nvm alias [别名] [node版本号] :给不同的版本号添加别名
nvm unalias [别名] :删除已定义的别名
nvm alias default [node版本号] :设置默认版本

二、npm设置国内源

web站点:npmmirror.com

Registry Endpoint:registry.npmmirror.com

[root@Minwanzo ~] npm config set registry  https://registry.npmmirror.com           #设置为国内的淘宝镜像源
[root@Minwanzo ~] npm config get registry       #验证一下,返回为刚刚设置的镜像
https://registry.npmmirror.com

三、进入到项目里面,安装依赖环境和build

[root@Minwanzo test] npm i                  #进入项目里面安装依赖环境,或者npm install两者略有不同
[root@Minwanzo test] npm run build          #然后对前端项目进行build

以上为在Linux中设置,下面配置Jenkins设置。

一、安装插件:nvm wrapper

版本查看Linux中执行:node -v

NVM_NODEJS_ORG_MIRROR配置为:cdn.npmmirror.com/binaries/no…

NVM_IOJS_ORG_MIRROR配置为:cdn.npmmirror.com/binaries/io…

Jenkins自动前端代码

二、在构建步骤中添加两个步骤:1、执行shell;2、Send files or execute commands over SSH。

#执行shell脚本
cd jsmerchant &&                            #进到构建的目录,根据自己的项目调整
npm i && npm run build &&                   #编译环境和编译成dist
#cd dist &&                                 #进入编译目录
tar -cvzf dist.tar.gz dist                      #把编译文件进行打包
#Send files or execute commands over SSH
chown -R www:www /www/wwwroot/9092
cd /www/wwwroot/9092 && rm -rf dist                 #进入前端目录,先删除之前的dist文件
cd /www/wwwroot/9092 && tar -xvzf  dist.tar.gz && rm -rf dist.tar.gz    #进入前端目录,解压包,然后删除包

Jenkins自动前端代码