docker + Jenkins前端自动化部署完整实践

    技术2022-07-10  130

    环境

    我是用的是阿里云主机,系统版本:ubuntu 18.04 lts

    安装Docker

    参考我的另一篇,Ubuntu下Docker安装,设置镜像加速,基础用法


    安装Jenkins

    这里使用的是Docker Hub官方的 jenkins/jenkins 镜像, 还有一个 jenkinsci/blueocean 镜像开箱自带blueocean界面(简洁好看,但是没自带界面直观)。

    拉取最新镜像

    $ docker pull jenkins/jenkins:lts

    查看已安装镜像

    $ docker images REPOSITORY TAG IMAGE ID CREATED SIZE jenkins/jenkins lts 60f81923d099 11 days ago 658MB hello-world latest bf756fb1ae65 5 months ago 13.3kB

    新建文件夹并设置权限备用

    mkdir /var/jenkins_home chmod -R 777 /var/jenkins_home

    启动容器

    $ docker run -d -p 8080:8081 --name web_jenkins -v /var/jenkins_home:/var/jenkins_home jenkins/jenkins:lts -d 指后台运行-p 8080:8081 指将容器内8081端口映射到主机8080端口上-name web_jenkins 容器命名为 web_jenkins-v /var/jenkins_home:/var/jenkins_home 指将容器内部地址 /var/jenkins_home 映射到主机 /var/jenkins_home 处jenkins/jenkins:lts 指定镜像

    查看效果

    ip地址:8080 按照提示密码在 /var/jenkins_home/secrets/initialAdminPassword中,拿到它。

    # 获取密码 $ cat /var/jenkins_home/secrets/initialAdminPassword

    输入密码 -> 继续。

    等待安装插件, 失败了也没关系,后面可以再装,等待安装的过程中可以做一下准备工作:

    vuecli 生成新项目 helloworld git 新建仓库 将helloworld工程push到git仓库master分支,我用的是码云

    新建任务以及配置

    配置SSH插件

    系统管理 -> 插件管理 -> 可选插件 -> 搜索 Publish Over SSH -> 立即安装 系统管理 -> 系统配置 -> 找到Publish Over SSH

    SSH可以使用密匙或者用户名密码 部署服务器可以是另一台机器也可以是本机

    源码管理

    找到源码管理,选择Git

    构建环境

    找到构建环境,选择Provide Node & npm bin/ folder to PATH,选择nodejs版本,其他不变。如果没有Nodejs的话,可以在系统设置 -> 插件管理里面安装, 也可以使用dacker新建一个nodejs容器然后调用,教程点这里。

    构建命令

    实际构建过程中,进行到这一步jenkins已经从我们设置的、的git仓库中pull到全部代码,我们需要让服务器执行安装依赖,打包等命令以获取到生产环境代码。

    找到构建 -> 增加构建步骤 -> 选择‘执行shell’

    构建后操作

    实际构建过程中,生产环境代码已经被打包并被压缩成dist.tar.gz,我们需要将其拿出然后通过SSH发送到部署服务器,(一般来说打包环境和实际部署服务器是分开的)然后控制部署服务器运行解压命令,整个打包过程就完成了。 找到构建后的操作,增加构建后操作步骤 -> 选择 send build artu=ifacts over ssh

    Remote directory:要部署的目录,这个目录是相对于之前Publish Over SSH设置的根目录的,比如前面我们设置的是/home/frontend,Remote directory设置的是 /helloworld,则实际目录是/home/frontend/helloworldExec command : 运行命令进入目标目录,解压dist.tar.gz,解压完删除dist.tar.gz。

    填写完后保存,任务配置到这一步就完成了。

    配置完成,测试一下

    主页选中helloworld工程,进入工程详情页,选中左侧构建工程,可以看到左下方进度条,表示正在自动构建。构建完成后去部署服务器看一下有没有打包好的生产环境代码。

    快速回滚

    如果不幸新版本上线后项目运行出现故障,这个时候要紧急回滚,人工操作的话要协调,速度慢,可能会出错,没有日志。不如也交给Jenkins。可以学习一下参数化构建。

    使用Generic Webhook Trigger,实现push时自动发布新版。

    版本测试还要手动发布太麻烦? 试试Generic Webhook Trigger插件吧,配合Git的Webhook,它能实现自动发布新版本。你还能根据不同的分支定制不同的操作。

    Processed: 0.014, SQL: 9