---
# System prepended metadata

title: One traefik to
tags: [' Development', ' Best Practices', Programming]

---

---
title: EPFL – IAM+FSD giova's traefik
tags: Programming, Development, Best Practices
description: View the slide with "Slide Mode".
---

<h1>One traefik to</h1>
<h1 class="yess">dev 'em all</h1>

slides: https://hackmd.io/@multiscan/traefik
code: https://github.com/multiscan/dev_traefik

---

## Outline

 * What is Traefik
 * Why using it in dev ?
 * How ?

---

## What is <span class="green">Traefik</span> ?

<span class="bgfico">«The Cloud Native Edge Router»</span>

<h4 class="fragment">A nice project with an awful documentation</h4>

https://traefik.io/traefik/

---

<style>
    
</style>


Traefik can serve several applications

<span class="yess fragment">no reload needed!</span>

<div>
    &nbsp;
</div>

Traefik can take care of SSL certs

<span class="yess fragment">let's encrypt included</span>

<p class="fragment">Used mostly in production, possibly large installations.</p>



---


Plenty of <span class="red">dynamic configuration</span> providers


 * consul
 * <span class="fragment highlight-green">docker</span>
 * etcd
 * files
 * kubernetes
 * &hellip;

---

### Docker provider config

<div class="fragment">

`traefik.yml` static config:

```yaml
providers:
  docker:
    endpoint: "unix:///var/run/docker.sock"
```
</div>

<div class="fragment">

`docker-compose.yml` mount:

```yaml
services:
  traefik:
    ...
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
    ...
```
</div>

---

### Application side


`docker-compose.yml` 

```yaml
services:
  myapp:
    ...
    labels:
      - traefik.http.services.myapp
                    .loadbalancer.server.port=3000
      - traefik.http.routers.myapp
                    .rule=Host("myapp.epfl.cz")
      - traefik.http.routers.myapp.tls=true
```

---


## In DEV ?

 * annoying :sweat: url editing after redirects
 * self signed certificates
 * editing `/etc/hosts` :ant: is cumbersome
 * No _certbot_ for NAT/private addr
 * jungling with ports
   <code class="mini">Bind for 0.0.0.0:9090 failed: port is already allocated.</code>

---

### Proposed Solution


 * DNS entry `*.epfl.cz` resolve to `localhost`
 * wildcard ssl certificate
     * regularly update by me<br/>(Let's Encrypt + Gandi's DNS API)
     * available on keybase
 * keep a single traefik running on dev machine
 * add few labels to container
 
<span class="fragment neon">see your dev app as if it were on a real server</span>

---

### How to
 * clone https://github.com/multiscan/dev_traefik
 * add few vars to `.env` file:
     ```
     DEV_DOMAIN=dev.jkldsa.com
     DOP=docker
     CRTDIR=/keybase/team/epfl_idevfsd/certs
     DOMAINS=epfl.cz dev.jkldsa.com docker.jkldsa.com
     ```
 * `make up`

---

### Caveat
If container needs to contact another via the public interface (_e.g._ app &rarr; oidc auth provider), it will not find it because `localhost` is not the same

Add `extra_hosts` to `docker-compose.yml`:

    extra_hosts:
      - "api.epfl.cz:${DOCKER_IP}"
      - "keycloak.epfl.cz:${DOCKER_IP}"


---

<span class="burn r-fit-text">Thank you!</span>

<style>
    .bgfico {
        display: block;
        color: #FFFFFF;
        font-size: 150%;
        font-style: italic;
        background: linear-gradient(90deg, #0079ae, #517ac7, #8e75d1, #c66ac8, #f25eac, #ff6082, #ff7753, #ff9913);
        padding: 0.2em;
        margin: 1em 0;
        width: auto;
    }
    

    .burn {
        text-shadow: 
            0 -1px 4px #FFF,
            0 -2px 10px #ff0,
            0 -10px 20px #ff8000,
            0 -18px 40px #F00;
    }
    
    .neon {
        color: #FFF;
        text-shadow:
            0 0 1px #000,
            0 0 7px #fff,
            0 0 10px #fff,
            0 0 21px #fff,
            0 0 42px #0fa,
            0 0 82px #0fa,
            0 0 92px #0fa,
            0 0 102px #0fa,
            0 0 151px #0fa;
    }

    .yess {
          font-size: 72px;
          background: linear-gradient(90deg, #0079ae, #517ac7, #8e75d1, #c66ac8, #f25eac, #ff6082, #ff7753, #ff9913);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
    }
    
    .mini {
        font-size: 50%;
    }
    
    .mono {
        font-family: monospace;
    }
    
    code {
        color: #C7254E;
        font-family: monospace;
        font-size: 70%;
    }
    .reveal .cont{
        display: flex;
    }
    .reveal .col{
        flex: 1;
    }

    .reveal .red{
        color: #F55C5C;
    }
    .reveal .green{
        color: #5CF55C;
    }
    .reveal .blue{
        color: #5C5CF5;
    }
    .reveal .history {
        color: #B8860B;
    }
    .reveal em {
        color: #FFE4B5;
    }

    .reveal strong {
        color: #40E0D0;
    }
    
</style>