【Copy攻城狮日志】docker搭建jenkins拉取svn代码打包vue项目部署到nginx_jenkins 打包vue 成 docker 部署-程序员宅基地

技术标签: nginx  vue  jenkins  svn  基础  docker  

begins
↑开局一张图,故事全靠编↑

前言

打开搜索引擎输入『Copy攻城狮』,发现最新的一条记录已经是去年的4月,意味着我又有一年时间没有再总结成长了。习惯了“温水煮青蛙”的日子,无论是经验水平还是薪资收入,已经被同期的小伙伴远远地甩在了后头。开年至今,一直在家“云办公”的我,被各种打包发布需求困扰。由于种种原因,小作坊模式的开发团队代码托管依旧用的svn,无力改变也无力吐槽,我们项目是完完全全的前后分离,前端用的人人都会的Vue,之前都是美丽善良的测试妹妹用公司测试打包专用电脑自己纯手工打包、纯手工发布到服务器静态目录,然后纯手工测试。后来,打包这项艰巨的任务就落到前端这边了,重复的步骤让人感觉疲倦:本地电脑新建目录拉取svn代码–>安装npm依赖–>打包不同环境–>上传服务器静态目录,简单又繁琐的工作,加之通过EasyConnect连接公司内网的网速慢到我能绝望。终于,后端看不下去了,提出了要给我上docker的想法,可惜我前端这边根本就没用docker去部署,仅仅一个文件夹丢到nginx静态文件服务器下就行;后端又问了我打包命令之类的,后来就不了了之了。鉴于后端部署用的docker以及jenkins一键发布,我琢磨了一下,前端也能jenkins一键发布啊!不就是把我本地手工输入的npm命令丢给jenkins去做吗?说干就干,just do it!没有运维的我们撸起袖子就是干!有写得不当的地方拜托各位多多指正!

docker安装jenkins

尽管公司机器已经用docker部署了jenkins,秉着学习的态度,我用自己的乞丐版阿里云ECS再操作一遍,虽然不懂原来,人称『Copy攻城狮』可不是盖的,一顿copy操作,妥妥的8080端口就起了一个jenkins服务。关于docker的内容,我这里就不展开说,因为我也不会,具体可以关注下图雀社区热乎乎的docker教程,一杯茶的时间,上手 Docker,真的只用一杯茶的时间。那我这里就直接安装jenkins,更详细的安装文档请移步安装Jenkins。那我这边就简单三步走啦,三行命令分分钟起一个jenkins服务。

  • 拉取jenkins镜像

    docker pull jenkins/jenkins
    

    jenkins-1.png

  • 新建文件夹,用于磁盘挂载

    mkdir  /home/jenkins
    
  • 启动服务

    docker run -itd --name jenkins -p 8080:8080 -p 50000:50000   --privileged=true -v   /home/jenkins:/var/jenkins jenkins/jenkins
    

    jenkins-2.png

难得一把过,没有翻车没有bug。我这边首次打开会提示密码放在/var/jenkins_home/secrets/initialAdminPassword,当然服务器上是没有这个文件的,需要进到docker容器中。当然也可以直接通过安装日志查看:docker logs jenkins
docker ps -a docker exec -it jenkins /bin/bash cat /var/jenkins_home/secrets/initialAdminPassword
jenkins-3.png

恩恩,拿到密码了,赶紧Copy过去试一试!O98K,等待一口茶的时间,密码确认完毕,我们来到了初始化页面

jenkins-4.png

jenkins初始化翻车

当我点击install选项卡满怀期待的等待初始化完成的时候,时间一点一点的流逝,看着满屏的红叉和一动不动、动也不动的进度条,我开始焦虑,一种不祥的预感涌上心头。十分钟过去了,二十分钟过去了,三十分钟过去了…jenkins卡在Getting Started 哼,一定是撞墙了!
jenkins-5.png
一看到安装出的问题,第一感觉就是撞墙了,改配置文件吧!那就先进入jenkins容器呗。最开始以为在jenkins容器root目录下结果Permission denied,想到上一步密码存放在/var/jenkins_home/secrets/initialAdminPassword,那就进入/var/jenkins_home/目录看看,顺利地找到了/var/jenkins_home/updates/default.json ,满怀信心的想打开它看看究竟是怎样的配置导致jenkins插件安装这么慢。结果忘了docker容器默认没有vivim
jenkins-6.png

先通过docker cp把文件复制到刚刚新建的/home/jenkins目录下,查看下default.json究竟有些啥神配置?果然,“一枝红杏出墙来”,接下来的目标是将connectionCheckUrl字段改为墙内地址。

docker cp jenkins:/var/jenkins_home/updates/default.json /home/jenkins/
vi /home/jenkins/default.json

jenkins-7.png
考虑到我安装vivim还在坑里没爬出来,这里就通过在主环境上修改完再copy到容器中去,不过也掉坑里了,坑在直接复制不生效,我这里先进入jenkins容器备份一下default.json,将主环境修改好的配置文件复制到jenkins容器/tmp目录下,再移动到/var/jenkins_home/updates/目录下。再将配置文件复制到主环境验证一下是否替换成功。

docker cp /home/jenkins/default.json jenkins:/tmp/
docker exec -u root -it jenkins /bin/bash
mv /var/jenkins_home/updates/default.json /var/jenkins_home/updates/default.json.bak 
mv /tmp/default.json /var/jenkins_home/updates/default.json
exit
docker cp jenkins:/var/jenkins_home/updates/default.json  /home/jenkins/default.json.bak
vi /home/jenkins/default.json.bak

完成修改配置后重启一下,正常的话能进到账号注册的页面。如果还是显示很多红叉,右下角重试左边应该会有个跳过的选项。历经了几个世纪,终于把插件安装完了,新手上路!

jenkins-9.png

Vue项目预览

为了高度还原我们简单又繁琐的打包场景,我特意在码云(不是福报的那个哦)上新建了一个SVN项目,并初始化了一些简单配置,如区分环境、打包文件添加时间注释。关于Vue项目配置或者webpack配置可移步Vue CLI官方文档webpack配置的话推荐接地气的带你深度解锁Webpack系列
本次演示vuedemo项目地址:svn://gitee.com/hu-qi/vue-demo
vue.png

  • .env文件区分环境变量

    .env                # 在所有的环境中被载入,默认开发
    .env.test           # 只在测试模式中被载入
    .env.prod           # 只在生产模式中被载入
    
  • package.json
    通过定义不同指定区分运行/打包不同环境。

    "serve": "vue-cli-service serve --mode development",
    "serve:test": "vue-cli-service serve --mode test",
    "serve:prod": "vue-cli-service serve --mode prod",
    "dev": "vue-cli-service build --mode development",
    "build": "vue-cli-service build --mode prod",
    "test": "vue-cli-service build --mode test",
    
  • vue.config.js
    简单配置webpack输入目录,通过 BannerPlugin插件为每个 chunk 文件头部添加自定义的时间注释,以便区分是否为最新一次发布。

    const webpack = require('webpack');
    module.exports = {
        publicPath: './',
        outputDir: process.env.outputDir,
        configureWebpack: {
            plugins: [
                new webpack.BannerPlugin(new Date().toLocaleString())
            ]
        }
    };
    
  • 业务代码中获取环境配置
    通过process.env访问.env设置的环境配置参数

    
     <template>
         <div class="hello">
             <h1>{
         { msg }} - {
         { title }}</h1>
             <h2>API: {
         { apiUrl }}</h2>
         </div>
     </template>
    
     // ...
     <script>
     export default {
       name: 'HelloWorld',
       props: {
         msg: String
       },
       data() {
         return {
           title: '',
           apiUrl: ''
         }
       },
       created() {
         this.title = process.env.VUE_APP_TITLE
         this.apiUrl = process.env.VUE_APP_URL
       }
     }
     </script>
    
  • 运行预览
    通过package.json中定义的运行指令,能达到预期的效果。
    vue-2.png

  • 打包预览
    通过package.json中定义的打包,能分别打出devtestprod文件夹,并且文件中的时间注释符合预期。
    vue-3.png

  • 发布到nginx
    这里我依旧通过docker安装nginx,将打包出来的文件夹上传到放到nginx的静态目录下实现发布。这里docker安装nginx我也只是简单安装实践:

    docker pull nginx // 拉取nginx
    docker run -d --name nginxtest -p 80:80 nginx // 启个test验证配置
    mkdir -p /home/nginx/{conf,html,logs}  // 宿主新建配置文件夹
    docker cp nginxtest:/etc/nginx/nginx.conf /home/nginx/conf/nginx.conf // 复制配置文件
    docker stop nginxtest // 停止nginxtest
    docker rm nginxtest // 删除nginxtest
    docker run  --name nginx -d -p 80:80 -v /home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /home/nginx/logs:/var/log/nginx  -v /home/nginx/html:/usr/share/nginx/html nginx // 运行正式nginx并挂载到宿主
    

    只需将打包出来的文件丢到宿主的/home/nginx/html下就能正常访问了。我这里上传的prod文件夹,所以可以通过***/prod访问。

    vue-4.png

jenkins打包发布Vue项目

回顾一下测试妹妹纯手工打包发布的步骤:从svn拉取代码–>安装npm install依赖包–>npm run build打包prod–>将prod上传到服务器nginx静态目录(包括备份上一个版本)。通过学习和实践,通过给jenkins安装一些插件,我们能够轻松的拉取代码、安装NodeJS、连接服务器执行shell,构建好流程之后只是点下按钮,所有的事统统交给jenkins,再也不怕测试妹妹找我打包了。

  • jenkins安装插件及nodejs
    我这里根据我们的打包需求安装的插件主要有Subversion Plug-inPublish Over SSHNodeJS Plugin。插件安装在系统管理–>插件管理–>可选插件。搜索对应的插件进行安装。
    vueDemo-publish-pluginstall.png
    nodejs的安装在系统管理-全局工具配置-NodeJS,默认是没有这个选项的,安装了NodeJS Plugin就会有了,这里我安装的是默认的Node版本,一般根据实际情况设置,另外设置镜像 cnpm --registry=https://registry.npm.taobao.org
    vueDemo-publish-install-nodejs.png

  • Publish over SSH设置
    我们安装了Publish Over SSH插件,在系统管理–>系统设置能找到对应的设置位置,这里配置一下我们要部署的服务器。后面步骤我们通过执行shell脚本在部署的服务器中打包发布。
    vueDemo-publish-addsshservers.png

  • 配置jenkins构建任务
    如果您也有幸苦于打包,您一定和我一定对于一些简单的rm -rfmvtar等命令已经存在你深深的脑海。我这里新建工程命名为vueDemo\-prod。选择对应的工程–>配置即可进入工程配置。首先General我配置的是丢弃旧的构建、保持3天构建天数、保持10个构建的最大;然后源码管理我选择从svn拉取代码。
    vueDemo-publish-1.png
    再然后构建环境我们使用之前安装的node,用于后面步骤的打包。
    vueDemo-publish-2.png
    环境有了,再然后就是构建,构建这里我们选执行shell,命令主要和前端项目配置的打包命令一致,然后再压缩,方面后续上传。
    vueDemo-publish-3.png
    最后构建后操作就是连接到发布服务器,依旧以shell命令的形式执行文件上传、备份、解压。确保打包出来的文件夹最终发布到/home/nginx/html下。
    vueDemo-publish-4.png

    基本上一套下来,就没太大问题了。应用保存一下,点击立即构建。一杯茶的时间,等待jenkins构建成功!
    vueDemo-publish-5.png

关于调试

往往前方的路不一定一路顺风,通过上面的图能看出即使构建成功了,我也踩了不少坑。通过前面几次构建失败的日志,我们能清晰的定位到问题并予以解决,当然整个流程也十分方便调试。工程的首页面板中的工作空间能查看具体的代码,点击某个构建历史进去之后查看控制台输出能看到每次构建失败的具体原因。我遇到过的问题也不少,包括node安装失败,时间不是标准时间,以及一些shell命令书写不当导致构建失败;甚至还遇到docker restart jenkins依旧无法网页的问题。失败并不可怕,可怕的是失败之后不愿再尝试!

尾声

在家“云办公”的这段时间,我有很多机会来写这篇实践记录文章,奈何惰性太强,而且实践过程中也屡次碰壁。不过,最终还是有幸产出这篇水文,期待评论区各位大佬批评指正!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/sinat_34365157/article/details/104983143

智能推荐

Window Operations(窗口函数的使用)_前端中windowoperate-程序员宅基地

文章浏览阅读8.8k次。定时的进行一个时间段内的数据处理Spark Streaming also provides windowed computations, which allow you to apply transformations over a sliding window of data. The following figure illustrates this sliding window.As shown in the figure, every time the window slides over a_前端中windowoperate

react之redux的学习_react-redux中什么是容器组件,什么是ui组件-程序员宅基地

文章浏览阅读170次。为什么需要redux管理的状态越来越多,越来越复杂。状态包括服务器返回、缓存的数据、用户操作产生的数据、UI的展示状态等。管理不断变化的state是非常困难的。一个状态的变化引起另一个状态的变化,UI也会引起状态的变化。react帮助我们管理视图,state需要我们自己管理。帮助我们管理state的容器。核心理念storeactionreducer三大原则单一数据源整个项目的state存在一个object tree中,并且这个object tree之存储在store中_react-redux中什么是容器组件,什么是ui组件

ajax请求中url写法的问题(相对路径和绝对路径)_ajax的url路径怎么写-程序员宅基地

文章浏览阅读8.1k次,点赞10次,收藏17次。一.开发中遇到的问题在一个jsp页面中,一个jsp页面中ajax请求中url是这样写的很明显我是想要向controller中发送请求,我的controller中的RequestMapping是这写的我之前发送ajax请求中的url都是写成/system/login这样,但是这里我不太清楚为什么直接写成login可以访问,但是写成/system/login却不能访问二.问题分析在查看浏览器检查中,发现没有改动url即写成’login’时,是可以正确访问的到的。当我改为/system/logi_ajax的url路径怎么写

WIN7/win10电脑清理文件、拷贝文件很慢的处理方法_电脑文档整理慢-程序员宅基地

文章浏览阅读1.5k次。我们在使用WIN7/win10电脑清理文件、拷贝文件的时候,有些时候莫名其妙变慢了,按照以下方法处理即可。_电脑文档整理慢

基于k8s安装 kubeshpere3.0_kubeshpre3.0官网-程序员宅基地

文章浏览阅读762次。基于k8s安装 kubeshpere3.0前提,确保正确的安装了k8s,包括 nfs、calico、sc、metrics-server 等可以查看我的另一篇先安装k8skubeshpere3.0 的安装也可参考官网指南下载安装kubeshpere文件wget https://github.com/kubesphere/ks-installer/releases/download/v3.0.0/kubesphere-installer.yamlwget https://github.com/kub_kubeshpre3.0官网

linux(nat)网络不通解决办法_linuxnat没网-程序员宅基地

文章浏览阅读1.3k次。解决办法查看是否有虚拟网卡查看是否有IP地址dhcp获取地址设置固定IP地址查看是否有虚拟网卡如果有vmnet8查看是否有IP地址1.命令ip a(自带)其中ens160 ens224是网卡名字2.ifconfig 最小化安装没有(需要安装)yum install -y net-tools.x86_64dhcp获取地址这是随机的,可能地址会变化[root@localhost ~]# dhclient设置固定IP地址[root@localhost ~]# nmcli c_linuxnat没网

随便推点

Mysql锁-程序员宅基地

文章浏览阅读85次。一:Mysql支持的锁类型和特点?1:表级锁:开销小,粒度大,加锁快,并发度低,发生锁冲突的概率最高2:行级锁:开销大,粒度小,加锁慢,并发度大,发生锁冲突的概率最低3:页面锁,开销和加锁时间介于表级锁和行级锁之间,会出现死锁。二:不同存储引擎锁支持的锁类型。主要分析inndb和myisam存储引擎。myisam使用的是表级锁,inndb支持的是行级锁好表级锁。2.1:myisam表锁:myisam也有两种锁模式:表共享读锁和表独占写锁。表共享读锁:不会阻塞其他用户对同一张表的读请求。表

系统安装部署-低配版_系统安装与部署-程序员宅基地

文章浏览阅读115次。系统安装部署环境需求服务器 linux(centos、redhat等)运行环境 jdk.18数据库 mysql 5.6访问代理 nginx文件目录说明zy_mysql.sql 创建数据库和数据表zy_auxiliary_service.jar 服务端程序html 前端页面zy_auxiliary.service linux 服务启动脚本部署流程数据库脚本​ 登录数据库,直接运行zy_mysql.sql文件即可linux脚本创建本地文件夹mkdir -p /home_系统安装与部署

dhu复试基础——51 开关灯_51dhuk-程序员宅基地

文章浏览阅读2.1k次。(函数的简单应用)51 开关灯作者: 孙辞海 时间限制: 5S章节: 一维数组问题描述 :有N个灯放在一排,从1到N依次顺序编号。有N个人也从1到N依次顺序编号。1号将灯全部关闭,然后2将凡是2的倍数的灯打开;3号将凡是3的倍数的灯做相反处理(该灯如为打开的,则将它关闭;如关闭的,则将它打开)。以后的人都和3号一样,将凡是自己标号倍数的灯做相反处理。试计算第N个人操作后,哪些灯是点亮的。(..._51dhuk

爬取bili番剧相关内容_blbl 视频怎么爬取-程序员宅基地

文章浏览阅读348次。我知道有些二次元肥仔就是喜欢看这些二次元东西,反正我是没看过,不知道你们怎么样呢?今天就给大家分析一下他的视频列表页首先呢,打开网页,借用开发者工具,检查分析,看一下网页源代码中有没有你想要的信息,有的话直接解析,没有的话点开网络,查看请求,根据关键字搜索,看一下请求返回的数据是什么样的。如果是json的话,直接向这个请求的url发起请求。然后,将请求来的数据用json.loads()..._blbl 视频怎么爬取

一个自建的Java命令行解析参数类ArgumentsParser_java 解析main传递的参数的工具-程序员宅基地

文章浏览阅读649次。文章目录1 简介2 参数格式定义3 类功能介绍3.1 初始化3.2 主要函数4 源代码5 输出结果6 小结1 简介在前文中,介绍了一个Python中的 argparse.ArgumentParser 类,能够实现对命令行输入参数的控制。搜索了一下,发现在Java中并没有提供相应的类。因此,为了在Java实现类似的功能,本文编写了一种用于处理main函数中的输入参考 String[] args 的类 ArgumentsParser。2 参数格式定义首先,对参数进行定义。一般而言,命令行中的输入参数通用_java 解析main传递的参数的工具

flex布局下文字超出隐藏失效解决办法_flex溢出隐藏不生效-程序员宅基地

文章浏览阅读1.5k次。1、flex盒子设置min-width:0;2、文字内容外套一层容器;_flex溢出隐藏不生效

推荐文章

热门文章

相关标签