Hosting an Application on Internet without a Static IP

Table of Contents

• Hosting an Application or a Service
• Understanding Reverse Tunneling
• Getting Started with ngrok
• Example – Hosting a flask application (Port 5000)
• Hosting multiple services

Hosting an Application or a Service

There are times when you might be

• Developing a web application
• Hosting a service
• Combination of both

that you might want to get reviewed or give access to your friend or a colleagues through internet.

Lets assume that your Web application is hosted on your computer at port 80, such that when you navigate to the URI http://localhost or http://127.0.0.1 in your browser, the application works for you

The usual way of making this application available over internet is by doing the Port Mapping in your Network/WiFi router. A couple of terms to know based on the context of this blog here are

• Public IP: The IP address assigned to your Network / WiFi router by your Internet Service Provider. This maybe a Static IP (remains the same consistently when you restart your router) or a Dynamic IP (changes when you restart your router)
• Private IP: The IP address of your computer (hosting the Web application at port 80) assigned by your router

In Port Mapping, when the router is configured accordingly, any request that is made to Public IP: port x is forwarded to Private IP: port y such that your friend or colleague could access your web app or service through Public IP: port x that maps to your computer’s port 80

---

Understanding Reverse Tunneling

When you

• Don’t have access to / don’t know how to / don’t remember the router settings to perform Port Mapping (When you are using Campus WiFi or Organizational Wifi, etc.)
• Are using Mobile Hotspot that doesn’t allow you to perform Port Mapping
• Don’t want to share your Public IP
• Have an unlisted reason here

and yet you would like to make your application and/or service available over the internet. This is where Reverse Tunneling comes handy.

In reverse tunneling, the computer that hosts an application or service also runs an agent (another service) that allows it to have a public domain name, such that any user over the internet can request the reverse tunnel’s public domain name to access the desired application or service.

In this manual, we will use ngrok as the tunneling agent.

---

Getting Started with ngrok

1. Download the ngrok agent for your computer from https://ngrok.com/download

2. Unzip / Extract it

3. If your are on Windows computer, run ngrok.exe. This will launch the command prompt and display the commands that ngrok accepts

4. If you don’t have an ngrok account already, register here or login

5. Once logged in, navigate to Authentication -> Your Authtoken

6. Copy your Authtoken

   

7. In the Command prompt, execute

   ngrok authtoken YOUR_AUTHTOKEN

   You should be getting an acknowledgement mentioning that your authotoken has been save to a configuration file. Make note of the path of this configuration file for performing advanced tasks using ngrok.

8. To host port 80, execute

   ngrok tcp 80

   This hosts your localhost:80 into a Forwarding address mentioned in the agent (In my case: 0.tcp.ngrok.io:11898)

   

---

Example – Hosting a flask application (Port 5000)

I have a simple flask application that I built to demonstrate the working of ngrok. Here is my flask code

from flask import Flask

app=Flask(__name__)

@app.route('/')
def index():
    return("Your HTTP application is running successfully")

if __name__ == '__main__':
    app.run()

After I run this flask program (saved as app.py) in my computer,

python app.py

navigating to localhost:5000 in the browser shows me

Now execute the ngrok.exe, configure the authtoken if you haven’t done already by executing

ngrok authtoken YOUR_AUTHTOKEN

then execute

ngrok tcp 5000

You can now see that the requests made to 2.tcp.ngrok.io:17655 will be forwarded to localhost:5000

I’ll now navigate to 2.tcp.ngrok.io:17655 in my browser and I see the following

---

Hosting multiple services

When you have multiple services running on different ports for which you need public domain name and corresponding port numbers, you can define them in the config file that’s discussed above

Here is my example where I have defined 2 tunnels, one for my flask application hosted on port 80 and another for my mysql server hosted on port 3306

Once configured, my config file at "C:\Users\example\.ngrok2\ngrok.yml" looks as follows:

authtoken: YOUR_AUTHTOKEN
tunnels:
  flask:
    addr: 5000
    proto: tcp
  db:
    addr: 3306
    proto: tcp

To start a specific tunnel from the config file, execute

ngrok start flask

To start all the tunnels from the config file, execute

ngrok start --all

Starting all the tunnels for my above config file gives me 2 forwarding addresses once for each tunnel

A video demonstration to host a MySQL server is available here