Jenkins部署前端服务

「这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战」

一、Jenkins简介

官方说明：

Jenkins是一个开源软件项目，是基于Java开发的一种持续集成工具，用于监控持续重复的工作，旨在提供一个开放易用的软件平台，使软件项目可以进行持续集成。

官网地址：

www.jenkins.io/index.html

总之：

使用Jenkins，可以实现一键部署发布。

Jenkins从SVN拉取代码 > 部署至发布项目的服务器 > 并启动服务。代替人工运行buil命令打包 > 上传至服务器 > 重启服务。

二、安装Jenkins

后端已在服务器上安装了Jenkins，详细安装过程不赘述，实话是我也不会。

三、安装插件（nodejs）

• 因需要ssh上传包至服务器，需要publish over ssh插件。
• 因前端使用node.js打包，需要nodejs插件。
• 前者，后台已安装，在此不赘述，主要讲解nodejs插件安装过程。

1、安装nodejs

依次点击Manage Jenkins > Manage Plugins

在可选插件tab，搜索nodejs，选中后点击安装按钮。

此处已安装，所以无法搜索到。

安装完成后，可在已安装搜索到。

2、配置nodejs

依次点击Manage Jenkins > Global Tool Configuration

往下翻，找到nodejs。

点击nodejs安装按钮。

填写别名，用于后续配置打包时候选择，选中相应使用的nodejs版本号，点击应用按钮。

四、配置服务器

配置项目发布需使用的服务器。

依次点击Manage Jenkins > Configure System。

往下翻到SSH Servers，已添加的服务器就无需再添加了，后续配置直接选用即可，若此处未添加的可添加一个服务器。

点击新增按钮。

服务器命名，用于后续配置选择，输入服务器IP和登录服务器的用户，点击高级，输入服务器的用户密码。

输入密码后，点击测试按钮，可测试服务器的连通性，校验配置是否正确。

连接成功后点击应用按钮即可。

五、配置项目

在tab页选中html，点击左侧新建Item。

输入任务名称，建议命名：服务器IP-服务说明。

选择第一个Freestyle project，点击OK。

依次进行项目的配置：

• General：通用信息，不重要，可不配置。
• 源码管理：因我们项目使用SVN进行代码的版本管理，所以选择Subversion，配置该项目的SVN地址，添加一个连接SVN的用户。Jenkins将使用该用户去该SVN地址拉取代码。

• 构建环境：勾选Provide Node & npm bin/ folder to PATH，选择之前配置的nodejs。

构建：

1、点击增加构建步骤，选择Execute shell。

也就是Jenkins从SVN拉下代码后，需要执行什么命令进行打包和压缩。

输入脚本：

npm install # 因为node_modules没有提交所以需要install
npm run build # npm命令打包项目
rm -rf dist.tar.gz # 删除上一个\已存在的dist压缩包
tar -zcvf dist.tar.gz dist # 将新打的dist包进行压缩
复制代码

2、再次点击增加构建步骤，选择Send files or execute commands over SSH。

选择已配置的、要发布的服务器。

Source files输入需要上传的包名字。

Remote directory输入要上传至服务器的哪个位置。

Exec command输入上传完成后需要执行的脚本，包括备份、启动等。

输入脚本：

cd /usr/local/nginx/html # 确保进入对应包目录
mv dist dist.`(date +%Y%m%d_%H:%M)` # 备份上一个\已存在的dist.当前日期_时间
tar -zxvf dist.tar.gz # 解压dist压缩包
rm -rf dist.tar.gz # 解压完成后删除tar包
cd ../sbin
./nginx -s stop # 强制停止nginx
./nginx # 启动nginx
复制代码

点击应用，项目创建完成。

六、一键部署项目

点击左上角Dashboard，回到主界面。

点击html页签，选则要发布的项目，点击运行按钮即可。

左下角的构建执行状态会有正在发布的项目，点进去可以查看执行情况，部署失败根据日志定位问题。

完成以上的配置后，只需点击项目的运行按钮，Jenkins就拉下最新的代码进行部署，后续还可以进行自动定时部署等配置，有兴趣的自行摸索。

注意：需要提交代码到SVN，因为Jenkins拉的是SVN上的代码，如果自己本地暂时不想提交，那你自己手动部署吧。

七、附创建pipeline类型的项目

原来（五、配置项目）是创建Freestyle project类型的项目，接下来是讲解如何创建Pipeline类型项目。

先看一下Pipeline项目的差别，建好以后长得不一样，每次构件，每个步骤列得比较清楚，至于如何创建步骤如下。

1、在对应tab页签下，点击左侧新建Item。

2、输入任务名称，建议命名：服务器IP-服务说明。

选择第三个Pipeline，点击OK。

3、输入描述即可

This project is parameterized，可以不勾选，该处勾选并选择了布尔类型的参数，随便输入了一个“防止多次启动”的参数名称，目的是因为，创建好以后点击启动按钮页面不跳转，容易重复点击，添加了该参数页面会跳转，需要二次点击开始构建才正式启动项目。参数无实际意义，只是为了防止多次点击启动。

4、输入脚本即可

附脚本和说明：（对应项目各自进行修改）

pipeline {
  agent any

  environment {
    REPOSITORY = "" // SVN仓库地址
    SVN_ID = "" // SVN用户凭证(Manage Jenkins > Manage Credentials可查看)
    t_ssh = "" // 远程部署服务器 需要在该服务器设置Jenkins免密登录 具体不是我操作的 我不清楚
    t_dir = "" // 远程部署文件夹目录
    micro_name = "" // docker里配置的该服务的名称 定义变量在这个前面便于不同的项目进行修改
  }

  stages {

    stage('获取代码') {
      steps {
        echo "start fetch code from ${REPOSITORY}"
        // deleteDir()
        checkout([$class: 'SubversionSCM',
          additionalCredentials: [],
          excludedCommitMessages: '',
          excludedRegions: '',
          excludedRevprop: '',
          excludedUsers: '',
          filterChangelog: false,
          ignoreDirPropChanges: false,
          includedRegions: '',
          locations: [[
            cancelProcessOnExternalsFail: true,
            credentialsId: SVN_ID,
            depthOption: 'infinity',
            ignoreExternalsOption: true,
            local: '.',
            remote: REPOSITORY
          ]],
          quietOperation: true,
          workspaceUpdater: [$class: 'UpdateUpdater']])
      }
    }
    stage('构建代码') {
      steps {
        echo "start package"
        // 打包脚本 视情况修改
        sh """
        cd ${ WORKSPACE }
        sed - i 's/\\("microServe": "\\).*/\\IP"/g' public / static / microConfig.json
        npm install
        sleep 1s
        npm run build
        rm - f dist.tar.gz
        tar - zcvf dist.tar.gz dist
        """
      }
    }
    stage('复制文件') {
      steps {
        // 上传包脚本 视情况修改
        sh """
        echo "start copy file"
        scp dist.tar.gz ${ t_ssh }: ${ t_dir }
        ssh ${ t_ssh } "
        cd ${ t_dir };
        mv ${ t_dir } /dist ${t_dir}/dist.`(date +%Y%m%d_%H:%M)`;
        tar - zxvf dist.tar.gz;
        rm - rf dist.tar.gz
        "
        """
      }
    }
    stage('部署') {
      steps {
        // 启动包脚本 视情况修改
        sh """
        echo "start deploy"
        ssh ${ t_ssh } 'docker restart ${micro_name}'
        """
      }
    }
  }

  post {
    always {
      echo '构建结束...'
    }
    success {
      echo '恭喜您，构建成功！！！'
    }
    failure {
      echo '很抱歉，构建失败！！！'
    }
    unstable {
      echo '该任务已经被标记为不稳定任务....'
    }
    changed {
      echo ''
    }
  }
}
复制代码

其他说明：

a、// deleteDir()

删除Jenkins拉包所在文件夹的所有文件，经过测试，没有必要删除，Jenkins是从SVN上update文件，已删除的会被删除，且npm打包的时候也会删除dist文件夹。

注释删除所有文件的好处在于，不会删除node_moudules里面的包，这样npm install的时候速度快很多。

b、npm install

如果涉及私库的包，只需在后面跟上私库地址即可。

比如：npm install --registry http://IP:4873

c、sed -i 命令是微前端的主应用里需要写明子应用的服务地址，然而不同的项目服务地址不同，所以采用该方法动态写入。

正则表达式在文件中匹配并替换microServe的IP地址，需要注意的是，该步骤需要在npm run build打包以前执行。

sed -i 's/\\("microServe": "\\).*/\\IP"/g' public/static/microConfig.json
复制代码

5、点击应用，完成创建。

回到第一步的tab页签，点击启动按钮，再点击“开始构建”按钮，即可完成项目的一键发布。

参考文档：

liubing.me/jenkins-vue… www.jianshu.com/p/93238a7ad…