【Drone入门与实践-11】Vue项目的自动化构建

3,523 阅读3分钟

1、原理 我们把我们的前端项目打包后,以nginx镜像作基底镜像封装进去,使之成为一个可以直接运行的镜像。然后我们可以部署我们的镜像到任何安装了docker环境的机器上。

2、项目创建

这里使用我自己预制的一个vue2.x的项目模板来作为演示,在自己的电脑上(vue的学习请参考官方)。

vue create --preset pumelotea/vue-cli-plugin-pumelo-tea my-app

image.png 等待安装完成后,我们使用webstorm打开:

image.png

3、项目托管

接下来我们把我们的项目托管到我们刚才搭建的gogs上。 先在gogs上登录,然后创建一个新的仓库,填入名称,然后创建即可。 image.png

托管完成后,我们的代码就会上传到gogs中,这里可能需要一些git知识。

4、配置部署秘钥

先ssh到test-node-1上。然后

# 这一步应该在网关搭建的时候生成过了,可以跳过。
cd ~/.ssh
ssh-keygen -o 
# 一路回车即可

这时候会在当前目录下生成公钥和秘钥。

# 输出公钥复制到剪贴板。
cat id_rsa.pub 

进入该项目的仓库设置的管理部署秘钥,点击添加部署秘钥,粘贴到秘钥文本中,标题随便填写。 image.png 由于test-node-1上的~/.ssh/known_hosts中还没信任gogs的ssh,因此我们最好现在test-node-1上执行一次

git clone ssh://git@172.16.113.9:10022/happykit/my-app.git

这时候会提示用户是否信任,输入yes即可。

完成之后 image.png

5、激活drone

浏览器访问http://172.16.113.9:8080/,点击SYNC进行仓库的同步,同步之后我们就会发现我们刚才创建的仓库已经出现了。 image.png 点击激活仓库,激活之后,drone才支持触发构建。 image.png 注意:这里还需要连接上之前搭建的数据库,打开drone的数据,找到用户列表,修改user_admin1,后续挂载宿主机的路径需要管理员的权限。 image.png 打开管理员权限后,我看可以看到配置界面多了一个属性,我们把它开启。 image.png

6、配置drone.yml

默认是drone会检查项目根目录下是否存在.drone.yml文件,配置文件名也是可以改的。 image.png

6.1、自定义域名申请

登录我们搭建的dns平台https://172.16.113.9:10000/,添加一个新的二级域名,解析到172.16.113.9,其实就是网关的部署机器的IP地址。因为最终我们希望使用一个域名来访问我们的应用。 image.png 添加后,别忘记点击右上角的刷新按钮,应用配置。

6.2、配置内容

kind: pipeline
type: docker
name: default

clone:
  disable: true

steps:
  - name: clone
    pull: if-not-exists
    image: alpine/git
    volumes:
      - name: sshkeys
        path: /root/.ssh
    commands:
      - echo $DRONE_GIT_SSH_URL
      - git clone $DRONE_GIT_SSH_URL .
      - git checkout $DRONE_COMMIT
  - name: restore-cache
    pull: if-not-exists
    image: drillster/drone-volume-cache
    volumes:
      - name: cache
        path: /cache
    settings:
      restore: true
      mount:
        - ./node_modules
  - name: build-front
    pull: if-not-exists
    image: node
    settings:
      mirror: https://docker.mirrors.ustc.edu.cn
    commands:
      - yarn install
      - yarn run build-test
  - name: rebuild-cache
    pull: if-not-exists
    image: drillster/drone-volume-cache
    volumes:
      - name: cache
        path: /cache
    settings:
      rebuild: true
      mount:
        - ./node_modules
  - name: build-image
    pull: if-not-exists
    image: plugins/docker
    privileged: true
    volumes:
      - name: certs
        path: /etc/docker/certs.d
    settings:
      mirror: https://docker.mirrors.ustc.edu.cn
      dockerfile: docker/test/Dockerfile
      repo: registry.happykit.net:5000/test/my-app
      registry: registry.happykit.net:5000
      tags: ${DRONE_BUILD_NUMBER}
      username: admin
      password: admin

  - name: deploy-container
    pull: if-not-exists
    image: appleboy/drone-ssh
    settings:
      host: 172.16.113.10
      username: root
      password: password
      port: 22
      script:
        - docker login -u admin -p admin registry.happykit.net:5000
        - docker pull registry.happykit.net:5000/test/my-app:${DRONE_BUILD_NUMBER}
        - list=$(docker ps -a| grep test-my-app* | awk '{print $1}')
        - test "$list" = "" && echo "none test-my-app containers running" || docker stop $list
        - docker run -d -v /data/my-app:/logs --privileged=true -l "traefik.http.routers.web-service.rule=Host(\`web.happykit.net\`)" -l "traefik.http.services.web-service.loadbalancer.server.port=8080" --network=app_network  --name=test-my-app-${DRONE_BUILD_NUMBER} registry.happykit.net:5000/test/my-app:${DRONE_BUILD_NUMBER}

trigger:
  branch:
    - master
  event:
    - push
volumes:
  - name: sshkeys
    host:
      path: /root/.ssh
  - name: cache
    host:
      path: /tmp/cache
  - name: certs
    host:
      path: /etc/docker/certs.d

7、推送代码开始构建

准备了那么久终于要构建了。 把项目代码push到git仓库上,正常来讲,会触发drone的自动构建, image.png 这里面的每一步,都是在.drone.yml中定义的。

8、验证

构建完成后我们可以在portainer中的test-node-2节点上看到运行的容器 image.png 在traefik网关中可以看到这个容器成功注册到网关了。 image.png 这时候我们可以在浏览器访问刚才我们添加的二级域名http://web.happykit.net image.png