Ngrok? You Might Not Need It

Gabriel Br
Dec 2, 2018 · 5 min read

So I have just known this nifty tool called ngrok. I was pretty impressed at that time, knowing that this tool will bypass the “I have no public IP” barrier that most beginners have.

While certainly useful for beginners, I can’t help but notice that this tool is heavily used by “expert” users in development as well (HTTPS tunneling is pretty useful, especially when you want to develop a LINE chatbot). People just don’t want to deploy their app for every changes they made.

During the last few months, I have been using ngrok to develop web applications. But then, I don’t really want to get a random subdomain every time I restart the client or it simply got disconnected. At some occasions, I need to have more than 1 tunnel as well.

Premium?

In order to get more than 1 tunnel and the privilege of a custom subdomain, we need to buy a premium account on ngrok, which price is INSANE in my opinion.

Ngrok pricing

Basically you need to pay them $10 MINIMUM if you want it monthly. Even a 512 Mb RAM VPS from DigitalOcean costs only $5. That’s why I decided to setup my own.

My Actual Setup

As I always did, I went overboard in my setup. In order to setup a one-for-all tunnel, I configured an OpenVPN server, bought a Mikrotik Router Board, connected the mikrotik as an OpenVPN client, use it as a NAT, then forwards the connections to my network. Here is a simple schematic.

So yeah, a bit overkill but at least I don’t need to connect each PC to VPN (I have quite a few). Now port forwarding is as easy as adding a rule to the Mikrotik. I certainly aware that this kind of setup is not for everyone. So here’s a simpler alternative.

SSH Tunnel Saves The Day

So the concept of tunneling connection has been around for some time. Either it’s used as a proxy or reverse proxy, it has helped many. Now, why SSH? SSH or secure shell are automatically installed in many linux server, lightweight (compared to other alternative for tunneling like VPN), and very easy to setup on both side.

The difference between proxy and reverse proxy. Source : http://itdoc.hitachi.co.jp/manuals/3020/30203Y1800e/FIGURE/ZU021200.GIF

Now as you can see in the picture, what you need is a reverse proxy to forward connections from your server to the client (your development PC/laptop).

Things You Need

  1. A very cheap VPS. I usually buy some at LowEndSpirit. I doubt any VPS provider can compete such price ($4 / year). The only downside is the VPS is placed behind NAT, limiting your incoming ports to only 20. But if you are new, just use a more user friendly provider such as DigitalOcean.
  2. Subdomain/domain (optional). You can get this on many platforms. Just search “Free domain” or “Free subdomain” on google. You don’t need this if you are okay using naked IP.

The Steps

  1. Buy the VPS (just choose Ubuntu/Debian for simplicity), you should get a ssh credential. Usually the username is root with some randomly generated password.
  2. Now try to connect your PC to the server through SSH

ssh root@111.111.111.111 -p 22

Replace the IP with your VPS IP and Port (22) with your port (22 is the default port for SSH). You will be asked for password, just type it (no characters will show up, that’s fine) and press enter. You should be greeted with something like this :

3. Execute this command

echo "GatewayPorts yes" >> /etc/ssh/sshd_config

This will add the line GatewayPorts yes to your SSH config file. Don’t execute this command twice as it will add the line twice as well.

4. Restart the SSH service

service ssh restart

5. Exit the SSH session

exit

6. Now try opening a remote port.

ssh -R 5000:localhost:8000 root@111.111.111.111

This will open port 5000 on the VPS, foward it to port 8000 on our local machine.

7. Test it out! I will use python http.server module for simplicity. Type this command on your own machine (just open a new window, keep the ssh connection open).

python3 -m http.server

or if you just have python2

python -m SimpleHTTPServer

8. Open your browser and visit the VPS_IP:PORT, (example : 111.111.111.111:5000) and you should have a page similar to this

Congratulations! You have just configured your own SSH tunnel. To open another port, just use the same command from step 6 on a new window.

Pairing the Domain

  1. I used freedns.afraid.org free subdomain service for this. Just register at their site if you don’t have any domain.
  2. Register your subdomain with A record pointed at your VPS IP
free subdomain setup

3. Wait for 1 hour before your site become alive. Default TTL (Time to Live) for this free subdomain is set to 1 hour.

4. Visit your new domain with the opened port on your browser Example : http://fuwafuwa.chickenkiller.com:5000

5. Enjoy~ You have configured a domain name for your VPS.

Crisis Averted

Now if you yelled at me saying “$10 is NOTHING compared to the complexity that we must go through configuring such tunnels” at the start of this article, you can see why I called such pricing insane for basic needs. I’m not saying that configuring ngrok like service is easy, but if you just need a private tunnel for yourself, we just did it. And the best part is it cost way less than $10/month.

B-b-but it doesn’t have HTTPS!!

True, just wait for the part two of this tutorial :D (which hopefully will be posted in the next few days). Thank you for reading, hope this helps.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade