DEV Community

Tan
Tan

Posted on

From localhost:3000 to the World: Deploying Your Dockerized Website with Cloudflared + Traefik

localhost meme

“When you send your localhost link to a friend...”

You’ve built an amazing website. It's sleek, fast, and maybe even running on localhost:3000. You're proud of it. So you share it with a friend… and they hit you with:

"Bro, I can't open localhost:3000."

Yep, we've all been that donkey.

Let’s fix that by taking your Dockerized app, pushing it to Docker Hub, then deploying it with Traefik and Cloudflared—securely accessible over the web.

✅ Prerequisites: Your app is Dockerized and you’ve already set up Cloudflared tunnels and domain.

👉 Not done yet? Check this guide first: How to Set Up Cloudflared Tunnel
💡 Note: You’ll need a custom domain (typically ~$10/year), but everything else Cloudflared, Traefik, Docker is completely free.

Architecture Overview

Flow diagram

Why Cloudflared?

  • No need to expose ports.
  • Free SSL via Cloudflare.
  • Keeps your server safe behind Cloudflare’s edge.

Why Traefik?

  • Automatically routes traffic to your containers.
  • Manages HTTPS certificates.
  • Great for multi-container setups.

Step 1: Push Your Dockerized App to Docker Hub

Let’s make your app globally available.

1.1. Build the Docker Image 

docker build -t your-dockerhub-username/your-app-name:latest .
Enter fullscreen mode Exit fullscreen mode

1.2. Log in to Docker Hub 

docker login
Enter fullscreen mode Exit fullscreen mode

1.3. Push the Image 

docker push your-dockerhub-username/your-app-name:latest
Enter fullscreen mode Exit fullscreen mode

Step 2: Define Docker Compose for Deployment 

version: '3.8'

services:
   traefik:
    image: traefik:v3.4
    container_name: traefik
    restart: always
    command:
      - "--api.insecure=true"
      - "--providers.docker=true"
      - "--entrypoints.web.address=:80"
    ports:
      - "80:80"
      - "8181:8181" # dashboard Traefik
    volumes:
      - "/var/run/docker.sock:/var/run/docker.sock:ro"

  my-app:
    image: your-dockerhub-username/your-app-name:latest
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.myapp.rule=Host(`app1.example.com`)"
      - "traefik.http.routers.myapp.entrypoints=websecure"
      - "traefik.http.services.myapp.loadbalancer.server.port=3000"
Enter fullscreen mode Exit fullscreen mode

Step 3: Configure Cloudflared Tunnel

config.yml:

tunnel: my-tunnel-id
credentials-file: /root/.cloudflared/my-tunnel-id.json

ingress:
  - hostname: app1.example.com
    service: http://traefik:80
  - service: http_status:404
Enter fullscreen mode Exit fullscreen mode

Step 4: Deploy the Stack 

docker-compose up -d
cloudflared tunnel run my-tunnel-id
Enter fullscreen mode Exit fullscreen mode

Final Result

“Hey, check out my app at https://app1.example.com — secure, Dockerized, and running via tunnel magic.”

No more "localhost:3000" heartbreaks.

Summary

✅ You learned:

  • How to push your Docker app to Docker Hub
  • How to pull and deploy it with Traefik
  • How to tunnel traffic with Cloudflared

Sources

Author: Hoang Tan Tan
GitHub | LinkedIn

Top comments (0)