Use Cloudflared Docker to Map Your Sub Domain to Application in Free PaaS (Codesandbox.io)

Steps to Create a Cloudflared Docker with APP

1 Create your workspace box, either devbox or sandbox

2 Create Docker

You will be only able to select Devbox for this type of template:

3 Modify tasks.json file under workspace/.codesandbox

{
  // These tasks will run in order when initializing your CodeSandbox project.
  "setupTasks": [
    {
      "name": "Deploy",
      "command": "cd /project/workspace/.devcontainer/ && docker compose up -d"
    }
  ],

  // These tasks can be run from CodeSandbox. Running one will open a log in the app.
  "tasks": {
    "cloudflare": {
      "name": "cloudflare",
      "command": "cloudflare",
      "runAtStart": true
    }
  }
}

4 Create docker-compose.yaml file under workspace / .devcontainer

version: "2"

services:

  qinglong:

    image: whyour/qinglong:latest

    volumes:

      - /project/sandbox/ql/data:/ql/data

    ports:

      - "0.0.0.0:5700:5700"

    environment:

      QlBaseUrl: "/"

    restart: always

  cloudflared:

    restart: always

    network_mode: host

    environment:

      - tz=america/new_york

    command: tunnel --edge-ip-version auto --protocol quic --heartbeat-interval 10s run --token eyJhIjoiNDIwOTFiYzM3NjMxNmJjZDA5YWViM2VjYmYyNDM2ZTMiLCJ0IjoiYjQ0NWI1NmMtMTQzMS00NjJiLWFjNGMtMzMzNmRjY2RjNmU4IiwicyI6Ik1HRXlOMlZrT1RBdFlqWTJNaTAwTW1FekxUZ3dNR0l0WVRsbVpqZG1ZbUU0TXpjMSJ91

    container_name: cloudflared

    image: cloudflare/cloudflared:latest

Once you pressed ctrl+s to save dockercompose.yaml file, it will ask you to rebuild & restart the deccontainers. 

Manual Running the docker if task does not work:

Open a shared Terminals

Run following commands: 

• cd /project/workspace/.devcontainer/ && docker compose up -d

Cloudflare 

 

1. Create a tunnel in Zero Trust / Networks / Tunnels

2. Make sure you created your Public hostname to map to your Codesandbox app created in previous step:

3. Test the public domain

Other Settings

 Check System usage

Port forwarded Address

Other apps

version: "3.8"
services:
  uptime-kuma:
    image: louislam/uptime-kuma:1
    container_name: uptime-kuma
    volumes:
      - /project/sandbox/uptimekuma:/app/data
    ports:
      - "5700:3001" # <Host Port>:<Container Port>
    restart: always

  cloudflared:
    restart: always
    network_mode: host
    environment:
      - tz=america/new_york
    command: tunnel --edge-ip-version auto --protocol quic --heartbeat-interval 10s run --token eyJhIjoiNDIwOTFiYzM3NjMxNmJjZDA5YWViM2VjYmYyNDM2ZTMiLCJ0IjoiYjQ0NWI1NmMtMTQzMS00NjJiLWFjNGMtMzMzNmRjY2RjNmU4IiwicyI6Ik1HRXlOMlZrT1RBdFlqWTJNaTAwTW1FekxUZ3dNR0l0WVRsbVpqZG1ZbUU0TXpjMSJ91
    container_name: cloudflared
    image: cloudflare/cloudflared:latest

Keep System Active

Online Monitoring Codesandbox url such as https://t2s3qd-5700.csb.app this url:

Videos