Docker Compose for Traefik (reverse proxy HTTP)

  Apr 8, 2020      2m
   

Docker compose for Traefik

Docker Compose for Traefik (reverse proxy HTTP)

This is a quick tutorial for setting up a reverse proxy with Traefik. For the beginners, we are familiar with Nginx but we don't know how to start using Traefik. I spent two days to learn to configure Traefik and service properly.

Docker Compose for Traefik

Files in one folder:

  • docker-compose.yml: docker compose for Traefik
  • traefik.yaml: Traefik configuration file
  • vscode.yml: VSCode server - a service

Target: http://dev.minhng.info -> Traefik @ 80 -> VSCode container (no port binding)

The first step, point your sub-domain name (eg. sub.example.com) to the static IP (XX.XXX.XXX.XXX) address of your server hosting Traefik and VSCode.

ps. VSCode is just a sample. Feel free to replace it with your backend or api.

Set up Traefik

docker-compose.yml

Feel free to modify:

  • ports
version: '3.5'

services:
  reverse-proxy:
    # The official v2 Traefik docker image
    image: traefik:v2.2    
    ports:
      # The HTTP port
      - "80:80"
      # The Web UI (enabled by --api.insecure=true)
      - "8080:8080"
    networks:
      - traefik
    volumes:
      - ./traefik.yaml:/etc/traefik/traefik.yaml
      # So that Traefik can listen to the Docker events
      - /var/run/docker.sock:/var/run/docker.sock:ro
    # Enables the web UI and tells Traefik to listen to docker
    #command: --api.insecure=true --providers.docker # <- turned off CLI configuration, used file config

networks:
  traefik:
    name: traefik-network

Start Traefik container with the following command:

$ docker-compose up -d

# terminate the Traefik container:
$ docker-copmpose down

Open Traefik web UI at the port 8080

traefik.yaml

api:
  insecure: true
  dashboard: true
  debug: true
  
providers:
  docker: {}

Set up VSCode server

In this tutorial / example, we set up VSCode as a service.

vscode.yml

  • $PWD: replace it with the path to folder on your host.
  • Change VSCode password @ environment variable PASSWORD
  • Routing is configured @ docker container labels
version: '3.5'
services:
  code-server:
    image: codercom/code-server
    #ports: # <- no port binding needed
    #  - '8282:8080'
    volumes:
      - '$PWD:/home/coder/project'
    environment:
      PASSWORD: vscode
    user: root
    ipc: host
    restart: unless-stopped     # or "always"
    networks:
      - traefik
    labels:
      - "traefik.http.routers.vscode-router.rule=Host(`dev.minhng.info`)"
      - "traefik.http.services.vscode-service.loadbalancer.server.port=8080"
      - "traefik.docker.network=traefik-network"
    
networks:
  traefik:
    external:
      name: traefik-network

Start VSCode server:

$ docker-compose -f vscode.yml up -d

# terminate the running VSCode container
$ docker-compose -f vscode.yml down

Notes:

  • At this time, the latest version of Traefik is v2.2.
  • Docker compose version: 3.5. Change to lower version may cause errors.
  • Router rule docs: https://docs.traefik.io/routing/routers/.
  • Specify port if there are many service running in your container, use label "traefik.http.services.MY-SERVICE-NAME.loadbalancer.server.port"
  • Specify network if there are many networks, use label "traefik.docker.network"

Resolve Traefik 504 Gateway Timeout

The error code 504 "GATEWAY TIMEOUT" after configuring Traefik happens when:

Docker compose up Traefik and VSCode (service) in DIFFERENT folders -> Docker will create different networks for those. Two containers are not in the same network and they cannot communicate to each other. So in our compose file, I added network named "traefik-network" to resolve this problem! It took me hours to fix it :D.


More docker-compose files for you: