苦海学说

Personal Blog
Exchange Learning

前端自动化部署For Jenkins

使用本地或者远程Jenkins发布

1、登录
2、点击任务列表中:选择对应的项目,进入任务详情
3、点击左边Build Now,会在Build History新增一个构建任务,等待它执行完毕(会执行拉取仓库代码,安装模块、打包、传输包到远端服务器,解压到Nginx等等)
4、可以点击最新执行的任务,查看进度(console out)

前端自动化部署For Jenkins

一、安装Jenkins

参考教程:https://segmentfault.com/a/1190000004639325

sudo wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins.io/redhat/jenkins.repo
sudo rpm --import http://pkg.jenkins-ci.org/redhat/jenkins-ci.org.key
yum install jenkins

启动报错,自行百度
https://cloud.tencent.com/developer/article/1334861

二、登录Jenkins系统进行全局配置 Manage Jenkins

System Configuration
    1、Manage Plugins
        a、安装插件NodeJS、Publish over SSH
    2、Configure System
        a、系统管理员邮件地址
        b、Extended E-mail Notification 自动发送邮件配置
            Default Content Type HTML
            Default Subject 【前端自动化构建部署通知】$PROJECT_NAME - Build # $BUILD_NUMBER - $BUILD_STATUS!
            Default Content
                <!DOCTYPE html>
                <html>
                <head>
                    <meta charset="UTF-8">
                    <title>${ENV, var="JOB_NAME"}-第${BUILD_NUMBER}次构建日志</title>
                </head>
                <body leftmargin="8" marginwidth="0" topmargin="8" marginheight="4" offset="0">
                    <table width="95%" cellpadding="0" cellspacing="0"
                        style="font-size: 11pt; font-family: Tahoma, Arial, Helvetica, sans-serif">
                        <tr>
                            本邮件由系统自动发出,无需回复!<br />
                            各位同事,大家好,以下为${PROJECT_NAME }项目构建信息</br>
                            <td>
                                <font color="#CC0000">构建结果 - ${BUILD_STATUS}</font>
                            </td>
                        </tr>
                        <tr>
                            <td><br />
                                <b>
                                    <font color="#0B610B">构建信息</font>
                                </b>
                                <hr size="2" width="100%" align="center" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <ul>
                                    <li>项目名称: ${PROJECT_NAME}</li>
                                    <li>构建编号: 第${BUILD_NUMBER}次构建</li>
                                    <li>触发原因: ${CAUSE}</li>
                                    <li>构建状态: ${BUILD_STATUS}</li>
                                    <li>构建日志: <a href="${BUILD_URL}console">${BUILD_URL}console</a></li>
                                    <li>构建 Url : <a href="${BUILD_URL}">${BUILD_URL}</a></li>
                                    <li>工作目录: <a href="${PROJECT_URL}ws">${PROJECT_URL}ws</a></li>
                                    <li>项目  Url: <a href="${PROJECT_URL}">${PROJECT_URL}</a></li>
                                </ul>
                                <h4>
                                    <font color="#0B610B">失败用例</font>
                                </h4>
                                <hr size="2" width="100%" />
                                $FAILED_TESTS<br />
                                <h4>
                                    <font color="#0B610B">最近提交(#$SVN_REVISION)</font>
                                </h4>
                                <hr size="2" width="100%" />
                                <ul>
                                    ${CHANGES_SINCE_LAST_SUCCESS, reverse=true, format="%c", changesFormat="<li>%d [%a] %m</li>"}
                                </ul>
                                详细提交: <a href="${PROJECT_URL}changes">${PROJECT_URL}changes</a><br />
                            </td>
                        </tr>
                    </table>
                </body>
                </html>
        c、Publish over SSH // 配置服务器地址
Global Tool Configuration 全局工具配置配置
    1、NodeJS // 置配置NodeJS

三、创建Job并进行项目构建配置

1、创建一个Freestyle project任务
2、配置
    a、填项目描述,配置Discard old builds
    b、源码管理:选择svn | git
    c、构建环境:选择nodejs
    d、构建 
            Execute shell // 构建命令脚本编写
                echo $PATH
                node -v
                npm -v
                npm install
                npm run build #或者npm run build-sit
                rm -rf dist.tar.gz
                tar -zcvf dist.tar.gz dist
            Send files or execute commands over SSH // 编写发布部署包到服务器的脚本
                Source files    
                    dist.tar.gz
                Remote directory    
                    /nginx
                Exec command
                    cd /opt/nginx                #进入ngnix目录
                    rm -rf release$(date +%Y-%m-%d).tar.gz  #删除当天之前的压缩包
                    cp dist.tar.gz release$(date +%Y-%m-%d).tar.gz  #拷贝备份发布版本
                    tar -zxvf dist.tar.gz        #解压dist.tar.gz
                    rm -rf dist.tar.gz           #删除dist.tar.gz代码包
                    rm -rf html/*                #删除html里面的内容
                    cp -r dist/* ./html          #拷贝dist下内容到html里面
                    rm -rf dist                  #删除dist
    e、构建后操作
            Editabel Email Notification // 邮件通知配置
本原创文章未经允许不得转载 | 当前页面:苦海学说 » 前端自动化部署For Jenkins

评论