DEV Community: Cedric Hopf

Setup Harbor with Let's Encrypt

Cedric Hopf — Sat, 23 Jan 2021 13:12:34 +0000

This tutorial provides a step-by-step guide to setup Harbor with a Let’s Encrypt certificate using Certbot

Requirements

Linux machine (tested with Ubuntu 20.04)
A public domain pointing to your Linux machine
Port 80/443 is reachable from the outside
Docker
Docker Compose

Certbot / Let’s Encrypt

First, we need to install Certbot to create Let’s Encrypt certificates on our machine. On Ubuntu, this can be easily done by using snap:

$ snap install certbot --classic

Afterward, we are able to create a new certificate for our Harbor domain by using the standalone mode of Certbot and add the desired domain as a parameter. When running Certbot for the first time, it will ask for a valid email address and accept the terms of service before creating the certificate.

$ certbot certonly --standalone -d registry.example.com

Once the command has been completed, it should provide us the following output:

IMPORTANT NOTES:
- Congratulations! Your certificate and chain have been saved at:
  /etc/letsencrypt/live/registry.example.com/fullchain.pem
  Your key file has been saved at:
  /etc/letsencrypt/live/registry.example.com/privkey.pem
  Your certificate will expire on 2021-04-21. To obtain a new or
  tweaked version of this certificate in the future, simply run
  certbot again. To non-interactively renew *all* of your
  certificates, run "certbot renew"
- If you like Certbot, please consider supporting our work by:
Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
Donating to EFF:                    https://eff.org/donate-le

Finally, we can find the certificate files in the folder of the related domain at /etc/letsencrypt/live.

$ ls /etc/letsencrypt/live/registry.example.com
README  cert.pem  chain.pem  fullchain.pem  privkey.pem

Harbor

Now we can continue with installing Harbor on the machine. Let’s go to the Harbor GitHub Releases page, download the latest installer and extract the archive:

$ wget https://github.com/goharbor/harbor/releases/download/v2.1.3/harbor-online-installer-v2.1.3.tgz
$ tar xvf harbor-online-installer-v2.1.3.tgz

To configure the Harbor instance, we can create a copy of the extracted Harbor configuration template and open it with an editor:

$ cd harbor
$ cp harbor.yml.tmpl harbor.yml
$ vim harbor.yml

The configuration file provides a lot of properties to configure and customize the Harbor instance. For a minimalistic installation, it’s enough to change the following values:

# Change the hostname to your domain configured earlier
hostname: reg.mydomain.com
# Keep the http and https port configuration, but change the path of
# the certificate files to the Let's Encrypt certificate
http:
  port: 80
https:
  port: 443
  certificate: /your/certificate/path
  private_key: /your/private/key/path
# Change the admin password to something more secure
harbor_admin_password: Harbor12345
# Change the database password to something more secure
database:
  password: root123

Once the configuration has been adapted, Harbor is ready to be deployed using the install script:

$ ./install.sh
...
✔ ----Harbor has been installed and started successfully.----

Finally, let’s open the domain of the Harbor instance in a browser and check the result. We should see the Harbor login page secured by a valid certificate.

Certificate Renewal

Certbot creates a Cronjob/Timer to renew the requested certificates automatically before they expire.

$ systemctl list-timers
Fri 2021-01-22 07:10:00 CET 5h 57min left Thu 2021-01-21 22:20:02 CET 2h 52min ago snap.certbot.renew.timer     snap.certbot.renew.service

Currently, this renewal will fail, because the Nginx container of Harbor is already using port 80 on the machine. This port is needed by Certbot to renew the existing certificates.

Fortunately, Certbot provides Pre-/Post-Hooks which can be created to stop/start running services before/after renewing the certificates.

These hooks can be created at /etc/letsencrypt/renewal-hooks/{pre|post}. Let’s create a script to stop the Nginx container of Harbor before running the renew task:

$ vim /etc/letsencrypt/renewal-hooks/pre/harbor.sh

Insert the following content:

#!/bin/bash
/usr/bin/docker stop nginx

Make the script executable:

$ chmod 755 /etc/letsencrypt/renewal-hooks/pre/harbor.sh

Now we also have to create the post-hook script to copy the new renewed certificates to Harbor’s data directory and start the Nginx container again. Create the post-hook script and add the following content:

$ vim /etc/letsencrypt/renewal-hooks/post/harbor.sh

Insert the following content:

#!/bin/bash
cp -f /etc/letsencrypt/live/registry.example.com/fullchain.pem /data/secret/cert/server.crt
cp -f /etc/letsencrypt/live/registry.example.com/privkey.pem /data/secret/cert/server.key
/usr/bin/docker start nginx

Make the script executable:

$ chmod 755 /etc/letsencrypt/renewal-hooks/post/harbor.sh

Keep in mind to change the paths according to your setup. The configured data directory for Harbor can be found in the harbor.yml file.

To check if the scripts are configured correctly, we can test the renewing of the certificate by using Certbot’s renew command in dry-run mode. We should see the following output:

$ certbot renew --dry-run
...
Running pre-hook command: /etc/letsencrypt/renewal-hooks/pre/harbor.sh
Output from pre-hook command harbor.sh:
nginx
...
Running post-hook command: /etc/letsencrypt/renewal-hooks/post/harbor.sh
Output from post-hook command harbor.sh:
nginx

Now the setup is completed. The Harbor instance should be up and running and the Let’s Encrypt certificate should be automatically renewed.

How to Use Chart.js with Vue & TypeScript

Cedric Hopf — Tue, 22 Sep 2020 09:44:10 +0000

Recently I was playing around with the Chart.js library and integrated it into one of my Vue applications. Even if there are some wrapper libraries to use Chart.js together with Vue and TypeScript, I had issues integrating them into my Vue project. In this blog post, I want to show you how to create your own Chart components in Vue by using the regular Chart.js library.

Requirements

Vue Project
Vue Class Components
Vue Property Decorator

Installation

First, add the following packages to your Vue application.

$ yarn add chart.js @types/chart.js

Once these packages are installed, create a new charts folder and the corresponding Chart component inside the components directory.

$ mkdir src/components/charts
$ touch src/components/charts/Doughnut.vue

Add the following content to the Doughnut.vue file:

<template>
  <canvas id="doughnut" />
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import Chart from 'chart.js'

@Component
export default class Doughnut extends Vue {
  @Prop({ default: [] }) readonly labels!: Array<string>
  @Prop({ default: [] }) readonly colors!: Array<string>
  @Prop({ default: [] }) readonly data!: Array<number>
  @Prop({
    default: () => {
      return Chart.defaults.doughnut
    }
  })
  readonly options: object | undefined

  mounted() {
    this.createChart({
      datasets: [
        {
          data: this.data,
          backgroundColor: this.colors
        }
      ],
      labels: this.labels
    })
  }

  createChart(chartData: object) {
    const canvas = document.getElementById('doughnut') as HTMLCanvasElement
    const options = {
      type: 'doughnut',
      data: chartData,
      options: this.options
    }
    new Chart(canvas, options)
  }
}
</script>

As you can see, we are declaring properties for the chart data and configuration. This makes our component reusable and we are able to inject the values from another component.

Now, you can import and use the created Doughnut component. In this example, the component has been added to the Home view of a new Vue project:

<template>
  <div class="home">
    <Doughnut
      :data="[25, 75, 30]"
      :labels="['Red', 'Green', 'Blue']"
      :colors="['red', 'green', 'blue']"
    />
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
  </div>
</template>

Finally, start the Vue development server and open your browser on the related address to see the result:

Get Started with Traefik 2 Using Docker Compose

Cedric Hopf — Tue, 15 Sep 2020 11:26:04 +0000

I am using Traefik as a reverse proxy to publish and secure services that are running in a Docker container. This blog post will describe how to get started with Traefik 2 using docker-compose on a single host.

Since I am using many Traefik instances on different hosts, I've created a repository called traefik-dockerized to make the deployment easier.

First, clone the repository.

$ git clone https://github.com/cedrichopf/traefik-dockerized.git
Cloning into 'traefik-dockerized'...
$ cd traefik-dockerized

After you cloned the repository, create a copy of the example configuration.

$ cp config/traefik.example.yml config/traefik.yml

Open the configuration file. It should look like this:

api:
  dashboard: true

entryPoints:
  http:
    address: ":80"
  https:
    address: ":443"

providers:
  docker:
    network: proxy

certificatesResolvers:
  letsencrypt:
    acme:
      email: admin@example.com
      storage: acme.json
      httpChallenge:
        entryPoint: http

The configuration file is almost ready-to-use. To use the built-in LetsEncrypt support, adapt the certificate resolvers' email address.

Afterward, create the Docker network configured in the traefik.yml file.

$ docker network create proxy
ca0a9fe39b34b9f17d5c5e938e82ce67b4423e151ae5000eee7754e89116cac1

Additionally, create a JSON file to store the certificate information received by the certificate resolver.

$ touch letsencrypt/acme.json
$ chmod 600 letsencrypt/acme.json

The docker-compose.yml file is part of the repository and generic for all Traefik deployments. Create a docker-compose.override.yml file to apply custom configurations to the deployment.

$ cp override.example.yml docker-compose.override.yml

Finally, pull the Docker images and start the Traefik instance.

$ docker-compose pull
Pulling traefik ... done
$ docker-compose up -d
Creating traefik_traefik_1 ... done

Example Service

Now the Traefik setup can be tested by deploying a sample service using docker-compose. The following example deploys an Nginx container with a Traefik service configuration in the labels section.

Note: To use this example, you need to change the hostname example.com to match your systems' environment. If you changed the docker network, which is used by Traefik to discover services, you also need to change the network.

version: "3.7"

services:
  nginx:
    image: nginx:latest
    networks:
      - proxy
    labels:
      # Traefik configuration, Hostname needs to be changed
      - traefik.http.routers.nginx-http.rule=Host(`example.com`)
      - traefik.http.routers.nginx-http.entrypoints=http
      - traefik.http.routers.nginx-http.middlewares=redirect
      - traefik.http.routers.nginx-https.rule=Host(`example.com`)
      - traefik.http.routers.nginx-https.entrypoints=https
      - traefik.http.routers.nginx-https.tls=true
      - traefik.http.routers.nginx-https.tls.certresolver=letsencrypt
      - traefik.http.services.nginx.loadbalancer.server.port=80
      - traefik.http.middlewares.redirect.redirectscheme.scheme=https

networks:
  proxy:
    external: true

As seen in the manifest, Traefik will configure the access to the service with the properties defined in the labels section. In this example, it's creating 2 routers (http and https), forwarding requests to the Nginx service on port 80. Additionally, the http router is using the redirect middleware to redirect all requests from http to https. To secure the connection, it's using the letsencrypt certificate resolver to provide a certificate.

To deploy the example, run the following command:

$ docker-compose up -d
Creating example-service_nginx_1 ... done

Finally, open your browser on the configured route and see the Nginx welcome page: