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

Cloudflared docker has Cloudflare Tunnel client which can easily and securely exposes private services to public through the Cloudflare edge network. This blog post shows you how to deploy this Cloudflared docker into PaaS plaform such as Codesandbox.io to map your sub domain to the apps from private PaaS network to public.

With this Cloudfalred docker, You can then use it to expose:

Private HTTP-based services exposed on a public DNS hostname, optionally locked down by Cloudflare Access (see https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/⁠ and https://developers.cloudflare.com/cloudflare-one/applications/configure-apps/self-hosted-apps/⁠ )
Private networks accessed by TCP/UDP IP/port by WARP enrolled users, with a Zero Trust approach, to squash away your legacy VPN (see https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/private-net/⁠ )

Docker Hub Site: https://hub.docker.com/r/cloudflare/cloudflared

Github site: https://github.com/cloudflare/cloudflared

Note: Here is another way to map your domain to Codesandbox PaaS, which is to use vercel, as shown from github project: https://github.com/k0baya/reserve-vercel/.

Codesandbox Free Tier

Usage

Up to 40 hours worth of VM credits per month
VMs up to 4 vCPUs + 8 GiB RAM
5 private Sandboxes
Unlimited public Sandboxes
Unlimited Devboxes and repositories
5 members

Features

Private Sandboxes, Devboxes & repos
100 Codeium AI code completions
Live collaboration
VS Code extension
Instant environment resume
Instant environment share

Usage status:

Each Nano VM will cost you 10 credits / hour:

Every month, you will get 400 credits to use, which is 40 hours for a Nano vm.

Nano vm has 2vCPUs, 4GB RAM, 20GB Disk.

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 eyJhIjoiN2YzNjkyNmRlOTI3ZWQ3NmEwYThhOGYyNWFhZjMxOGMiLCJ0IjoiODQ3YzM3NTctODRhZC00YjExLTliNzAtMmNiZmUwZjgzYmNhIiwicyI6Ik1qTTJZekV5T1RndFkyVXdPQzAwWkRCaExUaGpZbVF0WkRVMk1ETTRNREl3TldSbSJ91
    container_name: cloudflared
    image: cloudflare/cloudflared:latest

Once you pressed ctrl+s to save docker-compose.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

Uptime Kuma

Other apps

Uptime-kuma

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 eyJhIjoiN2YzNjkyNmRlOTI3ZWQ3NmEwYThhOGYyNWFhZjMxOGMiLCJ0IjoiODQ3YzM3NTctODRhZC00YjExLTliNzAtMmNiZmUwZjgzYmNhIiwicyI6Ik1qTTJZekV5T1RndFkyVXdPQzAwWkRCaExUaGpZbVF0WkRVMk1ETTRNREl3TldSbSJ91
    container_name: cloudflared
    image: cloudflare/cloudflared:latest

Multiple dockers deploy together:

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

  qinglong:
    image: whyour/qinglong:latest
    volumes:
      - /project/sandbox/ql/data:/ql/data
    ports:
      - "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 eyJhIjoiN2YzNjkyNmRlOTI3ZWQ3NmEwYThhOGYyNWFhZjMxOGMiLCJ0IjoiODQ3YzM3NTctODRhZC00YjExLTliNzAtMmNiZmUwZjgzYmNhIiwicyI6Ik1qTTJZekV5T1RndFkyVXdPQzAwWkRCaExUaGpZbVF0WkRVMk1ETTRNREl3TldSbSJ91
    container_name: cloudflared
    image: cloudflare/cloudflared:latest

Keep System Active

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

1 cron-job.org
2 UptimeRobot

Or, create your own monitor site:

Uptime-Kuma

Videos

Use Cloudflare Tunnel Docker to Expose Your Private Applications to Internet

Docker Compose

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

HFS

Docker hub : https://hub.docker.com/r/rejetto/hfs

Github : https://github.com/rejetto/hfs

docker run -d -p 8080:8080 -e HFS_CREATE_ADMIN=password123 -e HFS_PORT=8080 rejetto/hfs:v0.53.0

services:
    hfs:
        ports:
            - 8080:8080
        environment:
            - HFS_CREATE_ADMIN=password123
            - HFS_PORT=8080
        image: rejetto/hfs:v0.53.0

You might want to mount your own configuration file folder and file folder into the docker-compose.yaml file configuraiton.

With Cloudflared

services:
    hfs:
        ports:
            - 8080:8080
        environment:
            - HFS_CREATE_ADMIN=password123
            - HFS_PORT=8080
        image: rejetto/hfs:v0.53.0

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

If add following code into docker-compose.yaml file, it wont work properly:

volumes:
- ./hfsconf:/home/hfs/.hfs # for hfs conf persistence
- ./myDisk:/app/myDisk # for your files
# don't forget to share volumes to access certificate files

Qinglong

Map to 5700 port

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

Alist

Mapping to 5244 port

如果需要使用 Aria2 实现离线下载，将last line in the code的 image 指定的镜像更改为 xhofe/alist-aria2:main 即可

version: '3.3'

services:

alist:

restart: always

volumes:

- '/project/sandbox/alist:/opt/alist/data'

ports:

- '5244:5244'

environment:

- PUID=0

- PGID=0

- UMASK=022

container_name: alist

image: 'xhofe/alist:latest'

Halo

映射 8090 端口

version: "3"

services:

halo:

image: halohub/halo:2.11

container_name: halo

restart: on-failure:3

depends_on:

halodb:

condition: service_healthy

networks:

halo_network:

volumes:

- /project/sandbox/data/halo2:/root/.halo2

ports:

- "8090:8090"

healthcheck:

test: ["CMD", "curl", "-f", "http://localhost:8090/actuator/health/readiness"]

interval: 30s

timeout: 5s

retries: 5

start_period: 30s

command:

- --spring.r2dbc.url=r2dbc:pool:postgresql://halodb/halo

- --spring.r2dbc.username=halo

# PostgreSQL 的密码，请保证与下方 POSTGRES_PASSWORD 的变量值一致。

- --spring.r2dbc.password=12345678

- --spring.sql.init.platform=postgresql

# 外部访问地址，请根据实际需要修改

- --halo.external-url=http://localhost:8090/

halodb:

image: postgres:15.4

container_name: halodb

restart: on-failure:3

networks:

halo_network:

volumes:

- /project/sandbox/data/db:/var/lib/postgresql/data

ports:

- "5432:5432"

healthcheck:

test: [ "CMD", "pg_isready" ]

interval: 10s

timeout: 5s

retries: 5

environment:

- POSTGRES_PASSWORD=12345678

- POSTGRES_USER=halo

- POSTGRES_DB=halo

- PGUSER=halo

networks:

halo_network:

Microsoft_365_E5_RenewX

映射端口 1066

version: '3.5'

services:

renewx:

image: gladtbam/ms365_e5_renewx:latest

container_name: renewx

environment:

- TZ=america/new_york

volumes:

- /project/sandbox/E5RenewX/Deploy:/renewx/Deploy

- /project/sandbox/E5RenewX/Appdata:/renewx/appdata

ports:

- "1066:1066"

restart: unless-stopped

需要新建 Config.xml 文件放在 Deploy 内，默认的 Config.xml 文件内容如下：

<?xml version="1.0" encoding="utf-8" ?>

<ICP>

<Link>https://beian.miit.gov.cn</Link>

</ICP>

<CDN>

<CSS>https://cdn.staticfile.org/bootstrap/5.1.3/css/bootstrap.min.css</CSS>

<JS>https://cdn.staticfile.org/bootstrap/5.1.3/js/bootstrap.bundle.min.js</JS>

</CDN>

</Serivce>

<HTTPS>

<Enable>false</Enable>

>

> <Certificate></Certificate>

>

> <Password></Password>

> </HTTPS>

>

> <ShareSite>

>

> <Enable>false</Enable>

>

> <SMTP>

>

> <Email></Email>

>

> <Password></Password>

>

> <Host></Host>

>

> <Port>587</Port>

>

> <EnableSSL>true</EnableSSL>

> </SMTP>

>

> <OAuth>

>

> <Microsoft>

>

> <Enable>true</Enable>

>

> <ClientId></ClientId>

>

> <ClientSecret></ClientSecret>

> </Microsoft>

>

> <Github>

>

> <Enable>true</Enable>

>

> <ClientId></ClientId>

>

> <ClientSecret></ClientSecret>

> </Github>

> </OAuth>

>

> <System>

>

> <AllowRegister>false</AllowRegister>

> <!--站点启动后默认公告（换行符请使用

进行换行）-->

> <Notice></Notice>

>

> <Master></Master>

>

> <MasterLink></MasterLink>

>

> <DefaultQuota>1</DefaultQuota>

>

> <AutoSpecialPardonInterval>30</AutoSpecialPardonInterval>

> </System>

> </ShareSite>

> </Configuration>

> ```

> XML

Pandora-Next

(https://github.com/pandora-next/deploy)

映射端口 8181

version: '3.3'

services:

pandora-next:

image: pengzhile/pandora-next

container_name: PandoraNext

network_mode: bridge

restart: always

ports:

- "8181:8181"

volumes:

- /project/sandbox/pandora-next/data:/data

- /project/sandbox/pandora-next/sessions:/root/.cache/PandoraNext

Uptime-Kuma

映射端口 3001

version: '3.8'

services:

uptime-kuma:

image: louislam/uptime-kuma:1

container_name: uptime-kuma

volumes:

- /project/sandbox/uptimekuma:/app/data

ports:

- "3001:3001" # <Host Port>:<Container Port>

restart: always

KodBox

映射端口 8080

version: '3.5'

services:

db:

image: mariadb

command: --transaction-isolation=READ-COMMITTED --binlog-format=ROW

volumes:

- "/project/sandbox/db:/var/lib/mysql"

environment:

- "TZ=america/new_york"

- "MYSQL_ROOT_PASSWORD=jiehdo!25165n"

- "MYSQL_DATABASE=kodbox"

- "MYSQL_USER=bodbox"

- "MYSQL_PASSWORD=jiehdo!25165n"

restart: always

app:

image: kodcloud/kodbox

ports:

- 8080:80

links:

- db

- redis

volumes:

- "/project/sandbox/site:/var/www/html"

restart: always

redis:

image: redis:alpine

environment:

- "TZ=america/new_york"

restart: always

如果照搬上面的设置，初始化时数据库和 Redis 的设置应该如图填写

Zfile

映射端口 8080

version: '3.3'

services:

zfile:

container_name: zfile

restart: always

ports:

- '8080:8080'

volumes:

- '/project/sandbox/zfile/db:/root/.zfile-v4/db'

- '/project/sandbox/zfile/logs:/root/.zfile-v4/logs'

- '/project/sandbox/zfile/file:/data/file'

image: zhaojun1998/zfile

PanIndex

映射端口 5238

version: '3.3'

services:

panindex:

container_name: panindex

restart: always

ports:

- '5238:5238'

volumes:

- '/project/sandbox/PanIndex/data:/app/data'

environment:

- "PORT=5238"

image: iicm/pan-index:latest

ShareList

映射端口 33001

version: '3.3'

services:

sharelist:

container_name: sharelist

restart: always

ports:

- '33001:33001'

volumes:

- '/project/sandbox/sharelist:/sharelist/cache'

image: reruin/sharelist:next

Cloudreve

映射端口 5212

进入容器需要先手动创建几个文件，在 Terminal 中输入以下指令即可：

mkdir -p cloudreve && cd cloudreve \

&& mkdir -vp cloudreve```bash

/cloudreve/uploads

&& touch cloudreve/conf.ini \

&& touch cloudreve/cloudreve.db \

&& mkdir -p aria2/config \

&& mkdir -p data/aria2 \

&& chmod -R 777 data/aria2

version: "3.8"

services:

cloudreve:

container_name: cloudreve

image: cloudreve/cloudreve:latest

restart: unless-stopped

ports:

- "5212:5212"

volumes:

- /project/sandbox/cloudreve/data:/data

- /project/sandbox/cloudreve/cloudreve/uploads:/cloudreve/uploads

- /project/sandbox/cloudreve/cloudreve/conf.ini:/cloudreve/conf.ini

- /project/sandbox/cloudreve/cloudreve/cloudreve.db:/cloudreve/cloudreve.db

- /project/sandbox/cloudreve/cloudreve/avatar:/cloudreve/avatar

depends_on:

- aria2

aria2:

container_name: aria2

image: p3terx/aria2-pro

restart: unless-stopped

environment:

- RPC_SECRET=jif1568dw87

- RPC_PORT=6800

volumes:

- /project/sandbox/cloudreve/aria2/config:/config

- /project/sandbox/cloudreve/data:/data

Aria2 的 token 默认为 jif1568dw87，如有需要自行修改。初始账号和密码，请在 Terminal 中输入命令 docker logs cloudreve 后在日志中查找。

Typecho

映射端口 8080

version: '3.7'

services:

typecho:

image: joyqi/typecho:nightly-php7.4-apache

container_name: typecho-server

restart: always

environment:

- TIMEZONE=america/new_york

ports:

- 8080:80

volumes:

- /project/sandbox/typecho:/app/usr

depends_on:

- mariadb

mariadb:

image: mariadb

container_name: mariadb

command: --transaction-isolation=READ-COMMITTED --binlog-format=ROW

volumes:

- "/project/sandbox/db:/var/lib/mysql"

environment:

- "TZ=america/new_york"

- "MYSQL_ROOT_PASSWORD=jiehdo!25165n"

- "MYSQL_DATABASE=typecho"

- "MYSQL_USER=typecho"

- "MYSQL_PASSWORD=jiehdo!25165n"

restart: always

如果照搬此 docker-compose.yaml，初始设置数据库时应该如此填写：

Baota_Panel

端口 8888 为面板，2022 为 SSH 端口，2021 为 FTP 端口，2080 和 2443 为网页服务预留端口，2888 是官方给的，不知道作用。

version: '3'

services:

baota:

image: gettionhub/baota-docker:ltd

container_name: baota

volumes:

- /project/sandbox/www/website_data:/www/wwwroot

- /project/sandbox/www/mysql_data:/www/server/data

- /project/sandbox/www/vhost:/www/server/panel/vhost

ports:

- "8888:8888"

- "2022:22"

- "2021:21"

- "2443:2443"

- "2080:2080"

- "2888:2888"

restart: always

面板入口为8888端口的那个网址后面加上 /baota，形同 https://t6a4m-8888.csb.app/baota。

初始用户名、密码都为baota

容器内root用户的ssh密码也是baota

WordPress

映射端口8080

version: '3.1'

services:

wordpress:

image: wordpress

restart: always

ports:

- 8080:80

environment:

WORDPRESS_DB_HOST: db

WORDPRESS_DB_USER: exampleuser

WORDPRESS_DB_PASSWORD: examplepass

WORDPRESS_DB_NAME: exampledb

volumes:

- /project/sandbox/wordpree/app:/var/www/html

db:

image: mysql:5.7

restart: always

environment:

MYSQL_DATABASE: exampledb

MYSQL_USER: exampleuser

MYSQL_PASSWORD: examplepass

MYSQL_RANDOM_ROOT_PASSWORD: '1'

volumes:

- /project/sandbox/wordpree/db:/var/lib/mysql

Memos

映射端口5230

version: "3.0"

services:

memos:

image: neosmemo/memos:latest

container_name: memos

volumes:

- /project/sandbox/memos/:/var/opt/memos

ports:

- 5230:5230

Ghost

映射端口8080

首次启动会反复重启几次等待数据库创建文件，是正常的。

version: '3.1'

services:

ghost:

image: ghost:4-alpine

restart: always

ports:

- 8080:2368

environment:

database__client: mysql

database__connection__host: db

database__connection__user: root

database__connection__password: example

database__connection__database: ghost

url: http://localhost:8080

volumes:

- /project/sandbox/ghost/app:/var/lib/ghost/content

db:

image: mysql:8.0

restart: always

environment:

MYSQL_ROOT_PASSWORD: example

volumes:

- /project/sandbox/ghost/db:/var/lib/mysql

NGINX-ui

面板端口为8080。网页服务端口预留为8443。

version: '3.3'

services:

nginx-ui:

stdin_open: true

tty: true

container_name: nginx-ui

restart: always

environment:

- TZ=america/new_york

volumes:

- '/project/sandbox/appdata/nginx:/etc/nginx'

- '/project/sandbox/appdata/nginx-ui:/etc/nginx-ui'

- '/project/sandbox/www:/var/www'

ports:

- 8080:80

- 8443:443

image: 'uozi/nginx-ui:latest'

以上是一系列在 CodeSandBox 上配合 Cloudflared 使用的 Docker Compose 配置。每个配置中都包含了服务的端口映射、容器名称、镜像来源等信息。

Cloudflared 的部分

version: '3.3'

services:

cloudflared:

restart: always

network_mode: host

environment:

- TZ=america/new_york

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

container_name: cloudflared

image: cloudflare/cloudflared:latest

References

https://github.com/k0baya/xiaoya_alist_docker_on_render
在 CodeSandBox 上部署docker并使用Cloudflare Tunnel打通自己的域名——以青龙面板为例
在CodeSandBox上部署docker并使用Cloudflare Tunnel打通自己的域名 - https://www.kuggg.org/archives/1705762042019
适用于 CodeSandBox 的 Docker Compose 配置 - https://www.kuggg.org/archives/1705763942662
CodeSandbox - Getting started with Docker

Latest

NETSEC

Saturday, November 16, 2024

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

Codesandbox Free Tier

Steps to Create a Cloudflared Docker with APP

Cloudflare

Other Settings

Other apps

Keep System Active

Videos

Docker Compose

HFS

Qinglong

Alist

Halo

Microsoft_365_E5_RenewX

Pandora-Next

Uptime-Kuma

KodBox

Zfile

PanIndex

ShareList

Cloudreve

Typecho

Baota_Panel

WordPress

Memos

Ghost

NGINX-ui

References

Subscribe via email

No comments:

Post a Comment

Search

About + Social

NETSEC Blog

Categories

Popular

Recent Comments

51SEC Sites

Blog Archive

Translate

Pages

Contact Us

YouTube