1、原理 我们把我们的前端项目打包后,以nginx镜像作基底镜像封装进去,使之成为一个可以直接运行的镜像。然后我们可以部署我们的镜像到任何安装了docker环境的机器上。
2、项目创建
这里使用我自己预制的一个vue2.x的项目模板来作为演示,在自己的电脑上(vue的学习请参考官方)。
vue create --preset pumelotea/vue-cli-plugin-pumelo-tea my-app
等待安装完成后,我们使用
webstorm
打开:
3、项目托管
接下来我们把我们的项目托管到我们刚才搭建的gogs上。
先在gogs上登录,然后创建一个新的仓库,填入名称,然后创建即可。
托管完成后,我们的代码就会上传到gogs中,这里可能需要一些git知识。
4、配置部署秘钥
先ssh到test-node-1上。然后
# 这一步应该在网关搭建的时候生成过了,可以跳过。
cd ~/.ssh
ssh-keygen -o
# 一路回车即可
这时候会在当前目录下生成公钥和秘钥。
# 输出公钥复制到剪贴板。
cat id_rsa.pub
进入该项目的仓库设置的管理部署秘钥
,点击添加部署秘钥
,粘贴到秘钥文本中,标题随便填写。
由于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
即可。
完成之后
5、激活drone
浏览器访问http://172.16.113.9:8080/
,点击SYNC
进行仓库的同步,同步之后我们就会发现我们刚才创建的仓库已经出现了。
点击激活仓库,激活之后,drone才支持触发构建。
注意:这里还需要连接上之前搭建的数据库,打开drone的数据,找到用户列表,修改
user_admin
为1
,后续挂载宿主机的路径需要管理员的权限。
打开管理员权限后,我看可以看到配置界面多了一个属性,我们把它开启。
6、配置drone.yml
默认是drone会检查项目根目录下是否存在.drone.yml
文件,配置文件名也是可以改的。
6.1、自定义域名申请
登录我们搭建的dns平台https://172.16.113.9:10000/
,添加一个新的二级域名,解析到172.16.113.9
,其实就是网关的部署机器的IP地址。因为最终我们希望使用一个域名来访问我们的应用。
添加后,别忘记点击右上角的刷新按钮,应用配置。
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的自动构建,
这里面的每一步,都是在.drone.yml中定义的。
8、验证
构建完成后我们可以在portainer中的test-node-2节点上看到运行的容器
在traefik网关中可以看到这个容器成功注册到网关了。
这时候我们可以在浏览器访问刚才我们添加的二级域名
http://web.happykit.net