Port Forwarding Your Local Development Server To The World Wide Web

PS: Proceed with caution, this can be dangerous 😃

Me : Ever wondered if you are working on a project and desire that you could mirror your development server to the internet. What if your coworker wants to consume your API or the product manager wants to have a look at a W.I.P feature?

You : I have a staging server sitting idle. All I have to do is to push the code. Or even better, I can use free services like Surge (surge.sh).

Me : Consider your remote friend is also programming simultaneously.

You : Oh that may not go so well…

Me : Fret not my friend, here I come for the rescue!

When you run a dev server, the application binds itself to a local port, which can be say 3000 for a Rails project. The challenge is to make the people on internet able to access your port.

But wait! Your ISP most likely has not granted you a static IP address and also blocked all the incoming ports. What to do now?

A typical developer has used AWS at least once in his life. Now you have a machine on the cloud with a dedicated public IP. Anyone on the web can access your server. YOU have access to the server. IF you can mirror your local port to the server, the server can be a gateway to your machine. Technically, if you forward your port to the server, it can forward proxy it to the web.

TL;DR — Mirror Your “localhost:8000”

• Run a Python file server on port 8000

cd Desktoppython -m SimpleHTTPServer

• Open localhost:8000. You can see the the directory content.

• Create a new EC2 Instance. Nano configuration is more than enough
• Note the public IP address of newly created instance. For me, it was 18.208.189.50
• SSH

chmod 400 your-key.pemssh -i your-key.pem [email protected]

• Install nginx server

sudo apt-get updatesudo apt-get install nginxsudo service nginx start

Open the default configuration

sudo nano /etc/nginx/sites-available/default

Browse through “location” block. Comment out the file access and type:

# try_files $uri $uri/ =404;proxy_pass http://127.0.0.1:8000;

Save the file and restart nginx server

sudo service nginx restart

Exit the instance

exit

Forward your local port to server

ssh -i your-key.pem -R 8000:localhost:8000 [email protected]

If everything goes right, open the browser and navigate to http://18.208.189.50

Voila!

Applications

Local Rails API exposed for remote team to consume

Thanks to IBM Cloud for sample Rails setup

git clone https://github.com/IBM-Cloud/ruby-rails-helloworldgem install bundlerbundler installrails server## Repeat the above steps (port forwarding) but with port 3000

React project can be accessed real time to showcase product

Thanks to Andrew Farmer for an elegant example

git clone https://github.com/ahfarmer/calculatorcd calculatornpm installnpm start## Repeat the above steps (port forwarding) but with port 3000

On the Internet

Large files transfer over the internet

cd Desktoppython -m SimpleHTTPServer## Repeat the above steps (port forwarding)

Please clap if you find this interesting 😄

Some of you might be thinking why did I warn at the beginning, that’s because there was a time when I was developing a Rails app. And I used to have my local database filled with hilarious seed data. One fine day I write this blog and apply this technique to test and iterate project with my client. Unknowingly, I was exposing my dev environment with my client. Anyways, he pointed it out and he had a good laugh. Moreover we still use the same data in staging 😅.