Making localhost available on the public internet without port forwarding!
For debugging web development sometimes it’s very beneficial to see how your website behaves in a different context. Or sometimes, it simply makes more sense to host your own site since you can buy a Raspberry Pi for <$35 which has significantly more compute power than any hosted server you can lease from providers like AWS/Azure.
This article serves to describe the setup of a tool much like ngrok (https://ngrok.com/). While ngrok offers a free tier, the tunnel only exists for 8 hours and creates a randomly generated domain name which isn’t useful if you want to make sure your site is always online. They do offer a $5 a month premium tier, but it’s still limited. We’re going to build our own “ngrok” with many more features, cheaper, and with no limits.
This article assumes basic knowledge of linux tools like nano and ssh.
Step 1: Obtain an Ubuntu server with a public IP
While this may seem daunting, don’t fret. A quick Google search for “Cheap VPS” will reveal many hosting providers
- https://us.ovhcloud.com/vps/cheap-vps/ who offer a very small VPS for $3.50 a month.
- Do a Google search for OVH Coupons and you’ll find several that give you $50 free credit or similar
- 12 Months at $3.50 a month = $42.
Congrats on your 1+ year of free hosting.
“But this 1 vCPU/2GB RAM server can’t host my site!”
- This server isn’t hosting your site, it’s hosting the load balancer for your site, so even the smallest VPS is way more than enough
Step 2: Install HAProxy (http://www.haproxy.org/)
Once SSH’d into your new Ubuntu server install HAProxy with:
$ sudo apt update && sudo apt install haproxy
Edit HAProxy config with the following command:
$ sudo nano /etc/haproxy/haproxy.cfg
And add the lines below:
Hit CTRL+X. You will be prompted to save. Type “y” then hit enter.
$ sudo service haproxy restart
The config you’ve just saved tells HAProxy to listen on port 80 (http) and forward those requests to port 8080 on 127.0.0.1 (localhost).
Now if you try to navigate to http://<your-vps-ip>/ you should see the following message:
>503 Service Unavailable
This is a good thing.
Step 3: Set up sshd_config
We need to make sure SSH will allow us to authenticate and forward ports
$ sudo nano /etc/ssh/sshd_config
Make sure the following lines are set up in the config:
Save and restart SSH with
$ sudo service ssh restart
Step 4: Set up SSH keys
On your local computer open up a bash shell or a WSL shell.
Generate a new ssh key. Pressing enter will automatically set up using default values
$ ssh-keygen
Copy the SSH keys to your new Ubuntu server
$ ssh-copy-id -i ~/.ssh/<SSHKeyName> user@Your-VPS-Host
Step 5: AutoSSH
AutoSSH is used for automatically handling SSH disconnects and compression. This allows us to create a reverse tunnel from our VPS to our local computer.
On your local computer open up a bash shell or a WSL shell.
Install AutoSSH
$ sudo apt install autossh
Step 6: Establish Tunnel
The above command when run from your local machine tells AutoSSH to connect you your VPS and open port 8080 on the VPS. Any traffic destined for port 8080 on the VPS is sent over the AutoSSH reverse tunnel to port 8080 on your local machine.
In summary assuming our VPS has an IP of 123.123.123.123
An HTTP request to http://123.123.123.123 takes the following path
- 123.123.123.123 port 80 (HAProxy Public IP) → 127.0.0.1 port 8080 (AutoSSH VPS port) → 127.0.0.1 port 8080 (AutoSSH local computer port)
Assuming all of the above has been set up correctly, if you now run a server on your local computer that listens on port 8080, it will receive traffic from port 80 (HTTP) of your VPS public IP.
