Ngrok: Allow External Users to Connect to Localhost Services

During the development process, sometimes it is necessary to test the local website and services from another machine. The most common situation is when you want to test what the website looks like on your mobile phone, or sometimes when you want others to connect to your local sql serer.

If you want to test the website, you can also connect to a test machine, but if it is a local sql server, it is easier to be in the same local area network, and you need to change the routing for other things, which is too troublesome.

The tool introduced today, ngrok , is the tool that makes all this easy, and it is very heartfelt that the free version is enough for general use .

Introduction

In essence, ngrok is a reverse proxy tool. By mapping the local port to a public address, the outside world can connect through this public address, and then the tool uses the reverse proxy and the actual local port to obtain data.

Due to this process, there is a disadvantage, that is, the speed is relatively slow , especially ngrok’s server is in the United States, so it will also reduce some speed. But if it is for development and testing, this is not a disadvantage.

The free version of ngrok provides a dynamic address, and you need to pay for advanced functions or to map multiple services at the same time.

ngrok installation and settings

There are roughly a few steps:

  1. Download ngrok – this tool is an installation-free tool, so it is recommended to add it to the path for better execution
  2. Sign up for a free account with ngrok
  3. Set the account token

download ngrok

ngrok small file

  1. Official website: https://ngrok.com/
  2. Download address: https://ngrok.com/download
  3. Pricing feature differences: https://ngrok.com/pricing
  4. Supported OS: Windows, Linux and Mac
  5. Windows recommends installing with Chocolatey:choco install ngrok

Sign up for a free account with ngrokBasically, it is the same as the general way to apply for an account, link https://dashboard.ngrok.com/user/signup .Set the account token

After registering the account, it will automatically enter the dashboard, and you will see a token. After entering this setting, it will be automatically associated with this account when it is executed. You can also use the web interface to see the situation.

chrome_2018-04-30_10-46-59.png
Get auth token screen

After setting, you will see %userprofile%\.ngrok2\ngrok.ymlthis setting in it.

powershell_2018-04-30_10-56-22.png
After setting the auth token

Use of ngrok

So far, all the settings are good, and the next step is to start using it.

Here are a few scenarios:

  1. External connection to local web service
  2. External connection to local tcp service

External connection to local web service

Suppose there is a service at port: 1234, at this time you can call it through the following command:

ngrok http 1234

PowerShell

At this time, you will see a URL that can be used externally, and you can connect to it with whichever you use.

If you don’t need it, you can enter it by typing

Ctrl+c

External connection to local tcp service

If you want to connect to the local sql server today, ngrok also supports tcp mapping.

Taking sql server as an example, you only need to call:

ngrok tcp 1433

PowerShell

Then use SSMS to do a test connection.

Advanced use of ngrok

The above introduction is enough for general use, but sometimes there are some advanced applications, here are 3 introductions:

  1. External chain web service encryption
  2. How to rewrite hostname
  3. Manage/monitor calls

External chain web service encryption

Sometimes you don’t want anyone to be able to open the link to test for others. ngrok provides this service very thoughtfully.

You only need to add this parameter when mapping authto set password protection. For example:

ngrok http --auth=admin:12345 1234

PowerShell

It means that if the account is adminand the password is 12345mapped to 1234 port.

How to rewrite hostname

Some services will use the value of hostname. At this time, the function of rewriting hostname becomes very important.

Can be used host-headerfor setting.

The example here is to set in IIS that only test.com will bind to port 80. The command used is :

ngrok http --host-header=test.com 80

Manage/monitor calls

When ngrok is executed, each request will be recorded, which can be connected to localhost:4040 by using the command line

chrome_2018-04-30_12-22-25.png
Local interface and command line monitoring
  1. When it is executed, you will see the URL that can be connected externally.
  2. When a request comes in, each result is written below, which can also be seen from localhost:4040, and the content is more detailed (the screenshot on the right)

End Notes

This article introduces the tool ngrok, and how to use ngrok to make local things be tested externally.

This article also introduces that if you want to protect local services, you can use the account password to log in to avoid leakage. There is also support for hostname ngrok if needed.

If you need some more in-depth functions, such as not changing the URL, you can consider upgrading from the free plan.

Do you use any similar tools? Also welcome to share and exchange.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.