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

Troubleshoot your local applications over the Internet with Ngrok Tunnels – CloudSavvy IT

Illustration of Ngrok --- a tool that assigns you a public URL and tunnels it to your local host.

Ngrok is a tool that assigns you a public URL and tunnels it to your local host. This enables anyone outside your network to use the public URL to easily access your local development environment.

What is Ngrok?

Suppose you develop a web app and want to share it with your colleagues to get them to test it. Without ngrok, you can either upload it to a small server somewhere, which takes time and does not copy over things like local databases, or forwards your router to point to your computer, which is clumsy and does not work everywhere.

Ngrok solves this by giving you a single URL that tunnels to your device. It acts as a kind of VPN and can tunnel past firewalls directly to your device. You can have several tunnels running at the same time, and you can select ports and protocols for each. For example, you can forward your web server running via HTTP on port 3000 and forward your database via a raw TCP connection over port 8080.

The Ngrok client automatically assigns you a URL that yourapp.ngrok.io:1

234. This is essentially an SSH tunnel, but the end point is handled for you by the ngrok service. Ngrok has paid plans, which allow you to run more tunnels with reserved URLs, but the free level is good enough for most basic tunnels and troubleshooting.

Because the URLs are generated automatically at the free level, ngrok is not suitable for running anything where runtime is an issue. But you should not keep a tunnel to your personal computer open all the time anyway, simply for security reasons. The same applies to port forwarding, but ngrok can be turned on and off, so it’s better in that respect.

Install Ngrok

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

To get started, go to ngrok’s online dashboard and create an account. Once authenticated, installation is relatively simple. ngrok does not need to be installed via a package manager, just download the binary system for your system and unzip the file, either through your file explorer or with unzip command.

From there, it’s good to start running ngrok, but you’ll probably move it from your download folder to a place where you can access it 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 regular tool. On Windows, you want to add a new folder to the system PATH.

Before you run it, however, you must verify it with your account. You can do this by copying the authentication token shown in step 3 on the dashboard and pasting it using the command:

ngrok authtoken xxxxxxxxxx

This connects your account and allows you to create tunnels.

How to set up Ngrok tunnels

To create a tunnel, just enter the local port you want to connect to and the protocol that the tunnel will use. For example, to tunnel a local web server, you would run:

ngrok http 80

Which opens a GUI that shows the current open connections and information about your session. The URL of the tunnel is displayed under “Forwarding” that you want to copy.

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

You can also launch multiple tunnels at once from one configuration file. This configuration file is located in your home directory, in ~/.ngrok2/ngrok.yml. By default, this file is empty except for your token. You can add tunnels manually:

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

Which you can then start at once with:

ngrok start --all

Or start manually by entering the tunnel names. You will find all tunnel properties along with more examples of configuration files in the ngrok documents.

You can also create ngrok tunnels programmatically with wrapper clients for your language. With the Node cover, for example, you can make your web server automatically forward with:

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

… which stores the forwarding URL in a variable that you can use.

Ngrok inspector

Another feature that makes ngrok particularly useful for troubleshooting web apps is the tunnel inspector. When you start a tunnel, you usually also get a URL to a web interface localhost:4040. If you open this in your browser, you will see a list of all requests that go through the tunnel along with the content and response.

A list of all requests that go through the tunnel along with content and answers

It does not beat an API development environment like Postman, but it is still very useful for inspecting the traffic between the client and the server. It records everything, including requests that your application makes automatically.

There is another tab here labeled “Status” that shows the health of your tunnel, including statistics such as connection length and connections per second for each tunnel.

Source link