docs(integration): fully rewritten cf tunnels single resource guide
ShadowArcanist
@@ -37,16 +37,6 @@ A simple high-level overview diagram to give you a visual idea of how this works
|
||||
|
||||
---
|
||||
|
||||
### Quick Links to Important Sections:
|
||||
|
||||
- [Setup your app for tunneling](#_1-setup-your-app-for-tunneling)
|
||||
- [Create a Cloudflare Tunnel](#_2-create-a-cloudflare-tunnel)
|
||||
- [Setup Cloudflare Tunnel on Coolify](#_3-setup-cloudflare-tunnel-on-coolify)
|
||||
- [Expose Multiple Resource on Different Domains](#expose-multiple-resource-on-different-domains)
|
||||
- [Known issues and Solutions](#known-issues-and-solutions)
|
||||
|
||||
---
|
||||
|
||||
|
||||
<Callout type="warn" title="Example Data">
|
||||
|
||||
@@ -65,7 +55,7 @@ The following data is used as an example in this guide. Please replace it with y
|
||||
|
||||
To setup your app for tunneling, follow these steps:
|
||||
|
||||
<ZoomImage src="/docs/images/integrations/cloudflare/tunnels/single-resource/1.webp" />
|
||||
<ZoomImage src="/docs/images/integrations/cloudflare/tunnels/single-resource/0.webp" />
|
||||
|
||||
1. Remove all domains from the **Domains** field.
|
||||
2. Set the correct port in **Ports Exposed** (the port your app uses).
|
||||
@@ -74,117 +64,139 @@ To setup your app for tunneling, follow these steps:
|
||||
|
||||
## 2. Create a Cloudflare Tunnel
|
||||
|
||||
To create a Cloudflare Tunnel, first log in to your Cloudflare account and go to the [Zero Trust](https://one.dash.cloudflare.com/) page.
|
||||
To create a Cloudflare Tunnel, first log in to your [Cloudflare dashboard](https://dash.cloudflare.com/)
|
||||
|
||||
<ZoomImage src="/docs/images/integrations/cloudflare/tunnels/single-resource/1.webp" />
|
||||
|
||||
1. Go to **Networking** in the sidebar.
|
||||
2. Click on **Tunnels**
|
||||
3. Click on **Create tunnel** button
|
||||
|
||||
|
||||
<ZoomImage src="/docs/images/integrations/cloudflare/tunnels/single-resource/2.webp" />
|
||||
|
||||
1. On the Zero Trust page, go to **Networks** in the sidebar.
|
||||
2. Click on **Tunnels**
|
||||
3. Click on **Add a tunnel** button
|
||||
|
||||
You will be prompted to choose a tunnel type. Click the **Select Cloudflared** button.
|
||||
You will be prompted to enter a tunnel name. Enter a name that you prefer and click on **Create tunnel** button.
|
||||
|
||||
<ZoomImage src="/docs/images/integrations/cloudflare/tunnels/single-resource/3.webp" />
|
||||
|
||||
You will be prompted to enter a tunnel name. Choose a name that you prefer.
|
||||
1. Select the **Docker** option
|
||||
2. Copy the docker run command, which contains the token for your tunnel (token starts with "`eyJ`"). Make sure to save only the token, removing the command part before it, and store it in a safe place, as we need it later.
|
||||
|
||||
|
||||
## 3. Deploy cloudflared on Coolify
|
||||
|
||||
Go to your project on Coolify dashboard and click the `+ New` button to create a new resource.
|
||||
|
||||
<ZoomImage src="/docs/images/integrations/cloudflare/tunnels/single-resource/4.webp" />
|
||||
|
||||
Next you will see the configuration page with multiple options to install cloudflared.
|
||||
Search for `Cloudflared` and click on it.
|
||||
|
||||
<ZoomImage src="/docs/images/integrations/cloudflare/tunnels/single-resource/5.webp" />
|
||||
|
||||
Copy the install command, which contains the token for your tunnel (token starts with "eyJ"). Make sure to save only the token, removing the command part before it, and store it in a safe place, as we need it later.
|
||||
Go to the **Environment Variables** page, enter your tunnel token, and deploy the Cloudflared app.
|
||||
|
||||
<ZoomImage src="/docs/images/integrations/cloudflare/tunnels/single-resource/6.webp" />
|
||||
|
||||
Scroll down until you see the **Next** button, then click it.
|
||||
|
||||
Then, you will be prompted to add a hostname.
|
||||
Once cloudflared starts running you will be able to see it's status on Cloudflare dashboard
|
||||
|
||||
<ZoomImage src="/docs/images/integrations/cloudflare/tunnels/single-resource/7.webp" />
|
||||
|
||||
1. **Subdomain** - (Optional) You can make your app/resource accessible on any subdomain/domain. For this guide, we are not using a subdomain.
|
||||
2. **Domain** - Choose the domain you want to use for the tunnel.
|
||||
3. **Path** - Leave this field empty.
|
||||
4. **Type** - Choose **HTTP** (this is very important).
|
||||
5. **URL** - Enter **localhost:4477** The port 4477 is the one we mapped to the host system in [Step 1](#_1-setup-your-app-for-tunneling). Replace 4477 with your own port.
|
||||
6. After filling in the details, click the **Save Tunnel** button.
|
||||
Click on continue button to create the tunnel.
|
||||
|
||||
## 3. Setup Cloudflare Tunnel on Coolify
|
||||
|
||||
To set up the tunnel on Coolify, follow these steps:
|
||||
## 4. Set Up TLS Encryption
|
||||
To make Cloudflare use stricter encryption when connecting to your server, configure your TLS encryption in Cloudflare:
|
||||
|
||||
<ZoomImage src="/docs/images/integrations/cloudflare/tunnels/single-resource/8.webp" />
|
||||
|
||||
Go to your project on Coolify dashboard and click the **+ New** button to create a new resource.
|
||||
1. Go to **SSL/TLS** in Cloudflare.
|
||||
2. Select **Overview**.
|
||||
3. Click **Configure** button
|
||||
|
||||
<ZoomImage src="/docs/images/integrations/cloudflare/tunnels/single-resource/9.webp" />
|
||||
|
||||
You will see many options to deploy a new app. Search for Cloudflared and click on it.
|
||||
1. Choose **Full (Strict)** as the encryption mode.
|
||||
2. Click **Save** button
|
||||
|
||||
|
||||
## 5. Configure tunnel routes
|
||||
|
||||
<ZoomImage src="/docs/images/integrations/cloudflare/tunnels/single-resource/10.webp" />
|
||||
|
||||
Go to the **Environment Variables** page, enter your tunnel token, and deploy the Cloudflared app. This token was copied in [Step 2](#_2-create-a-cloudflare-tunnel)
|
||||
|
||||
**Congratulations**! You've successfully set up a resource that can be accessed by anyone on the internet your domain.
|
||||
|
||||
|
||||
<Callout type="error" title="HEADS UP!">
|
||||
|
||||
**The steps above show how to tunnel a single resource. Below are the steps for tunneling multiple resources**
|
||||
|
||||
</Callout>
|
||||
|
||||
|
||||
## Tunnel Multiple Resources
|
||||
|
||||
The easiest way to tunnel multiple resources is by following our [Tunnel All Resources](/integrations/cloudflare/tunnels/all-resource) guide, which uses Coolify's built-in proxy. However, if you prefer not to use the proxy, there are two alternative methods:
|
||||
|
||||
- [Tunnel Multiple Single Resources](#tunnel-multiple-single-resources)
|
||||
- [Tunnel Coolify](#tunnel-coolify)
|
||||
|
||||
Tunneling multiple single resources is straightforward, but tunneling Coolify itself requires additional manual setup.
|
||||
|
||||
## Tunnel Multiple Single Resources
|
||||
|
||||
If you want to expose different apps individually, you can follow our [Tunnel All Resources](/integrations/cloudflare/tunnels/all-resource), or take an alternate approach:
|
||||
1. Click on your tunnel
|
||||
2. Click on **Configure** option
|
||||
|
||||
<ZoomImage src="/docs/images/integrations/cloudflare/tunnels/single-resource/11.webp" />
|
||||
|
||||
1. Follow [Step 1](#_1-setup-your-app-for-tunneling) for your new resource.
|
||||
2. Create a new public hostname on Cloudflare Tunnel as described in [Step 2](#_2-create-a-cloudflare-tunnel).
|
||||
1. Select **Routes**.
|
||||
2. Click **Add route** button
|
||||
|
||||
There’s no need to create a separate tunnel for each resources, simply create a new hostname and point it to the port your app is listening on.
|
||||
<ZoomImage src="/docs/images/integrations/cloudflare/tunnels/single-resource/12.webp" />
|
||||
|
||||
## Tunnel Coolify
|
||||
3. Select **Published Application** as the route type
|
||||
|
||||
Tunneling Coolify itself to make it accessible over a domain requires a bit more manual configuration. Here's how you can set it up:
|
||||
<ZoomImage src="/docs/images/integrations/cloudflare/tunnels/single-resource/13.webp" />
|
||||
|
||||
### 1. Create Public Hostnames in Cloudflare Tunnel
|
||||
|
||||
Follow [Step 2](#_2-create-a-cloudflare-tunnel) from the main guide to create public hostnames for each service Coolify exposes. Use the following mapping:
|
||||
1. **Subdomain** - (Optional) You can make your resource accessible on any subdomain/domain. For this guide, we are using the `helixa` subdomain.
|
||||
2. **Domain** - Choose the domain you want to use for the tunnel.
|
||||
3. **Path** - Leave this field empty.
|
||||
4. **Service URL** - Enter **http://localhost:4477** (this is very important). The port 4477 is the one we mapped to the host system in [Step 1](/integrations/cloudflare/tunnels/single-resource#1-setup-your-app-for-tunneling).
|
||||
6. After filling in the details, click the **Add route** button.
|
||||
|
||||
<ZoomImage src="/docs/images/integrations/cloudflare/tunnels/single-resource/14.webp" />
|
||||
|
||||
- **Hostnames**:
|
||||
1. `app.shadowarcanist.com/terminal/ws` → `localhost:6002` (WebSocket terminal)
|
||||
2. `realtime.shadowarcanist.com` → `localhost:6001` (Realtime server)
|
||||
3. `app.shadowarcanist.com` → `localhost:8000` (Coolify dashboard)
|
||||
|
||||
- **Type**: HTTP (Ensure you select HTTP for each hostname.)
|
||||
**Congratulations**! You've successfully set up a resource that can be accessed by anyone on the internet on your domain.
|
||||
|
||||
---
|
||||
|
||||
## Tunnel Multiple Resources
|
||||
|
||||
The easiest way to tunnel multiple resources is by following our [Tunnel All Resources](/integrations/cloudflare/tunnels/single-resource) guide, which uses Coolify's built-in proxy.
|
||||
|
||||
However, if you prefer not to use the proxy, there are two alternative methods:
|
||||
|
||||
|
||||
<Tabs items={['Tunnel Multiple Single Resources', 'Tunnel Coolify']}>
|
||||
|
||||
<Tab value="Tunnel Multiple Single Resources">
|
||||
|
||||
If you want to expose different apps individually, you can follow our [Tunnel All Resources](/integrations/cloudflare/tunnels/single-resource), or take an alternate approach:
|
||||
|
||||
1. Follow [Step 1](/integrations/cloudflare/tunnels/single-resource#1-setup-your-app-for-tunneling) for your new resource.
|
||||
|
||||
2. Create a new route on Cloudflare Tunnel as described in [Step 5](/integrations/cloudflare/tunnels/single-resource#5-configure-tunnel-routes).
|
||||
|
||||
There’s no need to create a separate tunnel for each resources, simply create a new route and point it to the port your app is listening on.
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab value="Tunnel Coolify">
|
||||
|
||||
Tunneling Coolify itself to make it accessible over a domain requires a bit more manual configuration. Here's how you can set it up:
|
||||
|
||||
### 1. Create routes in Cloudflare Tunnel [!toc]
|
||||
|
||||
Follow [Step 5](/integrations/cloudflare/tunnels/single-resource#5-configure-tunnel-routes) to create routes for each service Coolify exposes. Use the following mapping:
|
||||
|
||||
<ZoomImage src="/docs/images/integrations/cloudflare/tunnels/single-resource/15.webp" />
|
||||
|
||||
| Domain / Path | Service | Purpose |
|
||||
|--------------------------------------------|-------------------|----------------------|
|
||||
| `coolify.shadowarcanist.com/terminal/ws` | `http://localhost:6002` | WebSocket terminal |
|
||||
| `coolify-realtime.shadowarcanist.com` | `http://localhost:6001` | Realtime server |
|
||||
| `coolify.shadowarcanist.com` | `http://localhost:8000` | Coolify dashboard |
|
||||
|
||||
|
||||
<Callout type="warn" title="HEADS UP!">
|
||||
|
||||
The order of the hostnames matters! Be sure to match it exactly as shown above.
|
||||
The order of the routes matters! Be sure to match it exactly as shown above.
|
||||
|
||||
</Callout>
|
||||
|
||||
|
||||
---
|
||||
|
||||
### 2. Update Coolify’s `.env` File
|
||||
### 2. Update Coolify’s `.env` File [!toc]
|
||||
|
||||
After creating public hostnames, update the `.env` file in your Coolify instance located at `/data/coolify/source` to enable connections to the realtime server. Add the following lines:
|
||||
|
||||
@@ -200,14 +212,14 @@ REDIS_PASSWORD=<random string>
|
||||
|
||||
###########
|
||||
# Add these lines
|
||||
PUSHER_HOST=realtime.shadowarcanist.com
|
||||
PUSHER_HOST=coolify-realtime.shadowarcanist.com
|
||||
PUSHER_PORT=443
|
||||
###########
|
||||
```
|
||||
|
||||
This ensures that Coolify uses the Cloudflare Tunnel for its realtime server.
|
||||
|
||||
### 3. Restart Coolify
|
||||
### 3. Restart Coolify [!toc]
|
||||
|
||||
Run the following command to restart Coolify and apply the changes:
|
||||
|
||||
@@ -215,10 +227,10 @@ Run the following command to restart Coolify and apply the changes:
|
||||
curl -fsSL https://cdn.coollabs.io/coolify/install.sh | bash
|
||||
```
|
||||
|
||||
### 4. Verify the Setup
|
||||
### 4. Verify the Setup [!toc]
|
||||
|
||||
1. Access your Coolify dashboard at `https://app.shadowarcanist.com`.
|
||||
2. Test the realtime functionality by visiting `https://app.shadowarcanist.com/realtime` in another browser tab. You should see a notification about a test event.
|
||||
1. Access your Coolify dashboard at `https://coolify.shadowarcanist.com`.
|
||||
2. Test the realtime functionality by visiting `https://coolify.shadowarcanist.com/realtime` in another browser tab. You should see a notification about a test event.
|
||||
3. If you know what are you doing, you can check the network tab as well. Search for a websocket connection.
|
||||
|
||||
|
||||
@@ -228,20 +240,31 @@ If you use a firewall, ensure that the required ports (e.g., `8000`, `6001`, `60
|
||||
|
||||
</Callout>
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
## Known issues and Solutions
|
||||
|
||||
When you create a new public hostname in [Step 2](#_2-create-a-cloudflare-tunnel), Cloudflare will create a DNS record for the hostname.
|
||||
When you create a new routes in [Step 5](/integrations/cloudflare/tunnels/single-resource#5-configure-tunnel-routes), Cloudflare will create a DNS record for the hostname.
|
||||
|
||||
However, if a DNS record for the hostname already exists, Cloudflare won’t create a new one.
|
||||
However, if a DNS record for the hostname already exists, Cloudflare won’t update existing record.
|
||||
|
||||
In this case, your app won’t work. To fix this issue, follow the steps below:
|
||||
|
||||
<ZoomImage src="/docs/images/integrations/cloudflare/tunnels/single-resource/12.webp" />
|
||||
<ZoomImage src="/docs/images/integrations/cloudflare/tunnels/all-resource/8.webp" />
|
||||
|
||||
First, copy your tunnel ID from the Tunnels page on the Cloudflare dashboard.
|
||||
1. Click on your tunnel
|
||||
2. Click on **Configure** option
|
||||
|
||||
<ZoomImage src="/docs/images/integrations/cloudflare/tunnels/single-resource/13.webp" />
|
||||
<ZoomImage src="/docs/images/integrations/cloudflare/tunnels/all-resource/18.webp" />
|
||||
|
||||
3. Copy your tunnel ID from the Tunnels details section.
|
||||
|
||||
<ZoomImage src="/docs/images/integrations/cloudflare/tunnels/all-resource/19.webp" />
|
||||
|
||||
Create a new DNS record with the following details:
|
||||
|
||||
|
||||
|
After Width: | Height: | Size: 155 KiB |
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 155 KiB |
|
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 147 KiB |
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 109 KiB |
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 117 KiB |
|
Before Width: | Height: | Size: 73 KiB After Width: | Height: | Size: 138 KiB |
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 130 KiB |
|
After Width: | Height: | Size: 152 KiB |
|
Before Width: | Height: | Size: 72 KiB After Width: | Height: | Size: 114 KiB |
|
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 139 KiB |
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 122 KiB |
|
Before Width: | Height: | Size: 64 KiB After Width: | Height: | Size: 135 KiB |
|
Before Width: | Height: | Size: 64 KiB After Width: | Height: | Size: 140 KiB |
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 141 KiB |
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 148 KiB |
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 119 KiB |