drone+gogs 自动化部署vue前端项目

题记

• 毕业后，闲置的阿里云服务器一直烂在手里，刚好最近在深入了解自动化集成部署，想着搭建gitlab结合CI/CD,结果1核2G的服务器确实顶不住，最终选择gogs+drone这种小而美的架构进行自动化部署。
• 部署完后端项目后，发现drone确实足够优先，能够满足提交代码即可实现docker自动部署，完全不需要考虑中间繁杂的服务器配置问题，不得不说，docker yyds!!!
• 在看了官方文档以及搜刮了大部分博客，发现drone鲜有博客描述前端部署的过程，最终自己在了解drone.yml的配置语法，实现了vue前端项目部署，特此记录下我的心路(bug)历程。
• 前期如何部署gogs以及drone的相关介绍，由此进入
  

正文

• 当你完成了前期对于drone以及gogs的基本操作后，你将进入下一个阶段，如何完成属于你自己的应用。
• 下面我将介绍vue项目中如何集成自动化部署到drone
• 首先我们创建一个vue项目，建议拿官方的demo进行测试
• 然后我们在项目的根目录下依次创建.drone.yml、Dockerfile、run.sh
• .drone.yml主要用于drone的自动化部署配置，他优先于docker创建，也就是说drone完成前期对于项目的编译与打包
• 下面是.drone.yml的配置代码

kind: pipeline # 定义对象类型，还有secret和signature两种类型
type: docker # 定义流水线类型，还有kubernetes、exec、ssh等类型
name: vue-test

steps:
  - name: package # 流水线名称
    image: node:12.22.6
    volumes:
      - name: bulid-workspace
        path: /web
    commands:
      - npm config set registry https://registry.npm.taobao.org
      - SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass
      - npm install
      - npm run build
      - cp -r ./dist /web/dist
      - cp Dockerfile /web/Dockerfile
      - cp run.sh /web/run.sh
  - name: build-start
    image: appleboy/drone-ssh # SSH工具镜像
    settings:
      host: xxx.xxx.xxx.116 # 远程连接地址
      username: root # 远程连接账号
      password:
        from_secret: ssh_password # 从Secret中读取SSH密码
      port: 22 # 远程连接端口
      command_timeout: 5m # 远程执行命令超时时间
      script:
        - cd /mydata/web # 进入宿主机构建目录
        - chmod +x run.sh # 更改为可执行脚本
        - ./run.sh # 运行脚本打包应用镜像并运行

volumes: # 定义流水线挂载目录，用于共享数据
  - name: bulid-workspace
    host:
      path: /mydata/web # 从宿主机中挂载的目录

下面是Dockerfile的代码,主要用于构建nginx镜像

# 设置基础镜像
FROM nginx
# 定义作者
MAINTAINER bossking
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/
EXPOSE 80
ENTRYPOINT nginx -g "daemon off;"

下面是run.sh,用于构建docker容器

#!/bin/bash
# 定义应用组名
group_name='nginx'
# 定义应用名称
app_name='vue-test'
echo ${app_name}
echo '----copy app----'
docker stop ${app_name}
echo '----stop container----'
docker rm ${app_name}
echo '----rm container----'
docker rmi ${group_name}/${app_name}
echo '----rm image----'
# 打包编译docker镜像
docker build -t ${group_name}/${app_name} .
#构建docker应用
docker run -p 8888:80 --name ${app_name} \
-e TZ="Asia/Shanghai" \
-d ${group_name}/${app_name}