docker 构建前端CI CD流 实现自动打包部署

搭建drone服务，构建前端cicd工作流

什么是持续集成和持续交付

“持续集成： 是一种开发实践，要求开发人员每天多次将代码集成到共享存储库中。”

“持续交付：是一种软件工程方法，团队可以在短时间内将软件部署到生产环境，确保在任何时候可靠地发布软件，并且在发布软件时可以手动进行。”

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

1. 服务器安装node、docker
2. 申请一个Github OAuth Apps 令牌，用于授权Drone server 读取代码仓库 （github为例）
3. 创建一个共享密钥来验证跑步者和您的中央无人机服务器之间的通信
4. 启动一个Drone Server（为Drone的管理提供了Web页面，用于管理从Git上获取的仓库中的流水线任务） 和 Drone runner（一个单独的守护进程，会轮询Server）
5. 创建Dockerfile文件打包镜像
6. 登录镜像仓库 创建仓库并上传打包的镜像
7. 安装配置nginx
8. 配置ssl_host、ssh_password等
9. 创建drone.yml文件

---

1. 注册令牌

OAuth Application的回调地址一定要带上login，不然会一直报回调URL有问题（服务器地址加上login）

2. 共享密钥

使用 openssl 生成共享密钥：
$ openssl rand -hex 16 
bea26a2221fd8090ea38720fc445eca6

3. drone server 、 drone runner

docker run 
  --volume=/var/lib/drone:/data 
  --env=DRONE_GITHUB_CLIENT_ID=cb1f0557a0bf5f7daf6d 
  --env=DRONE_GITHUB_CLIENT_SECRET=7fa5beda3c7c760c2df79847f5585f940145a52d 
  --env=DRONE_RPC_SECRET=f04e94******************9c7089 
  --env=DRONE_SERVER_HOST=http://106.13.3.168 
  --env=DRONE_SERVER_PROTO=http 
  --publish=80:80 
  --restart=always 
  --detach=true 
  --name=github-drone drone/drone:2
  
  docker run --detach \
  --volume=/var/run/docker.sock:/var/run/docker.sock \
  --env=DRONE_RPC_PROTO=http \
  --env=DRONE_RPC_HOST=106.13.3.168 \
  --env=DRONE_RPC_SECRET=f04e94******************9c7089 \
  --env=DRONE_RUNNER_CAPACITY=2 \
  --env=DRONE_RUNNER_NAME=my-first-runner \
  --publish=3000:3000 \
  --restart=always \
  --name=runner \
  drone/drone-runner-docker:1
  
使用`docker logs`命令查看日志并验证 runner 是否成功与 Drone 服务器建立连接
$ docker logs runner 
INFO[0000] starting the server 
INFO[0000] successfully pinged the remote server

5. 创建Dockerfile并上传镜像仓库

FROM node:14.19.1

LABEL version="1.0" maintainer="chenjuan"

WORKDIR /drone/
COPY ./package.json /drone/

RUN yarn

• 基于当前路径打包本地镜像

docker build -t newtest:1.0 .

• 打个 tag

docker tag newtest:1.0 juanchen03/newtest:1.0

• 登录镜像仓库

• 推送本地镜像到镜像仓库

docker push juanchen03/newtest:1.0

6. 安装配置nginx

1. 直接拉取最新的nginx镜像

   docker pull nginx

2. 新建目录，把nginx容器内的相关文件夹挂载到宿主机上，方便改写配置，删除容器这些文件不会丢失

   mkdir -p /home/nginx/{conf.d,html,logs}

3. 启动一个nginx容器，把配置文件复制到新建的文件夹里面

   docker run --name nginx -p 80:80 -d nginx

4. 把配置文件复制到宿主机内

   docker cp nginx:/etc/nginx/nginx.conf /home/nginx/conf docker cp nginx:/etc/nginx/conf.d /home/nginx/

5. 停止当前容器并删除

   docker stop nginx docker rm nginx

6. 启动新的nginx容器

docker run \ 
--name nginx \ 
-p 443:443 -p 8080:80 \ 
-v /home/nginx/logs:/var/log/nginx \ 
-v /home/nginx/html:/usr/share/nginx/html \ 
-v /home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \ 
-v /home/nginx/conf.d:/etc/nginx/conf.d \ 
--privileged=true -d --restart=always nginx

// -v：挂载宿主机的目录，冒号":"前面的目录是宿主机目录，后面的目录是容器内目录
// -d：后台运行;
// -restart=always：重启docker时自动重启该容器

7. 配置ssl_host、ssh_password等

可明文输入也可配置secret

8. 创建.drone.yml文件

steps:
- name: build   
  image: juanchen03/newtest:1.0
  pull: always
  commands:
    - pwd
    - ls -la
    - npm install
    - ln -sfn /drone/node_modules node_modules # 软链接镜像中已缓存的 node_modules
    - ls -la
    - npm run build
    - ls -la
    
  when:
    branch: main
    event: push
- name: devlop
  image: juanchen03/drone-scp
  pull: always
  settings:
      debug: true
      host:
        from_secret: ssh_host # 服务器ip
      username: 
        from_secret: ssh_name # 服务器name
      password: 
        from_secret: ssh_password # 服务器密码
      target: ssh_target # 把项目拷贝到target目录
      source: dist/* # 打包后的那个目录
      rm: true
      strip_components: 1 
      script:
        - nginx -s reload
  when:
    branch: main
    event: push
trigger:
  branch:
    include:
      - main
  event:
    include:
      - push

！遇到的问题

• docker的api版本不能大于1.4.0
• 降了docker的api版本也不能解决问题
• 最终把docker server的版本更新到最新终于解决

docker常用命令

• 查询所有运行的容器：docker ps

• 查询所有容器：docker ps -a

• 查询容器信息：docker inspect 容器name/id

• 进入容器：docker exec -it nginx bash

• 重启容器：docker restart nginx

• 重启docker：systemctl restart docker

• 删除容器：docker rm 容器名称/id

• 查询镜像：docker images

• 删除镜像：docker rmi -f 镜像名/id