drone CICD 前端配置参考

Drone by Harness ™ 是一个现代化的持续集成平台，它使忙碌的团队能够使用强大的云原生管道引擎自动化他们的构建、测试和发布工作流程。

Trusted 模式

这个脚本使用了 volumes ，按照 drone 的要求，需要开启项目的 Trusted 功能。 官网说明

管理员身份

普通用户直接进入这个页面是没有这个选项的，需要安装 drone 的时候配置 DRONE_USER_CREATE，用户名为git的账户名。

# environment
DRONE_USER_CREATE=username:用户名,admin:true

更详细的配置，参考 官方文档说明

配置 Secrets

这个样例中，分别使用了 docker_username 、docker_password 、ssh_password，分别表示docker的用户名，docker的密码，和部署服务器的密码。

如果将以上三个配置写在第一个Secrets中，则表示当前项目独享，而第二个Secrets 表示组织共享的。

更详细的说明，参考 Secrets官方说明

相关文件

.drone.yml

kind: pipeline
type: docker
name: default

volumes:
  - name: node_modules # 缓存
    host:
      path: /tmp/node_modules

steps:
- name: node-build
  image: node:16.15.0
  volumes:
  - name: node_modules
    path: /drone/src/node_modules
  commands:
    - npm config set registry https://registry.npm.taobao.org && npm install
    - npm run build
- name: docker-build # 使用 dockerfile 打包成镜像, 并推送到镜像仓库
  image: plugins/docker
  settings:
    registry: xxxxx.xxxxxxxx.aliyuncs.com
    repo: xxxxxx.xxxxxx.aliyuncs.com/xxxxx/xxxxx
    username:
      from_secret: docker_username
    password:
      from_secret: docker_password
    tags: 
      - latest
      - ${DRONE_COMMIT}
      - ${DRONE_TARGET_BRANCH}
- name: ssh-publish # 使用 ssh 在 服务器上进行发布
  image: appleboy/drone-ssh
  settings:
    host:
      - xxxxx.xxxxx.cn
    username: root
    password:
      from_secret: ssh_password
    port: 22
    command_timeout: 2m
    script:
      - cd /home/xxxxxxx # cd 到项目目录
      - docker-compose pull front # 拉取上一步推送的镜像
      - docker-compose up -d # 启动

Dockerfile

FROM nginx
COPY ./dist /app
COPY nginx.conf /etc/nginx/nginx.conf

nginx.conf

参考 VueCli官方配置

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
  worker_connections  1024;
}
http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
  access_log  /var/log/nginx/access.log  main;
  sendfile        on;
  keepalive_timeout  65;
  server {
    listen       80;
    server_name  localhost;
    location / {
      root   /app;
      index  index.html;
      try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }
}