Jenkins实现前端(React)项目的构建

超、凢脫俗 2023-06-03 10:59 17阅读 0赞

前面简单了解了前端项目的具体的打包过程，知道这个打包过程之后，那么用Jenkins构建一个前端项目就变得很简单了。

## 一、安装node(npm)环境 ##

之前的"npm的具体打包过程"中已经讲了node环境的安装，这边不再详细赘述，有需要的可以移步过去。

## 二、开始配置前端项目 ##

来到Jenkins主页面点击"新建任务"

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djMTY5NTA0MDg0Mg_size_16_color_FFFFFF_t_70]  
输入一个任务名称，这里就叫做"test\_static"，并选"构建一个自由风格的软件项目"。点击"确定"。

进入配置页面之后，先来看常规配置，这边就和之前构建java项目的时候一样：

在"描述"这一栏中写上你对这个项目的基本介绍

![在这里插入图片描述][20191006135457282.png]

勾选"丢弃旧的项目"。自定义"保持构建的天数"和"保持构建的最大个数"，我这里都设置为10

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djMTY5NTA0MDg0Mg_size_16_color_FFFFFF_t_70 1]

勾选"参数化构建过程"。添加一个"选项参数"用于选择部署还是回滚；添加一个"字符参数"用于填写Git分支名称；添加一个"字符参数"用于填写回滚commitid，如果不填写（默认已经填写为default），则混滚到倒数第二次发布的状态。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djMTY5NTA0MDg0Mg_size_16_color_FFFFFF_t_70 2]  
再来看下"源码管理"配置

源码管理的配置就是指定Jenkins从哪个代码仓库拉取代码。毫无疑问，这里选择Git。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djMTY5NTA0MDg0Mg_size_16_color_FFFFFF_t_70 3]

接着来看"构建"的配置：

点击"构建"的"增加构建步骤"并选择"执行shell"

![在这里插入图片描述][20191006135611515.gif]

在这个"执行shell"里面写入打包和回滚的脚本。

#!/bin/bash
    
    remote_server=192.168.0.124
    remote_dir=/home/dev/webdev/
    remote_user=dev
    remote_port=22
    remoteshell_path=/home/dev/jenkins_shell/test_static/deploy.sh
    
    remotebak() { 
        ssh -p $remote_port ${remote_user}@${remote_server} "echo "调用远程脚本" && ${remoteshell_path} ${remote_dir}"
    }
    
    deploy(){    
        cd $WORKSPACE && cnpm install
       
        cnpm run build:dev
        [ $? -ne 0 ] && echo -e '\033[31m[ error ] Unable to npm the branch\033[0m' && exit 1
        echo "npm install success."
        
        echo "backup web project."
        remotebak
        [ $? -ne 0 ] && echo -e '\033[31m[ error ] Unable to backup the remote static files.\033[0m' && exit 1
        
        echo "sync static files to remote servers."
        rsync -e "ssh -p 22" -vzrtopg --delete --progress $WORKSPACE/build/dev/ ${remote_user}@${remote_server}:${remote_dir}
        [ $? -ne 0 ] && echo -e '\033[31m[ error ] Unable to sync static files.\033[0m' && exit 1
        
        git rev-parse HEAD >> version.log
    }
    
    
    
    rollback(){ 
        if [ "$commitid" == "default" ];then
            VERSION=`tail -n 2 version.log | head -n 1`
        else
            VERSION=$commitid
        fi 
    
        git reset --hard $VERSION 
        [ $? -ne 0 ] && echo -e "\033[31m[ error ] Failed to reset the $VERSION \033[0m" && exit 1
    
        cnpm run build:dev
        [ $? -ne 0 ] && echo -e '\033[31m[ error ] Unable to npm the branch.\033[0m' && exit 1
    
        rsync -e "ssh -p 22" -vzrtopg --delete --progress $WORKSPACE/build/dev/ dev@${remote_server}:${remote_dir}
    
    }
    
    case $mode in
     deploy)
            deploy
            ;;
     rollback)
            rollback
            ;;
     *)
            echo $"Usage: $0 {deploy|rollback}"  
            exit 1
            ;;
    esac

要特别说一下这里的回滚：之前构建maven项目的时候，我用的是利用备份的文件包进行回滚。但是这里用的是另外一种回滚方式，是用git rev-parse HEAD命令记录下每次发布的commitid号，默认回滚到倒数第二次发布的状态。

上面的"执行shell"中的脚本实现了打包，并且把打包生成的文件通过rsync同步到server1上的web项目目录中。这里用的了rsync命令，所以需要再两台服务器上都安装下rsync

[dev@localhost ~]$ yum -y install rsync

接着调用远程服务器的脚本（就是下面这个脚本）来实现远程web目录的备份，并保留最近5个的备份包。

#!/bin/bash
    
    project_dir=$1
    bakdir=/home/dev/web_bak/
    time=`date '+%Y%m%d%H%M%S'`
    
    left_limit() { 
        rm -f `ls -t ${ bakdir}/*.tgz | tail -n +6`
    }
    
    backup() { 
        cd $project_dir/..
        tar -zcf webdev_${time}_bak.tgz webdev
        mv webdev_${time}_bak.tgz $bakdir
        left_limit
    }
    
    backup

这个脚本放置的位置需要和上一个脚本的指定位置保持一致（即/home/dev/jenkins\_shell/test\_static/deploy.sh）

上面指定的web项目的备份目录页需要在server1上创建

[dev@localhost ~]$ mkdir -p /home/dev/web_bak/

然后点击"开始构建"

![在这里插入图片描述][2019100613572034.gif]

构建完成之后控制台的输出结果如下：

![在这里插入图片描述][20191006135735719.png]

等到rsync同步完成，就成功了。

回滚的操作也很简单，在开始构建之前，mode选择"rollback"，并且commitid中填入你要回滚到的commitid（或者用默认的default回滚到倒数第二次发布的状态）。回滚完成后，控制台的输出如下

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djMTY5NTA0MDg0Mg_size_16_color_FFFFFF_t_70 4]

可以看到回滚到了之前的"修改title为测试4"的版本。

这样就实现了一个简单的前端React项目的自动化部署过程，实际生产环境，我们还可以根据实际情况做相应的调整。

好了，前端React项目的构建就到此为止了，其实总体思路还是比较简单的。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djMTY5NTA0MDg0Mg_size_16_color_FFFFFF_t_70]: /images/20230601/f5821d13a9d841a1b069c74880bcf505.png
[20191006135457282.png]: /images/20230601/9716fdee991e419da6936857693c731a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djMTY5NTA0MDg0Mg_size_16_color_FFFFFF_t_70 1]: /images/20230601/790da5b4755b45feb212b58037defffa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djMTY5NTA0MDg0Mg_size_16_color_FFFFFF_t_70 2]: /images/20230601/18901236b23e4a09af05b3fcd1813f71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djMTY5NTA0MDg0Mg_size_16_color_FFFFFF_t_70 3]: /images/20230601/64c55fe530964b63931639987ac4337a.png
[20191006135611515.gif]: /images/20230601/b2c4a6c0384e4e4f8a9485edf12fa3e7.png
[2019100613572034.gif]: /images/20230601/d5281916581d4e30ac1a47eb140dd665.png
[20191006135735719.png]: /images/20230601/f2d21030dc7641a1bc58f45749b74973.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3djMTY5NTA0MDg0Mg_size_16_color_FFFFFF_t_70 4]: /images/20230601/ba4f4eda892542f3bb96b9b55cfc3c92.png