Ngrok with Cloudflare domain

Question

I have purchased ngrok pro plan to use whitelabeled domains through cloudflare. But having trouble configuring end to end SSL encryption.

1. React app is running on localhost (http://localhost:3000).
2. created a domain (app.example.com) in ngrok.
3. added CNAME record for xxx.ngrok.io url in cloudflare for app.example.com.
4. SSL is enabled in cloudflare
5. https://app.example.com gives HTTP 520 error on cloudflare

cloudflare has universal certificate on *.example.com domain.

Is there anyway i can have https://app.example.com resolves to https://localhost:3000 through ngrok?

Answer 1

I didn't answer your question. I just want to share, that we can make localhost on our computer accessible through our own domain using cloudflare tunneling.

https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/install-and-setup/tunnel-guide/

Answer 2

I was looking ngrok tunnel solution proposed and I also found a way you can do an Argo Tunnel through cloudflare directly. This can be another approach to the problem. https://developers.cloudflare.com/cloudflare-one/tutorials/share-new-site

Answer 3

Here is one way, assuming you are fine with having Cloudflare only act as DNS:

1. Configure ngrok to serve the correct TLS certificate. In ngrok for your domain app.example.com, select the "Automated TLS certificates" option, which means ngrok will provision one for you.

2. In Cloudflare, "grey cloud the DNS record" so that traffic is no longer proxied through Cloudflare before it is proxied through ngrok. Now it will only be proxied through ngrok before being forwarded to your local server.

3. Start your ngrok tunnel. Assuming your local server is not configured to terminate TLS, you can run something like ngrok http --bind-tls=true --hostname=app.example.com 3000 to start a HTTPS only tunnel endpoint.