Jenkins自动构建打包vue项目以及发布到不同服务器上

git jenkins gitlab
jenkins
发布日期:   2022-10-26
更新日期:   2022-11-02
文章字数:   1.8k
阅读时长:   7 分
阅读次数:  

之前写了2篇有关Jenkins自动化构建前端项目的文章。其实是自动构建打包编译后的文件，用于静态网站，主要是针对用hexo搭建的个人博客网站的。本地npm run build打包编译hexo代码，通过deploy命令生成一个新的git库，这个git库就是和Jenkins绑定的。

放上这2篇文章以及用hexo搭建个人博客的文章，有兴趣的可以了解一下：

此次本文汇总了一下用Jenkins搭建vue项目，并且在Jenkins工程上绑定的是vue源码库，通过流水线来npm run buildvue项目文件，以及发布到不同的服务器上去。顺便讲一下 Jenkins安装GitLab插件和Git插件。主要是大部分公司可能用的是基于GitLab搭建的私服库。

有关Jenkins和Nginx的安装，这里不在赘述，详情参考Jenkins+Github+Nginx实现前端项目自动部署，从Jenkins配置开始，以下内容默认你已安装Jenkins并初始化配置和JDK插件（java8以上版本，2022年7月2日起，Jenkins新版本不再支持java8，仅支持java11和java17）的安装。

一、安装插件

1.GitLab和Git插件

(1).安装 GitLab和Git插件

点击系统管理，再点击管理插件，切换到可选插件，分别搜索GitLab Plugin和Git Plugin，然后点击直接安装：

如果在可选插件里没有搜到，可能默认已经安装了，可以在已安装里查询。

(2).配置 GitLab和Git插件

打开GitLab（例如公司内网的GitLab网站），点击个人设置菜单下的preferences，再点击左侧菜单下的Access Tokens，创建Personal Access Tokens后，复制备用：

配置GitLab

点击系统管理，再点击系统配置，点击左上角导航配置下拉框，点击Gitlab选项：

  1. Connection Name随便填；
  2. Git Host URL填GitLab的域名地址，例如http://gitlab.yourdomain.com/；
  3. Credentials配置；

点击Add下拉框，点击jenkins；弹出框里，kind选择GitLab API Token，将之前复制备用的Personal Access Tokens粘贴到API token输入框中，然后点击添加：

选择刚刚新建的Credentials，测试一下能否连接成功，点击Test connection，正常应该返回Success：

完成后点击页面底部的应用，再点击保存。

注意： 如果测试连接不成功，通常是当前节点不能解析 gitlab.yourdomain.com 域名导致的，设置正确的DNS或者hosts即可。

用Personal Access Tokens配置的Credentials后面我没有使用过，算是白折腾，若是有什么地方可以用到，可以私聊我进行分享。配置Credentials在我参与的项目里，大多数是使用git仓库的账号密码配置。

配置Git插件

点击右上角admin，再点击凭据，点击最下面的system，点击全局凭据，点击右上角的add credentials添加新的凭据：

点击系统配置，再点击全局工具配置，点击Git选项：

在Path to Git executable里输入/usr/bin/git，如果不知道位置在哪里，可以通过下面的命令查询

#查看git的执行文件位置, 默认是在 /usr/bin/git
whereis git

yum install git # 安装git，如果之前没有安装的可以通过命令安装

2.NodeJS、Publish Over SSH和Deploy to container插件

(1).安装NodeJS、Publish Over SSH和Deploy to container插件

点击系统管理，再点击管理插件，切换到可选插件，分别搜索NodeJS、Deploy to container和Publish Over SSH，然后点击直接安装：


Publish Over SSH用于连接远程服务器

Deploy to container插件用于把打包的应用发布到远程服务器

(2).安装配置NodeJS

配置nodejs

自动下载会出现在构建任务的时候卡半天 (不推荐)

自动下载的NodeJS文件保存在/var/lib/jenkins/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/

手动下载NodeJS压缩包上传到服务器指定位置

我本地开发环境用的NodeJS是 v16.18.0版本，你们可以去https://nodejs.org/dist/ 页面去找你们对应的版本文件

#把下载好的压缩包上传到服务器的这个目录下面
/var/lib/jenkins/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/nodejs
#压缩
cd /var/lib/jenkins/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/nodejs
tar zxvf node-v16.18.0-linux-x64.tar.gz
配置环境变量
#编辑/etc/profile
vi /etc/profile

#在最后添加

#set nodejs env
export NODE_HOME=/var/lib/jenkins/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/nodejs/node-v16.18.0-linux-x64 #这个路径就是你压缩包放置的路径加上一个压缩包解压后的文件名
export PATH=$NODE_HOME/bin:$PATH

#用source命令是环境变量生效
source /etc/profile

这个时候可以查看到node和npm的版本号

node -v
npm -v
添加环境变量

查询系统环境变量： echo $PATH

[root@localhost /]# echo $PATH
/var/lib/jenkins/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/nodejs/node-v16.18.0-linux-x64/bin:/var/lib/jenkins/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/nodejs/node-v16.18.0-linux-x64/bin/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin

点击系统管理，再点击系统配置，点击左上角导航配置下拉框，点击全局属性选项：

找到环境变量

做如下配置：

(3).配置 Publish over SSH选项

发布项目到远程服务器需要先设置远程服务器的host、账号和密码。

点击系统管理，再点击系统配置，点击左上角导航配置下拉框，点击Publish over SSH选项：

需要配置Name、Hostname、Username、Remote Directory

账号认证可以使用密码、key文件、key内容

参数说明
| 字段 | 描述 |
| —————- | —————————- |
| Passphrase | 服务器的密码 |
| Path to key | 连接远程服务器密钥文件的路径 |
| Key | 密钥文件的内容 |
| Name | 自定义服务器名 |
| HostName | 服务器IP外网地址 |
| UserName | 服务器用户名 |
| Remote Directory | 连接上ssh后的默认路径 |

二、设置构建命令

1.新建工程–流水线模式

创建工程，选择流水线模式

2.新建工程–流水线模式

(1).勾选参数化构建过程

选择选项参数

然后配置如下：（可根据需求自定义）

(2).选择流水线

node{
    try{
        stage('拉代码') {
            if ("${BRANCHE_NAME}".contains("develop")) {
                checkout([
                    $class: 'GitSCM', 
                    branches: [[name: '*/develop']], 
                    userRemoteConfigs: [[credentialsId: 'd2e63495-a5b1-4d67-84c1-26cceb884439', url: 'https://gitee.com/tianyichuxin/ceshi.git']]
                ]) 
            }else{
                echo "${SERVER_NAME}" #可发布release版本
            }
        }
        stage('安装依赖构建') {
            sh """
                npm config set registry https://registry.npm.taobao.org/
                npm install --unsafe-perm
                npm install 
                npm run build --unsafe-perm
                cd /var/lib/jenkins/workspace/blog1/dist
                tar -zcvf taskorch-web.tar.gz  * 
            """ #blog1位工程名称， tar -zcvf taskorch-web.tar.gz  * 若是不需要压缩包，可以不需要这一步
        }
        stage('上传介质') {
            if ("${SERVER_NAME}".contains("9.136.205.247")) {
                sh "scp -r /var/lib/jenkins/workspace/blog1/dist/* root@9.136.205.247:/home/webapp"
            } else {
                echo "${SERVER_NAME}" #可发布到release环境
            }

        }
        stage('构建成功'){
            echo "构建成功"
        }
    }
    catch(err){
        echo "Caught: ${err}"
        currentBuild.result = 'FAILURE'
    }
}

credentialsId为git仓库的用户名，有期效，后期可重新生成。

至此，Jenkins构建vue项目已经完成了，后面就是手动点击发版构建了。

文章作者: 弈心
文章链接: https://blog.tianyichuxin.com/2022/10/28684.html
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 弈心 !
git jenkins gitlab
赏
评论
  目录