قالب وردپرس درنا توس
Home / Tips and Tricks / Debug your local applications over the internet with Ngrok Tunnels – CloudSavvy IT

Debug your local applications over the internet with Ngrok Tunnels – CloudSavvy IT

Figure by Ngrok --- A utility that assigns you a public URL and forwards it to your local host.

Ngrok is a utility that assigns you a public URL and forwards it to your local host. That way, anyone outside of your network can use the public URL to easily access your local development environment.

What is Ngrok?

Suppose you̵

7;re developing a web app and you want to share it with your co-workers so they can test it. Without ngrok, you can either upload it to a small server somewhere, which takes time and doesn’t copy over local databases, or port your router to point to your computer which is clunky and doesn’t work everywhere.

Ngrok solves this problem by giving you a single url that tunnel to your device. It acts like a kind of VPN and can tunnel past firewalls directly to your device. You can run multiple tunnels at the same time and select the ports and protocols for each tunnel. For example, you can forward your web server running over HTTP on port 3000 and forward your database over an unformatted TCP connection on port 8080.

The ngrok client will automatically assign you a URL such as yourapp.ngrok.io:1234. This is essentially an SSH tunnel, but the endpoint is managed for you by the ngrok service. Ngrok has paid for plans that will allow you to run more tunnels with reserved urls. However, the free tier is sufficient for most basic tunneling and debugging operations.

Since the URLs are automatically generated at the free level, ngrok is not suitable for performing functions where availability is a concern. For security reasons, however, you should not always keep a tunnel to your PC open. Same goes for port forwarding, but ngrok can be toggled on and off so it’s better in this regard.

Install Ngrok

Install ngrok by going to ngrok's online dashboard and creating an account.

First, go to ngrok’s online dashboard and create an account. Once you’re authenticated, it’s relatively easy to set up. ngrok does not need to be installed through a package manager. Simply download the binary file for your system and extract the file either via your file explorer or with the unzip Command.

From there, you’ll be able to run ngrok fine, but you’ll probably want to move it from your Downloads folder to a location where you can access it from anywhere. On Linux and MacOS, this location is stored in the PATH variable, which you can find by running:

echo $PATH

This usually includes /usr/local/bin/so we can move ngrok there by running this command from the downloads folder:

sudo mv ngrok /usr/local/bin/

Then, ngrok works like a normal utility. On Windows, you want to add a new folder to your system’s PATH.

Before you can run it, you’ll need to authenticate it with your account. You can do this by copying and pasting the authtoken shown in step 3 of the dashboard with the following command:

ngrok authtoken xxxxxxxxxx

This will connect your account and allow you to create tunnels.

How to set up Ngrok tunnels

To create a tunnel, simply specify the local port and protocol the tunnel should use. For example, to tunnel a local web server, run:

ngrok http 80

This opens a graphical user interface showing the currently open connections and information about your session. The URL for the tunnel is displayed under “Redirect” that you want to copy.

A GUI that shows current open connections and information about your session

You can also start several tunnels at the same time from a configuration file. This configuration file is located in your home directory in ~/.ngrok2/ngrok.yml. By default, this file is empty except for your authtoken. You can add tunnels manually:

  proto: http
  addr: 80
  proto: tcp
  addr: 9090

What you can then start all at once with:

ngrok start --all

Or start manually by specifying the tunnel names. You can find all tunnel properties as well as other sample configuration files in the ngrok documents.

You can also create ngrok tunnels programmatically using wrapper clients for your language. With the Node Wrapper you can, for example, have your web server forwarded automatically with:

const url = await ngrok.connect({proto: 'http', addr: 80});

… which would store the redirect url in a variable that you can use.

Ngrok Inspector

Another feature that makes ngrok particularly useful for debugging web applications is the tunnel inspector. When you start a tunnel, you usually also get a URL for a web interface localhost:4040. When you open this in your browser, you’ll see a list of all the requests going through the tunnel, along with their content and response.

A list of all requests that go through the tunnel, along with their content and response

It doesn’t beat any API development environment like Postman, but it’s still very useful for checking traffic between client and server. It captures everything including the requests your application makes automatically.

There is another tab here called Status that shows the health of your tunnel, including statistics like connection time and connections per second for each tunnel.

Source link