前端工程化：保姆级教学 Jenkins 部署前端项目

# 下载 Jenkins 资源
sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat/jenkins.repo
# 获取并导入信任 的包制作者的秘钥
sudo rpm --import https://pkg.jenkins.io/redhat/jenkins.io.key
# 升级 yum 源中的所有包
sudo yum upgrade
# Jenkins 依赖于 java 所以需要安装 JDK
sudo yum install java-11-openjdk
# 安装 Jenkins
sudo yum install jenkins
复制代码

如果最终 Jenkins 没有找到包而导致没有安装成功，检查第一步和第二部执行结果并重新执行。

可以使用 systemctl 命令管理 Jenkins 服务 systemctl

# 启动 Jenkins 服务
systemctl start jenkins
# 重启 Jenkins 服务
systemctl restart jenkins
# 停止 Jenkins 服务
systemctl stop jenkins
# 查看 Jenkins 服务状态
systemctl status jenkins
复制代码

启动服务后访问服务器地址 + 8080 端口，Jenkins 默认为 8080 端口。

// 自定义 钉钉插件 的 错误信息和成功信息
def successText = [
    """ ### 新的构建信息，请注意查收""",
    """ ${env.JOB_BASE_NAME}任务构建成功 ，点击查看[构建任务 #${env.BUILD_NUMBER}](http://106.14.185.47:8080/job/${env.JOB_BASE_NAME}/${env.BUILD_NUMBER}/)"""
]
def failureText = [
    """ ### 新的构建信息，请注意查收""",
    """ ${env.JOB_BASE_NAME}任务构建失败 ，点击查看[构建任务 #${env.BUILD_NUMBER}](http://106.14.185.47:8080/job/${env.JOB_BASE_NAME}/${env.BUILD_NUMBER}/)"""
]
// 1，侦听 github push 事件
properties([pipelineTriggers([githubPush()])])

pipeline {
    agent any
    // 环境变量定义。
    environment {
        GIT_REPO = 'http://github.com/vue-ts-vite-temp.git'
    }
    stages {
        // 2，拉取 github 代码，通过 GitSCM 侦听 push 事件。
        stage('Pull code') {
            steps {
                checkout(
                    [
                        $class: 'GitSCM',
                        branches: [[name: '*/main']],
                        extensions: [],
                        userRemoteConfigs: [
                            [
                                credentialsId: '381325e4-0f9c-41ea-b5f6-02f8ea2a475a',
                                url: env.GIT_REPO
                            ]
                        ],
                        changelog: true,
                        poll: true,
                    ]
                )
            }
        }
        stage('Install and build') {
            steps {
                // 3，前面安装过的 nodejs 插件使用
                nodejs('v14.19.0') {
                    sh 'npm install yarn -g'
                    sh 'yarn install'
                    sh 'yarn build'
                }
            }
        }
        stage('Pack') {
            steps {
                sh 'tar -zcvf dist.tar.gz dist/'
                sh 'rm -rf dist/'
            }
        }
        stage('Deploy') {
            steps {
                // 4，前面下载的 Publish Over SSH 插件的使用
                sshPublisher(
                    publishers: [
                        sshPublisherDesc(
                            configName: 'aliyun-dev',
                            transfers: [
                                sshTransfer(
                                    cleanRemote: false,
                                    excludes: '',
                                    execCommand: '''
                                        cd /usr/share/nginx/html/
                                        tar -zxvf dist.tar.gz
                                        rm -rf dist.tar.gz
                                    ''',
                                    execTimeout: 120000,
                                    flatten: false,
                                    makeEmptyDirs: false,
                                    noDefaultExcludes: false,
                                    patternSeparator: '[, ]+',
                                    remoteDirectory: '/usr/share/nginx/html/',
                                    remoteDirectorySDF: false,
                                    removePrefix: '',
                                    sourceFiles: 'dist.tar.gz'
                                )
                            ],
                            usePromotionTimestamp: false,
                            useWorkspaceInPromotion: false,
                            verbose: false
                        )
                    ]
                )
            }
        }
    }
    post {
        success {
            // 5，DingTalk 插件的使用。
            dingtalk (
                robot: '1314',
                type: 'ACTION_CARD',
                title: 'Jenkins构建提醒',
                text: successText,
                btns: [
                    [
                        title: '控制台',
                        actionUrl: 'http://106.14.185.11:8080/'
                    ],
                    [
                        title: '项目预览',
                        actionUrl: 'http://github.com/'
                    ],
                ],
                at: []
            )
        }
        failure {
            dingtalk(
                robot: '1314',
                type: 'ACTION_CARD',
                title: 'Jenkins构建提醒',
                text: failureText,
                btns: [
                    [
                        title: '控制台',
                        actionUrl: 'http://106.14.185.11:8080/'
                    ],
                    [
                        title: '项目预览',
                        actionUrl: 'http://github.com/'
                    ],
                ],
                at: []// 这里是手机号多个之间,隔开
            )
        }
    }
}

这么多内容手写无疑是很难受的，好在 Jenkins 提供了一些帮助工具。访问地址为：Jenkins地址 + /job + 当前任务 + /pipeline-syntax/，例如：http://localhost:8080/job/dev-deploy/pipeline-syntax/，或者进入任务构建页面，点击流水线语法进入

进入该页面后请熟读并背诵以下三项。重点放到第一项。

回头看上面的脚本注释都带有序号。根据注释序号开始解释。

1，在片段生成器中选择 properties: Set job properties 生成代码片段。由于只是使用了 git hook trigger 所以要对生成的片段稍作修改。

2，如果不是为了侦听 github push 选择 git: Git 即可，但现在应该选择 checkout: Check out from version control，随后填写信息生成代码即可。

3，选择 nodejs: Provide Node & npm bin/folder to Path

4，选择 sshPublisher: Send build artifacts over SSH，像上面流水线一样配置之后直接生成代码即可。

5，DingTalk 文档

总结： 通过插件生成的代码，稍作组合就成为了完整的配置。但整体难度还是要略高于 Freestyle 任务。毕竟生成的代码有部分也不是拿来即用的，并且 Pipline 基本语法一定要有所掌握。不然生成的代码都不晓得放到哪里合适。

作者：DoubleX
链接：https://juejin.cn/post/7102360505313918983