How to use Cloudflare Tunnels with HCS.

Cloudflare Tunnels

A guide on how to use Cloudflare Tunnels with HCS.

You can run HCS on your local machine (like old laptop/Raspberry PI) and expose it to the internet without opening any ports on your router with Cloudflare Tunnels.

For more details about CF Tunnels, please visit this page.

Setup Cloudflared

You have at least two ways to setup Cloudflare Tunnels with HCS.

Automated

Setup Tunnels on Cloudflare

  1. Go to https://one.dash.cloudflare.com/.

  2. Select your account.

  3. Open Networks-> Tunnels-> Create a Tunnel

  4. Connector: Cloudflared

  1. Choose any name you like.

    1. Copy your Cloudflare Tunnel Token from any of the commands.

    The token starts with eyJ....

  1. On the Route Tunnel tab, add the following tunnels:

You can use any domains/subdomains. This will make sure you can reach your server through Cloudflare Tunnels

Setup Tunnels on HCS

  1. Add a new server with your server’s IP Address - it will be reconfigured later on.

  1. Validate the server.

  2. After the server is validated, click on Configure in the Cloudflare Tunnels section.

  3. Paste Cloudflare Tunnel Token from the previous step and set the SSH Domain to the domain you set in the previous step.

Manual

WIP

Setup Resources in HCS

You have several options to use Cloudflare Tunnels with HCS.

  1. One domain -> One resource.

  2. Wildcard subdomain -> All resources.

One domain -> One resource

In this case, you need to add a public domain every time you would like to expose a new resource through Cloudflare Tunnels.

  1. Go to your tunnel settings on Cloudflare. (https://one.dash.cloudflare.com/ -> Networks -> Tunnels -> Select your tunnel)

  2. Switch to Public Hostname tab.

  3. Go to HCS and to your resource settings: - Remove any Domains settings. - Set Port Mappings to the same port that you set in the Public Hostname settings.

  1. Deploy & enjoy.

Wildcard subdomain -> All resources

In this case, you only need to setup a wildcard domain once and you can expose all your resources through it.

  1. Go to your tunnel settings on Cloudflare. (https://one.dash.cloudflare.com/ -> Networks -> Tunnels -> Select your tunnel)

  2. Switch to Public Hostname tab.

  3. In Cloudflare go to your DNS settings and add a new CNAME record with the following settings:

    • Name: *

    • Target: <Tunnel ID>.cfargotunnel.com

    • TTL: Auto

  4. Go to HCS and to your resource settings.

Set the Domains to any subdomain of the wildcard domain you set in the previous step.

  1. Deploy & enjoy.

Post Setup

After everything is setup, you can fully disable direct access to your server by disabling all the ports (except SSH (port:22 by default)) on your firewall.

Setup self-hosted HCS

You can use the one domain without HCS Proxy or wildcard setup with HCS Proxy to expose your self-hosted HCS instance to the internet.

With the wildcard setup, you have nothing to do.

With the one domain setup, you need a bit more setup with HCS to make it work.

Let’s say you configured the following Public Hostnames in Cloudflare:

  • app.HCS.io mapped to localhost:8000

  • realtime.HCS.io mapped to localhost:6001

After you installed HCS, you need to add 3 lines your .env file, located in /data/HCS/source folder.

APP_ID=<random string>
APP_KEY=<random string>
APP_NAME=HCS
DB_PASSWORD=<random string>
PUSHER_APP_ID=<random string>
PUSHER_APP_KEY=<random string>
PUSHER_APP_SECRET=<random string>
REDIS_PASSWORD=<random string>

###########
# Add these lines
PUSHER_HOST=realtime.HCS.io
PUSHER_PORT=443
###########

This tells HCS how to connect to it’s realtime server through Cloudflare Tunnels.

Restart HCS with the installation script.

curl -fsSL https://cdn.coollabs.io/HCS/install.sh | bash

If you have a firewall, you also need to allow the following ports.

Verify

  1. Navigate to your HCS instance, as in the example: https://app.HCS.io.

  2. Login with the root user (the first user you created after installation).

  3. Open another tab/window and navigate to https://app.HCS.io/realtime. On the other tab (opened in point 2), you should see a notification about the test event.

  4. If you know what are you doing, you can check the network tab as well. Search for a websocket connection.

Last updated