前端配置vue项目jenkins自动化部署

冷不防 2024-04-19 13:00 59阅读 0赞

## 一： general ##

*  这部分不需要配置，输入个项目描述就可以  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTI4OTA2Nw_size_16_color_FFFFFF_t_70]

## 二： 源代码管理 ##

*  这里我使用的是Git， 需要配置Git的仓库路径和自己的账号密码
 *  底下的`Branch Specifier` 选择仓库的分支， 在这里我选的是主分支 master  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTI4OTA2Nw_size_16_color_FFFFFF_t_70 1]

## 三： 构建触发器 ##

*  vue项目不需要这个东西， 可以直接略过

## 四： 构建环境 ##

*  这里是很重要的，需要在jenkins 安装机器上 安装**nodejs**才会在构建环境中显示**Provide Node & npm bin/ folder to PATH**这个选项  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTI4OTA2Nw_size_16_color_FFFFFF_t_70 2]

## 五： 构建 ##

*  因为vue项目需要打包，所以我们需要使用执行shell命令来进行操作  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTI4OTA2Nw_size_16_color_FFFFFF_t_70 3]

cd /var/lib/jenkins/workspace/yrcms  #--进入jenkins workspace的项目目录
    npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver #-- 这里是下载chromedriver 没有这个会报错
    #npm config set registry=http://registry.npm.taobao.org  #--镜像选择淘宝的镜像
    #npm info underscore #--（如果上面配置正确这个命令会有字符串response）
    npm install #-- 下载依赖包
    npm run build #-- 开始打包
    cd dist
    rm -rf yrcms.tar.gz  #-- 删除上次打包生成的压缩文件
    tar -zcvf yrcms.tar.gz *  #-- 把生成的项目打包成yrcms方便传输到远程服务器
    cd ../

*  在这里已经完成了 项目的打包， 接下来就是将项目打包后的文件上传到对应的位置了

## 六： 构建后操作 ##

*  我是用的SSH进行传输文件的， 这个也需要提前安装在jenkins的那台机器上
 *  在配置SSH Server之前要先去jenkins 的配置中先配置一个SSH 连接  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTI4OTA2Nw_size_16_color_FFFFFF_t_70 4]
 *  上传的源文件,vue项目打包后都在dist里面,这里这里是接着上一步来的**source files：**

dist/yrcms.tar.gz

*  删除前缀 **Remove prefix：**

/dist

*  远程目录 **Remote directory：**

/usr/local/nginx/html/work/

*  执行对话 **Exec command：**

cd /usr/local/nginx/html/work/  #进入远程服务器的目录
    tar -zxvf yrcms.tar.gz -C cms/ #解压yrcms文件到cms文件夹
    rm -rf yrcms.tar.gz #删除yrcms文件

`觉得有用就点个赞吧!`

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTI4OTA2Nw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/990ff63d41d14ec091bcc4f66bce7c80.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTI4OTA2Nw_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/1b7294029857415aa2dbbe401d75c3f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTI4OTA2Nw_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/909e1e0c18284752a54c4c75c7232313.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTI4OTA2Nw_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/f0a9090d6c6a45068fc1b19b161fafb5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTI4OTA2Nw_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/6ee986151905439fbca2e9af993ce9bc.png