Create a CI/CI pipeline with DroneCI

A previous article described how we rolled out Gitea and DroneCI, here we are going to outline an example of how we can use the services.

What we want to achieve: we copy the repository (the code) to a sure location on your host (could be a NAS), an NGINX (web service) Docker image looks at this location and finally Docker-compose will restart the website and the load the new files.

This is just 1 example of how to use DroneCI. Of course you can do a lot more with it, think of a test step. As soon as you push a code to the repository, the code quality will be checked. Or you can create a Docker image based on your code.
More information about the possibilities check out the official website: https://docs.drone.io

Prerequisites

• (Basic) knowledge of Docker (swarm) and Docker Compose.
• (Basic) knowledge of Git and Gitea, and you are already using this for the development of a website.
• You have Traefik operating as reverse proxy (and not really necessary: Cloudflare as a certresolver.)
• I assume that you have already linked Gitea and DroneCI as described in another article on this website.

Git and Gitea configuration

Create a new repository in Gitea and give it a name, you can basically leave the rest of the settings as it is.

Start DroneCI and click on the SYNC button to make the new repository visible.
If not, we’ll try again later. We will push the native code to the repository first.

Start Git CMD and browse to the folder where the code is stored.
Then execute the instructions in sequence:

Change the repo.git to the correct repository URL.

If you want to know exactly what these instructions do, go to this website:
https://www.datacamp.com/community/tutorials/git-push-pull

Now you will get a popup, so enter your Gitea credentails to proceed.
and Git will push the code after the authentication, looks like this:

DroneCI configuration

Go to your DroneCI website and click on the Sync button again. You will see the repository at the bottom of the screen.

Click on the repository and click on Settings, enable the TRUSTED option.
This gives the repository in DroneCI permissions to use the native Docker engine:

Click on Secrets and New secret.
Here we are going to enter your host’s SSH credentials. So fill in the name Password and as value the password with which you can use SSH.

OK let’s configure the Drone.yml file!

Drone.yml file

Create a new file in your native website development folder and name it “Drone.yml”
This describes the deployment steps that DroneCI takes up.

Below I give an example where 2 steps are defined:

• The copy step copies your new code from the repository to a location on your host.
• We’re going to start a nginx Docker image that looks at that location.
• The Deployment step will restart the NGINX image and load the new files.

Change a couple of things, like the host line ( change this to your host IP address )
The from_secret line, this is the secret that we created earlier, so we don’t need to change this.
At goal, change this the location where you want to put the files on the host.

---
kind: pipeline
name: website
type: docker

trigger:
  department:
  - master
  event:
  - push

steps:
- name: Copy
  image: appleboy/drone-scp
  settings:
    host:
      - yourIPaddressofthehost.
    username: admin
    password:
      from_secret: password
    port: 22
    command_timeout: 2m
    source:
      - public/*
    goal: /location/onthehost/foryourcode
    rm: true

- name: Deployment
  image: docker/compose
  instructions:
  - echo "Remove service"
  - docker stack rm website
  - sleep 15
  - echo "deployen service!"
  - cd docker
  - docker stack deploy --compose-file docker-compose.yml website
  volumes:
  - name: dockersock
    path: /var/run/docker.sock

volumes:
- name: dockersock
  host:
    path: /var/run/docker.sock

The Docker-compose part

1. Create a new folder in the native folder, named Docker and a new file, named Docker-compose.yml.
2. Copy paste the following text.
3. Change the volume to the same location as the host location as mentioned earlier.
4. and ofcource, change the host to your own domain address.
5. Furthermore, the traefik labels can be different, such as the middleware and certresolver. then adjust this as desired.

version: "3"
services:
  nginx:
    image: nginx
    networks:
      - traefik_public
    volumes:
      - /location/onthehost/foryourcode:/usr/share/nginx/html
    deploy:
      labels:
        - "traefik.enable=true"
        ## HTTP Routers
        - "traefik.http.routers.nginx-rtr.entrypoints=https"
        - "traefik.http.routers.nginx-rtr.rule=Host(`yourdomain.com`)"
        - "traefik.http.routers.nginx-rtr.priority=100"
        ## Middlewares
        - "[email protected]"
        ## HTTP Services
        - "traefik.http.routers.nginx-rtr.service=nginx-svc"
        - "traefik.http.services.nginx-svc.loadbalancer.server.port=80"
        # Enable TLS
        - "traefik.http.routers.nginx-rtr.tls=true"
        - "traefik.http.routers.nginx-rtr.tls.certresolver=cloudflare"

networks:
  traefik_public:
    external: true

Folder structure overview

The native folder should now gaze like this, with the rest of your code of course.

.(your volume)
├── drone.yml
├── yourcodefileshere....
├── docker/
    └── docker-compose.yml

Trigger the pipeline!

Now that we’ve configured Drone.yml and docker-compose, let’s push the last changes we made to the repository.
after this the whole thing is initiated and the steps from your pipeline will be executed.

So again, in Git CMD, execute the instructions:

• git add –all
• git commit -m “again”
• git push origin

If you go to Gitea or Github you can see that the change has been made.
And when you log in to DroneCI you can see that the pipeline has been set in motion.