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

前言:

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

准备工作

准备环境

  1. Gitee账号注册。
  2. 本地安装Docker
  3. 安装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`了。
     
    
  4. 公网IP(花生壳可以解决这个问题,免费版可以内网穿透,数量有限制)。

开始

  1. 使用vue-cli创建一个项目(我这里使用UniApp的模板,创建下来是一个UniApp的实例项目)。
  2. 加入Git版本控制。
  3. Gitee推送。
  4. 进入Gitee上面的项目设置里面,进入WebHook选项。
  5. 进入<ip>:8080进入Jenkins管理页面。新增安装以下几个插件。
    1. Publish Over SSH
    2. Docker Plugin
    3. Gitee插件
    4. NodeJs
  6. 进入系统管理=>系统设置,配置以下项:
    1. Gitee标签项
    2. Publish over SSH标签项
    3. 云=>Docker(配置时需要开启Docker Tcp 访问控制)
      1. Docker Host URI,填写Docker Tcp访问控制地址。
  7. 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
         
        

测试构建

  1. 编写Dockerfile然后推送至GiteeDockerfile内容:
     FROM httpd:2.4
     COPY dist/build/h5 /usr/local/apache2/htdocs/
     EXPOSE 80
     
    
  2. 等待构建
  3. 查看构建日志,并访问部署地址。

参考

  1. Docker+Jenkins持续集成环境(1)使用Docker搭建Jenkins+Docker持续集成环境
  2. Gitee Jenkins Plugin
  3. Docker打开TCP管理端口