Package and deploy blog access automation

Why CI/CD workflows?

  • CI/CD stands for continuous integration/continuous deployment
  • Traditional front-end deployment usually goes through several stages: local code update => local package => clear the corresponding directory on the server => upload the project package to the corresponding directory. These are mechanical and repetitive steps
  • Although it can be executed by shell script, each version needs to be manually issued, and manual operation is sometimes more prone to error, which wastes a lot of time and labor costs
  • I’ve seen online code get out of sync with the repository, sometimes affecting judgment, iteration and team collaboration
  • Based on the above, we are more convinced that CI/CD is indispensable

Continuous integration platform

  • Drone is a modern continuous integration platform that automates build, test, and release workflows using a powerful cloud-native pipeline engine,
  • It can use simple YAML configuration files to define and execute Pipelines in Docker containers, seamlessly integrating with popular source code management systems

So what do we need?

  1. Apply for an OAuth Application in order to authorize the Drone Server to read your repository information
  2. Ensure that docker is installed on the server, we need to quickly build the service based on docker to pull images
  3. Create a shared key to verify communication between the runner and your central drone server.
  4. Start a Drone server (central Drone server) and drone Runner (receiving commands from the central Drone server to execute build pipes)
  5. Create an application in the code repository that will be changed every time the project changeswebhookTo informdroneExecute a build
  6. The repository will automatically synchronize our projects
  • According to the documents provided on the official website, select the process corresponding to the code warehouse according to their own situation, build the service and create it in the projectdrone.ymlA file that tells drone what to do
  • Here I’m using the gitea component (docker-compose is more comfortable) and the shared key is generated using OpenSSL
Shared secret key (omitted) in the middle of: cc212 * * * * * * * * * * * * * * * * * * * 08 f1542b56 docker run \ - volume = / var/lib/drone: / data \ --env=DRONE_GITEA_SERVER=http://gitea.zhoukingzz.com:9300 \ --env=DRONE_GITEA_CLIENT_ID=86f170ad-ff69-4640-8fcd-9ff420ffddda \ --env=DRONE_GITEA_CLIENT_SECRET=oIWA9rFBApWnWasdetgzKA8xtTEmSoIJB58oDNmfjoN2 \ --env=DRONE_RPC_SECRET=cc212*******************08f1542b56 \ --env=DRONE_SERVER_HOST=http://drone.zhoukingzz.com:9300 \ --env=DRONE_SERVER_PROTO=http \ --publish=9300:80 \ --restart=always \ --detach=true \ --name=gitea-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=drone.zhoukingzz.com:9300 \ --env=DRONE_RPC_SECRET=cc212*******************08f1542b56 \ --env=DRONE_RUNNER_CAPACITY=2 \ --env=DRONE_RUNNER_NAME=gitea-drone-runner \ --publish=9930:3000 \ --restart=always \ --name=runner \ drone/drone-runner-docker:1Copy the code
  • The following is a simple YAML file. Due to the use of images provided by drone officials, there are still some inelegant details
  • Since the server configuration is sensitive information, we need to use itSecretTo store
kind: pipeline
type: docker
name: default

steps:
- name: install & build
  image: plugins/npm
  pull: always
  commands:
    - pwd
    - ls -la
    - npm i
    - npm run build
    - ls -la

- name: scp
  image: appleboy/drone-scp
  pull: always
  settings:
    debug: true
    source:
      - dist/
    host:
      from_secret: DRONE_HOST
    username: 
      from_secret: DRONE_NAME
    port: 
      from_secret: DRONE_PORT
    password:
      from_secret: DRONE_PSW
    target:
      from_secret: DRONE_DICT
    when:
      branch:
        include:
          - main
      event:
        - push
        - merge

- name: commands
  image: appleboy/drone-ssh
  pull: always
  settings:
    host:
      from_secret: DRONE_HOST
    username: 
      from_secret: DRONE_NAME
    port: 
      from_secret: DRONE_PORT
    password:
      from_secret: DRONE_PSW
    script:
      - nginx -s reload
      
trigger:
  branch:
    include:
      - main
  event:
    include:
      - push
Copy the code

  • Finally, you can see the package deployment progress on the Drone platform

  • You can also see the feedback from the runtime environment