Ngrok with Cloudflare domain

Viewed 2198

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?

3 Answers

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.

Related