使用 Drone 自动化部署 Vue 项目

在项目根目录下创建 .drone.yml 文件，内如如下：

kind: pipeline
type: docker
name: web

# 挂载宿主机文件到docker容器中
volumes: 
    - name: build-www
      host:
          path: /www/web # 从宿主机中挂载的目录
    - name: cache
      host:
          path: /tmp/drone-cache/web/node_modules

steps:
    # 加载依赖
    - name: node-cache
      pull: if-not-exists
      image: drillster/drone-volume-cache
      volumes:
          - name: cache
            path: /drone/src/node_modules
      settings:
          restore: true
    # 安装依赖 & 打包应用
    - name: install
      pull: if-not-exists
      image: node:16.20.2
      privileged: true
      volumes:
          - name: build-www
            path: /web
          - name: cache
            path: /drone/src/node_modules
      when:
          branch: master
          environment:
              NODE_ENV: production
      commands:
          - cp .env.production .env
          - yarn config set registry https://registry.npm.taobao.org -g
          - yarn
          - yarn build
          - cp -r ./dist /web/dist
          - cp Dockerfile /web/Dockerfile
          - cp run.sh /web/run.sh
    # 打包应用镜像并运行
    - name: build-start
      pull: if-not-exists
      image: appleboy/drone-ssh
      settings:
          host:
              from_secret: ssh_url
          username:
              from_secret: ssh_user
          password:
              from_secret: ssh_password
          port: 22
          command_timeout: 5m
          script:
              - cd /mydata/web
              - chmod +x run.sh
              - ./run.sh

ssh_url ssh_user ssh_password 需要再 Drone web中配置

privileged: true 配置

再创建 Dockerfile 文件，内容如下：

FROM nginx
ADD dist/  /usr/share/nginx/html/
EXPOSE 80
ENTRYPOINT nginx -g "daemon off;"

再创建 run.sh 文件，内容如下：

#!/bin/bash
# 定义应用组名
group_name='nginx'
# 定义应用名称
app_name='web'
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 image prune -f
#构建docker应用
docker run -p 3000:80 --name ${app_name} \
-e TZ="Asia/Shanghai" \
-d ${group_name}/${app_name}
rm -rf /mydata/${app_name}/*