Local Apps go to public with Traefik and Ngrok via Container Docker

Hai sobat semua, kalian pasti pernah mengalami dalam melakukan homelab di local VM kalian, terkadang ingin di pamerkan pada teman kalian yang lain kan? Nah ini dia solusi akan hal tersebut, kalian bisa menggunakan dua tools di bawah ini agar kalian bisa share project kalian serta pamerin ke teman, bahwa “Saya pernah buat project A, B dan lain sebagai nya”, Langsung saja gas ke penjelasan awal dulu yaa…

Apa itu Traefik?

Jadi, tools pertama yang kalian butuhkan adalah Traefik, Traefik sendiri itu salah satu tools yang dipakai untuk reverse proxy, load balancer serta api gateway. Mudahnya dia ini seperti “Penjaga Gerbang” jadi, contoh nya: saya ingin ke rumah Dimas, nah si Traefik ini akan memberikan alamat lengkap si Dimas, misal di gang apel no 12. Jadi tugas nya untuk mengarahkan ke tujuan apliaksi.

Untuk contoh teknis nya adalah misal saya ingin ke service “Prometheus” maka saya tinggal atur path url dengan /prome maka si Trafik akan mengarahkan ke service Prometheus yang ada di port 9090, jadi saya tinggal akses “localhost” lalu port dari Traefik, misal contoh di 8000, jadi full path nya seperti ini http://localhost:8000/prome.

Tentu, saya akan jelaskan tentang Traefik dan Ngrok, termasuk keuntungan dan kekurangannya.

Traefik

Traefik adalah reverse proxy dan load balancer modern yang dirancang untuk mendeploy microservices dengan mudah. Traefik mendapatkan konfigurasinya secara otomatis dan dinamis dari berbagai provider (seperti Docker, Kubernetes, dan lain-lain) dengan memindai konfigurasi (seperti labels pada Docker Compose yang sudah Anda lihat) secara real-time.

Keuntungan Traefik

Kekurangan Traefik

Apa itu Ngrok?

jadi untuk Ngrok ini adalah salah satu tools untuk reverse proxy, Tunneling serta Api Gateway, Inti nya Ngrok itu bisa membuat service/tools di local komputer kita menjadi public, dan bisa di akses dari internet. Ngrok untuk free tier, itu hanya bisa membuat 1 URL public yang nantinya bisa kita gunakan untuk mengekspose 1 service aja, contoh nya itu seperti pada ilustrasi berikut ini.

Jadi orang selain Agus (pemilik Laptop) itu hanya bisa akses website yang ada di laptop Agus melalui internet, nah nantinya dari internet itu akan mengarahkan ke Ngrok URL public yang sudah di setting, baru orang lain bisa akses, sedangkan kalau Agus, karena dia pemilik laptop nya, dia bebas bisa akses dari Internet maupun langsung di laptop nya sendiri.

Keuntungan Ngrok

Kekurangan Ngrok

Topologi Labs

Requirements Resource

• RAM minimum: 9 GB (Recommend Used 16 GB)
• CPU: 4
• Storage: 35 GB

Implementasi

1. Configuration Prometheus

Pada case kali ini saya akan mencoba pakai sample Prometheus yang di deploy di container docker, Berikut langkah konfigurasi nya.

• Buat file docker-compose.yml dengan command berikut.

  nano docker-compose.yml
  

  ---

• Copy konfigurasi berikut ini agar Prometheus

  services:
    prometheus:
      image: prom/prometheus:latest
      container_name: prometheus
      ports:
        - "9090:9090"
      command:
        - '--config.file=/etc/prometheus/prometheus.yml'
        - '--web.route-prefix=/'
      volumes:
        - ./prome/prometheus.yaml:/etc/prometheus/prometheus.yml:ro
      labels:
        - "traefik.enable=true"
        - "traefik.http.routers.prom.rule=PathPrefix(`/prome`)"
        - "traefik.http.routers.prom.entrypoints=web"
        - "traefik.http.middlewares.prom-strip.stripprefix.prefixes=/prome"
        - "traefik.http.routers.prom.middlewares=prom-strip"
        - "traefik.http.services.prom.loadbalancer.server.port=9090"
      networks:
        - monitoring
  

  ---

  Penjelasan Konfigurasi

• Buat konfigurasi file buat service Prometheus nya, untuk case ini saya spesifik di path ./prome/prometheus.yaml

  mkdir prome
  cd prome
  nano prometheus.yaml
  

  ---

• Paste konfigurasi berikut untuk sebagai target yang nantinya akan diguanakan prometheus untuk register exporter nya. Untuk contoh ini masih default dari prometheus, belum integrate ke exporter lain.

  global:
    scrape_interval: 15s
  
  scrape_configs:
    - job_name: "prometheus"
      static_configs:
        - targets: ["localhost:9090"]
  

  ---

  2. Configuration Grafana

• Buka file docker-compose.yml nya lagi.

  nano docker-compose.yml
  

  ---

• Tambahkan konfigurasi Grafana berikut ini

  services:
    grafana:
      image: grafana/grafana:latest
      container_name: grafana
      ports:
        - "3000:3000"
      environment:
        - GF_SERVER_ROOT_URL=http://172.1.1.12:3000/grafana/
        - GF_SERVER_SERVE_FROM_SUB_PATH=true
      volumes:
        - grafana-storage:/var/lib/grafana
      labels:
        - "traefik.enable=true"
        - "traefik.http.routers.grafana.rule=PathPrefix(`/grafana`)"
        - "traefik.http.services.grafana.loadbalancer.server.port=3000"
        - "traefik.http.routers.grafana.entrypoints=web"
      networks:
        - monitoring
  

  ---

  Penjelasan Konfigurasi

3. Configuration Traefik

• Buka file docker-compose.yml nya lagi.

  nano docker-compose.yml
  

  ---

• Tambahkan konfigurasi Traefik berikut ini beserta network dan storage untuk grafana nya.

  services:
  traefik:
    image: traefik:v3.1
    container_name: traefik
    command:
      - "--entrypoints.web.address=:9000"
      - "--providers.docker=true"
      - "--api.dashboard=true"
      - "--log.level=info"
      - "--api.insecure=true"
    ports:
      - "9000:9000"        # akses utama Prome & Grafana
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
    networks:
      - monitoring
    
  volumes:
    grafana-storage:
  
  networks:
    monitoring:
      driver: bridge
  

  ---

• Create container 3 service tadi dengan command berikut ini.

  docker-compose up -d
  

  ---

• Tunggu beberapa saat, cek log setiap service nya jika ada yg error, pakai command. (Optional jika container Exited)

  docker logs {SERVICE_NAME}
  
  # exp:
  docker logs prome
  docker logs traefik
  docker logs grafana
  

  ---

Penjelasan Konfigurasi Docker-Compose

4. Configuration Ngrok

• Buat account di Ngrok jika belum punya, lalu login dengan account tersebut.
• Open VM atau Homelab kalian yang ingn di expose ke public
• Kemudian add repository Ngrok, lalu Install tools Ngrok. Notes: Untuk installasi ngrok, kalian bisa sesuaikan dengan distro masing - masing, sebagai contoh saya di distro Linux Ubuntu

  curl -sSL https://ngrok-agent.s3.amazonaws.com/ngrok.asc \
      | sudo tee /etc/apt/trusted.gpg.d/ngrok.asc >/dev/null \
      && echo "deb https://ngrok-agent.s3.amazonaws.com bookworm main" \
      | sudo tee /etc/apt/sources.list.d/ngrok.list \
      && sudo apt update \
      && sudo apt install ngrok jq -y
  

  ---

• Add authToken yang di berikan dari Ngrok, scroll sedikit ke bawah pada dashboard Ngrok nya, yangg terdapat command seperti berikut.

  ngrok config add-authtoken {AUTH_TOKEN_NGROK}
  

  ---

• Selanjutnya, buat Ngrok berjalan di background, agar kita tidak perlu jalankan manual ngrok http {PORT},

  nano /etc/systemd/system/ngrok.service
  

• Paste configurasi berikut ini, pastikan pada {PORT_TRAEFIK} di ` ExecStart=/usr/local/bin/ngrok http {PORT_TRAEFIK} –log=stdout, sesuai dengan port Traefik yang nanti akan di deploy, example saya pakai port 8000`.

  [Unit]
  Description=Ngrok Tunnel
  After=network.target
  
  [Service]
  ExecStart=/usr/local/bin/ngrok http 9000 --log=stdout
  Restart=on-failure
  User=root
  StandardOutput=file:/var/log/ngrok.log
  StandardError=file:/var/log/ngrok_error.log
  
  [Install]
  WantedBy=multi-user.target
  

  ---

• Lalu reload daemon agar config service ngrok bisa di baca system dan dapat di jalankan, jalankan perintah berikut.

  sudo systemctl daemon-reload
  sudo systemctl start ngrok
  sudo systemctl enable ngrok
  

  ---

Validasi Akses

validasi akses Service Prometheus dan Grafana dari browser laptop dengan https://{NGROK_URL}/prome dan **https://{NGROK_URL}/grafana

Prometheus

Grafana