Deploy Static Site with Drone

What are we going to do?

In this post I will show you how you can setup your drone pipeline to remotely host a website.

How does the lab look like

This time I’m not using the AMS8 lab internally. For this lab I’using a VPS (Virtual Private Server) from ssdnodes*.

On this VPS I run:
– a git installation called gitea
– drone that is connected to gitea
– drone runners for docker and ssh
– traefik as a reversed proxy and SSL offloading
– portainer for management of the containers (when needed)
– code-server that is a Visual Studio Code that runs in the cloud
– Backups are managed automatically

With this toolset you are ready to go and have a lot of fun

Step by step

In a diagram

Below you see a diagram with the steps that are taken to make this work.

The code is created within code server which is a hosted Visual Studio Code implementation. The GITEA and DRONE are coupled together. When a push is send to the server the pipeline will kick of when a .drone.yml file is found. Lets dive into thsi pipeline file.

Drone pipeline

The drone pipeline is a single yaml text file. The file is called .drone.yml and should be in the root of the repo.

You can spin up new docker containers with drone or you can login remotely (type: ssh), that is what we are doing in our case.

---
kind: pipeline
type: ssh
name: deploy-on-server

trigger:
  branch:
    - master

server:
  host: ip.or.hostname
  user: remote-user-that-can-login-with-a-key
  ssh_key:
    from_secret: SSH_KEY

steps:
  - name: build-website-hosting
    commands:
      - sudo cp -r www /docker/xxx.xxxx.website.xxx
      - sudo docker-compose up -d 

This is all that is needed for the pipeline. We going to execute docker-compose on the host. This means it will look for a docker-compose.yml file. Let’s hop over to that file.

Before I forget, in the www directory there is a simple html/php file with a basic webpage. Nothing fancy.

Docker Compose

I assume you have some experience with docker-compose. Below is the docker compose.yml file that will get the php docker image and start it in a container.

The labels are used for Traefik. It will act as a reversed proxy and will do SSL offloading. The volume that is mapped is website content of the previous step.

version: '2'

services:

  php-container:
    image: php:7.3-apache
    volumes:
      - /docker/xxx.xxxx.website.xxx:/var/www/html
    restart: unless-stopped  
    labels:
      - traefik.enable=true
      - traefik.http.routers.website-secure.rule=Host(`xxx.xxxx.website.xxx`)
      - traefik.http.routers.website-secure.entrypoints=web-secure
      - traefik.http.routers.website-secure.tls=true 
      - traefik.http.routers.website-insecure.rule=Host(`xxx.xxxx.website.xxx`)
      - traefik.http.routers.website-insecure.entrypoints=web
      - traefik.http.routers.website-insecure.middlewares=redirect@file
    networks:
      - traefik_web
 
networks:
  traefik_web:
    external: true

How cool is this. The website is automatically updated without any manual labor :-).

If you want to read more or now more about some of these things let me know in the comments.

Thanks, and have a superduper weekend.

Stuart.

* This is a referral link. If you choose to apply for a server there I receive a credit for that. They have a server starting at 60 euro’s a year. For me this was a no brainer.