jenkins|Jenkins+Docker+github+Vue自动化部署 centos|docker|github|jenkins|docker

一、介绍
1、Jenkins Jenkins是一个独立的开源软件项目，是基于Java开发的一种持续集成工具，用于监控持续重复的工作，旨在提供一个开放易用的软件平台，使软件的持续集成变成可能。前身是Hudson是一个可扩展的持续集成引擎。可用于自动化各种任务，如构建，测试和部署软件。
Jenkins特点：
开源免费;
跨平台，支持所有的平台;
master/slave支持分布式的build;
web形式的可视化的管理页面;
安装配置超级简单;
tips及时快速的帮助;
已有的200多个插件

2、docker
Docker 是一个开源的应用容器引擎，基于 Go 语言并遵从 Apache2.0 协议开源。
【jenkins|Jenkins+Docker+github+Vue自动化部署】Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任何流行的 Linux 机器上，也可以实现虚拟化。
容器是完全使用沙箱机制，相互之间不会有任何接口（类似 iPhone 的 app）,更重要的是容器性能开销极低。

3、Vue
Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
本文介绍Jenkins的docker自动化构建、发布并部署Vue项目的一个流程。
二、环境配置需要centos7系统安装的工具如下：

jdk v1.8
maven v3.6
git v2.3
nodejs v14.17.6
docker v1.13 docker安装直达
jenkins Jenkins安装直达

上面工具可自行安装，jdk、maven、nodejs、git、也可以后面通过jenkins自动安装。
接下来开始操作：
1.安装maven打包插件进入：
Jenkins>系统管理>插件管理>可选插件，搜索NodeJS Plugin进行安装。

文章图片

安装插件

文章图片
等待安装，并进行重启

文章图片

（2）进行全局工具配置：
Jenkins>系统管理>全局工具配置

文章图片

jdk配置，我这里名字填jdk1.8，JAVA_HOME填本机jdk的JAVA_HOME路径，没有的话可以选则自动安装，选择好版本就好了，不过自动安装需要Oracle 登录后才能安装。

文章图片

（3）git配置
可本机安装可以忽略，未安装可选自动安装

文章图片

（4）maven配置
本机安装的话填写maven的安装目录，未安装可选自动安装

文章图片

（5）NodeJS配置
本机安装的话填写NodeJS的安装目录，未安装可选自动安装

文章图片

（6）docker配置
没安装可以选则自动安装，本机安装不需要填写

文章图片

最后点击应用并保存。
三、开始新建任务 1.点击新建任务

文章图片

2、填写任务名称，选择创建自由风格的项目，点确认

文章图片

3.源码管理，填写项目git地址，这里我填写我的github地址，需要登录的可以添加账户密码或者ssh公钥等进行授权

文章图片

4.构建分支，我这里默认master

文章图片

5.github下载时间比较慢，这里填10分钟

文章图片

6.构建环境，这里选择nodejs

文章图片

7.开始项目构建，填写shell脚本

文章图片

（1）shell脚本需要根据自己时间进行更改，下面仅供参考

echo $PATH node -v npm -v #npm install -g cnpm --registry=http://registry.npm.taobao.org #安装依赖，使用默认用户 npm install --unsafe-perm #构建项目到/dist npm run build:prod #将构建好的dist项目，移到/opt/data/build目录 #/root/.jenkins/workspace/linfen-blog-ui/dist构建好的dist路径 mv /root/.jenkins/workspace/linfen-blog-ui/dist /opt/data/vuecd /opt/data/vue#复制docker 文件linfen-system/src/main/docker/Dockerfile cp -Rf /root/.jenkins/workspace/linfen-blog-ui/static/docker/Dockerfile /opt/data/vue#执行构建Dockerfile命令 docker build ./ -t my/linfen-blog-uiif [[ -n $(docker ps | grep linfen-blog-vue) ]]; then echo "l【infen-blog-vue】已运行，正在重启。。。" #停止之前的容器运行 docker stop linfen-blog-vue#删除之前的容器 docker rm linfen-blog-vue else echo "【linfen-blog-vue】不存在，正在部署。。。" fi#运行刚刚创建的容器 docker run--namelinfen-blog-vue -d -p 80:80 -v /opt/software/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /opt/software/nginx/logs:/var/log/nginx my/linfen-blog-uiecho "构建完成"

（2）需要在opt中创建文件夹用来项目构建成docker

# 创建项目构建目录 mkdir /opt/build/vue# nginx配置文件目录和日志目录 # nginx配置目录，需要提交拷贝nginx.conf文件到这里 mkdir /opt/software/nginx/conf/# nginx日志目录 mkdir /opt/software/nginx/logs/

8、创建Docker文件放到/opt/build/vue目录

# 设置基础镜像 FROM nginx # 定义作者 MAINTAINER linfen-blog-ui # 将dist文件中的内容复制到 /usr/share/nginx/html 这个目录下面 COPY dist//usr/share/nginx/html

9.开始执行构建

文章图片

10、查看控制台，构建情况

文章图片

构建成功如下：

Build complete. Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work.+ mv /root/.jenkins/workspace/linfen-blog-vue/dist /opt/data/vue + cd /opt/data/vue + cp -Rf /root/.jenkins/workspace/linfen-blog-vue/static/docker/Dockerfile /opt/data/vue + docker build ./ -t my/linfen-blog-vue Sending build context to Docker daemon5.096MBStep 1/3 : FROM nginx ---> ad4c705f24d3 Step 2/3 : MAINTAINER linfen-blog-vue ---> Running in 2cdc9a4459ef Removing intermediate container 2cdc9a4459ef ---> 28909ac4fee0 Step 3/3 : COPY dist//usr/share/nginx/html ---> 9232c7507bc7 Successfully built 9232c7507bc7 Successfully tagged my/linfen-blog-vue:latest ++ docker ps ++ grep linfen-blog-vue + [[ -n d0b9cc5ca3ccf1b654517986"/docker-entrypoint.…"23 hours agoUp 21 hours0.0.0.0:80->80/tcp, :::80->80/tcplinfen-blog-vue ]] + echo l【infen-blog-vue】已运行，正在重启。。。 l【infen-blog-vue】已运行，正在重启。。。 + docker stop linfen-blog-vue linfen-blog-vue + docker rm linfen-blog-vue linfen-blog-vue + docker run --name linfen-blog-vue -d -p 80:80 -v /opt/software/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /opt/software/nginx/logs:/var/log/nginx my/linfen-blog-vue ae971f47997c34cb85a7c08f121ff15f5b09d86e8c82c65d789bc856e19db0c8 + echo 构建完成构建完成 Finished: SUCCESS

日志太长，所以只截取一部分。
11.浏览器输入http://ip:80,就可以看到我们最后的成果了。阿里云等服务器部署需要关闭对应的防火墙和安全组规则