Sharing public using tunnel

[xingren23]

This document will explain how to share your local ComfyFlowApp with public users through ngrok.

Overview

1. Deploy ComfyUI instance and ComfyFlowApp on your PC.
2. Deploy ngrok on your PC.
3. Publish the applications developed in ComfyFlowApp through ngrok to https://comfyflow.app.
4. User use application in https://comfyflow.app

Installation Steps

1. Install ComfyUI and Run it

Simply download, extract using 7-Zip, and run it.
Make sure you place your Stable Diffusion checkpoints/models (the large ckpt/safetensors files) in: ComfyUI\models\checkpoints.
Click run_nvidia_gpu.bat to run ComfyUI; the default is http://127.0.0.1:8188/.
Refer to the official installation tutorial for ComfyUI on GitHub at https://github.com/comfyanonymous/ComfyUI.

2. Install ComfyFlowApp

You can download the integrated package for Windows, comfyflowapp-python-3.11-amd64.7z.
Click run.bat to run ComfyFlowApp; the default is http://127.0.0.1:8501/.
Refer to the official installation tutorial for ComfyFlowApp on GitHub at https://github.com/xingren23/ComfyFlowApp.

3. Install ngrok

Refer to the official ngrok website tutorial at https://dashboard.ngrok.com/get-started/setup/windows.
Download a standalone executable with zero runtime dependencies: ngrok-v3-stable-windows-amd64.
Put your app online with ephemeral domain forwarding to your local port 8188 by running:
ngrok http 8188

Once it's running, your endpoints will be listed on the endpoints page, e.g., https://35d3-2408-8207-2539-a7b0-3988-7bd0-6a4c-2d4e.ngrok-free.app/.

Application Development

1. Develop and Debug ComfyUI Workflow
   Using Rui's CuteYou workflow as an example, it contains 7 ComfyUI nodes and 92 custom nodes, as shown in the image below.

2. Develop a Web Application from the ComfyUI Workflow
   Create a web application, upload an image generated by the workflow, and configure the relevant input parameters and output results as shown in the image below.

3. Publish the Web Application

(1) Preview the application locally to test if it's working correctly.

(2) Bind ngrok's endpoint to comfyflow.app
On https://comfyflow.app/, create a ComfyUI Node and activate your access permissions with a key.

(3)Publish the application
Creators can publish the application to the bound endpoint from their local ComfyFlowApp.

4. Users can access the application
   After users activate their Access Key, they can access the application published at the endpoint via https://comfyflow.app/ (public network).

[xingren23]

In addition to ngrok, you can also use Cloudflared to establish tunnel connections.

How it works

Cloudflared establishes outbound connections (tunnels) between your resources and Cloudflare’s global network. Tunnels are persistent objects that route traffic to DNS records. Within the same tunnel, you can run as many cloudflared processes (connectors) as needed. These processes will establish connections to Cloudflare and send traffic to the nearest Cloudflare data center.

Get Started

To create and manage tunnels, you will need to install and authenticate cloudflared on your origin server. cloudflared is what connects your server to Cloudflare’s global network.
You have the option of creating a tunnel via the dashboard or via the command line. We recommend getting started with the dashboard, since it will allow you to manage the tunnel from any machine.

• Create a remotely-managed tunnel (dashboard)
• Create a locally-managed tunnel (CLI)

[whmc76]

suggest update ngrok website setting, the endpoint will always change to new one. i have to add to comfyflow.app every time.
Create a edge is better
ngrok tunnel --label edge=******************* http://localhost:8188

[xingren23]

suggest update ngrok website setting, the endpoint will always change to new one. i have to add to comfyflow.app every time. Create a edge is better ngrok tunnel --label edge=******************* http://localhost:8188

sure, start ngork tunnel with edge is better.
Edges allow you to configure endpoints (custom domain) that connect your services to the world. All ngrok users get one edge per account. For more edges, upgrade your plan.