Bypass ngrok using a proxy

Question

In order to improve DX, I'm trying to locally redirect ngrok request to localhost:3000 without going to ngrok servers

I need ngrok to embed my app in shopify admin but other than that, I want the requests to go directly to localhost and thus make reloading and hmr much faster

Is there a way to do this using a proxy? Is there a better method?

Chad Johnson · Accepted Answer · 2021-09-28T19:39:48.467

I was able to achieve exactly this via the following:

Set up nginx locally.

Create server configurations for each subdomain; for example:

server {
    listen 80;
    listen 443 ssl;
    server_name example.ngrok.io;
ssl_certificate     /usr/local/etc/ssl/certs/self-signed.crt;
ssl_certificate_key /usr/local/etc/ssl/private/self-signed.key;

ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers         HIGH:!aNULL:!MD5;
ssl_dhparam /usr/local/etc/ssl/certs/dhparam.pem;

location / {
    proxy_pass http://127.0.0.1:3000/;
}

}

Create a self-signed certificate locally for wildcards (I use multiple ngrok tunnels) following this tutorial. Note I changed all instances of "test.cpming.top" to "*.ngrok.io". Also note that I used "2048" instead of "128" for the openssl dhparam command.
Add the tunnel subdomains to /etc/hosts pointing them to 127.0.0.1; for example: 127.0.0.1 example.ngrok.io.

Please note you will need to temporarily disable this by commenting out entries you added in /etc/hosts in order to install the app via OAuth with Shopify.

Things load MUCH faster now in development mode. This also lets me work in coffee shops with lower bandwidth wifi connections, and I use much less bandwidth if I tether to my phone.

Hope this helps.

Bypass ngrok using a proxy

1 Answers1