【DevOps】持续集成【`Jenkins `+ `Gitee `+ `docker`】

其中gitee可以使用其他代码管理系统替代。

前言：

前几个开始做起专职的前端开发。虽然已经写了1年多的Vue.js，但对于发布、展示，不停的npm run build亦或是Yarn run build，然后等待构建项目，在通过MobaXterm拖到服务器上。还是比较反感，心心念念的解决方案DevOps，于是有了这篇文章。

准备工作

准备环境

Gitee账号注册。
本地安装Docker。

安装Jenkins(必须先安装完Docker)。

 #创建Jenkins工作目录
 sudo mkdir jenkins/data/ -p   
 #创建Jenkins容器
 docker run --name myjenkins -p 8080:8080 -p 50000:50000 -v /opt/jenkins/data:/var/jenkins_home -d --restart=always  jenkins/jenkins
 #查看Jenkins初始化密钥(密钥会打印在日志里)
 docker logs myjenkins -f
 #找到密钥后填入（打开浏览器:8080）然后终端的日志就可以按`Ctrl + C`了。

公网IP（花生壳可以解决这个问题，免费版可以内网穿透，数量有限制）。

开始

使用vue-cli创建一个项目（我这里使用UniApp的模板，创建下来是一个UniApp的实例项目）。
加入Git版本控制。
向Gitee推送。
进入Gitee上面的项目设置里面，进入WebHook选项。
进入<ip>:8080进入Jenkins管理页面。新增安装以下几个插件。
1. Publish Over SSH
2. Docker Plugin
3. Gitee插件
4. NodeJs
进入系统管理=>系统设置，配置以下项：
1. Gitee标签项
2. Publish over SSH标签项
3. 云=>Docker(配置时需要开启Docker Tcp 访问控制)
  1. Docker Host URI，填写Docker Tcp访问控制地址。
在Jenkins中新建任务。选择自由构建风格。
1. 源码管理：输入Gitee仓库。
2. 构建触发器：Gitee webhook 触发构建。其中：Gitee WebHook 密码，点击生成，然后填回步骤4中的WebHook页面，触发地址，填写外网可以访问的地址：如http://花生壳域名/project/uniapp_hello。
3. 构建环境选择NodeJs
4. 构建：
  1. 选择执行Shell=>输入构建命令：
```
 npm -v
 pwd
 npm install
 npm run build:h5
 
```
  2. 构建Docker镜像：
    1. Cloud选择上面创建的构建服务器。
    2. image:输入构建的镜像名称，如需要推送私有仓库，请按照一定规则填写此部分。
    3. 勾选Push image
5. 构建后操作：
  1. Send build artifacts over SSH:选择添加的Server。
  2. SourceFiles:*
  3. Exec command:
```
 docker rmi 192.168.1.1:9090/hello-uni-web:latest -f
 docker rm hellouni -f
 docker run -d -p 10088:80 --name=hellouni --rm 192.168.1.1:9090/hello-uni-web:latest
 
```

测试构建

编写Dockerfile然后推送至Gitee。 Dockerfile内容:

 FROM httpd:2.4
 COPY dist/build/h5 /usr/local/apache2/htdocs/
 EXPOSE 80

等待构建
查看构建日志，并访问部署地址。

坚果酱的博客

【DevOps】持续集成【`Jenkins `+ `Gitee `+ `docker`】

前言：

准备工作

准备环境

开始

测试构建

参考