Как установить ngrok на windows

От локального сервера к публичному доступу: лучшие инструменты для тоннелей

Картинка с сайта: habr.com

🔔Введение

В процессе разработки программного обеспечения нередко возникает необходимость предоставить доступ к локальному серверу извне. Это может быть полезно по разным причинам: тестирование вебхуков от внешних сервисов, проведение демонстраций клиентам или организация совместной работы с удаленными командами. Представьте, что вы разработали потрясающее веб-приложение, но оно пока доступно только на вашем локальном компьютере. Как показать его друзьям, коллегам или потенциальным инвесторам? В таких случаях использование туннелирования становится отличным решением. Сервисы туннелирования позволяют создать временный публичный URL, который направляет входящий трафик на локальный сервер разработчика. Это обеспечивает возможность протестировать функциональность приложения в условиях, приближенных к реальной среде, без необходимости развертывания на полноценном хостинге или сервере.

Что такое туннель для локального сервера?

Туннель для локального сервера – это технология, позволяющая связать локальный хост (например, http://localhost:8000) с публичным URL, доступным через интернет. Туннель действует как посредник, который перенаправляет все запросы с публичного адреса к вашему локальному серверу. Это делает его удобным инструментом для следующих задач:

• Работа с API: легко тестировать и отлаживать интеграции с внешними сервисами, отправляющими запросы на ваш сервер.

• Тестирование вебхуков: многие внешние API, такие как платежные шлюзы, системы уведомлений или мессенджеры, отправляют уведомления о событиях через вебхуки. С помощью туннелирования можно оперативно настроить и отладить эти взаимодействия, не вынося сервер на публичный хостинг.

• Демонстрации в реальном времени: проводить презентации своих проектов и новых функций без развертывания на внешнем хостинге.

• Удаленное сотрудничество: обмениваться промежуточными результатами разработки с коллегами и заказчиками.

Как работает туннелирование?

В основе туннелирования лежит простой, но эффективный механизм. Сервис туннелирования запускается на вашем компьютере и создает туннель между вашим локальным сервером и внешним миром. Когда кто-то переходит по публичной ссылке, запрос попадает в туннель и мгновенно направляется к вашему локальному серверу. Такой подход обеспечивает удобный доступ к вашим ресурсам, позволяя демонстрировать и тестировать веб-приложения в их актуальном состоянии.🔖

🔖 Примеры использования

• Регистрация через социальные сети: интеграция с социальными платформами (например, OAuth для Facebook, Google, Twitter) часто требует, чтобы ваш сервер был доступен извне для обработки ответов после успешной авторизации.

• Платежный шлюз: платежные системы (такие как Stripe, PayPal или LiqPay) отправляют уведомления о статусе транзакций через вебхуки. С помощью туннеля можно оперативно отладить обработку таких уведомлений и убедиться, что данные обрабатываются корректно.

• Webhook-интеграции: внешние сервисы, такие как GitHub, Slack или Zapier, используют вебхуки для уведомлений о событиях (например, новый коммит, сообщение в канале или триггер в автоматизации). Туннель позволяет получить эти уведомления в реальном времени.

• Push-уведомления: отладка push-уведомлений для мобильных приложений или веб-приложений требует, чтобы сервер мог принимать и обрабатывать внешние запросы.

• Доступ к API третьих сторон: некоторые API требуют проверки доступности вашего сервера (например, при отправке данных на указанный вами URL). Туннелирование помогает создать публичный доступ для этой проверки.

• Онлайн-демонстрации: если вы показываете прототип или MVP потенциальным клиентам, коллегам или инвесторам, туннель позволяет быстро развернуть текущую версию приложения для презентации.

• Тестирование внешних интеграций: работа с внешними сервисами, которые требуют доступности вашего сервера (например, почтовые сервисы или системы аналитики), становится проще с использованием туннеля.

• Работа с ботами для мессенджеров: при разработке ботов для Telegram, WhatsApp или Facebook Messenger необходимо настроить webhook для получения сообщений. Туннелирование позволяет быстро настроить и протестировать взаимодействие бота с вашим сервером.

• Отладка систем уведомлений: интеграция с системами уведомлений, которые требуют обратного вызова (например, SMS или сервисы уведомлений о доставке), требует проверки с реальными запросами.

🔎 Популярные инструменты туннелирования

Давайте рассмотрим некоторые из популярных инструментов, которые позволяют быстро создать туннель к локальному серверу и сделать его доступным из интернета.

Ngrok

Ngrok – это один из самых известных инструментов для туннелирования, который позволяет создать безопасный туннель от локального сервера к публичному интернету.

• Плюсы: Поддержка HTTPS, мониторинг запросов в реальном времени, безопасность.

• Минусы: Бесплатная версия имеет ограничения, постоянные домены доступны только на платном тарифе.

Пример использования: ngrok http 8000 создаст публичный URL, перенаправляющий трафик на http://localhost:8000.

Localtunnel

Localtunnel – это простой и бесплатный инструмент с открытым исходным кодом. Он подходит для быстрого и временного доступа к локальным серверам.

• Плюсы: Бесплатен, не требует регистрации.

• Минусы: Меньше функций, чем у Ngrok; URL может быть непостоянным.

• Пример использования: lt —port 8000 создаст публичный URL для локального порта 8000.

Serveo

Serveo позволяет создать туннель к локальному серверу через SSH, и не требует установки клиента.

• Плюсы: Легкость использования через SSH, нет необходимости в установке.

• Минусы: Меньше настроек, меньше поддержки для расширенной конфигурации.

• Пример использования: ssh -R 80:localhost:8000 serveo.net создаст туннель через SSH.

Pagekite

Pagekite – это мощный и гибкий инструмент для туннелирования, который поддерживает HTTP и SSH протоколы.

• Плюсы: Поддерживает постоянные домены, подходит для долгосрочных проектов.

• Минусы: Платные тарифы для некоторых функций, настройка сложнее, чем у Ngrok или Localtunnel.

• Пример использования: после установки Pagekite позволяет создавать постоянные туннели для различных сервисов.

Cloudflare Tunnel (ранее Argo Tunnel)

Cloudflare Tunnel (Argo Tunnel) позволяет безопасно подключить локальный сервер через сеть Cloudflare.

• Плюсы: DDoS-защита, бесплатный уровень, высокая скорость.

• Минусы: Требуется настройка через Cloudflare; некоторые функции ограничены.

• Пример использования: Cloudflare предоставляет подробные инструкции для настройки туннеля через cloudflared.

👀 Какой инструмент выбрать?

Выбор инструмента для туннелирования во многом зависит от конкретной задачи и требований проекта. Если ваша цель — быстрая демонстрация приложения или тестирование вебхуков, то такие решения, как **Ngrok** или **Localtunnel**, станут отличным выбором. Эти инструменты просты в использовании и позволяют мгновенно получить доступ к локальному серверу через публичный URL, что делает их идеальными для кратковременных задач и тестов.

Когда речь идет о долгосрочных проектах или ситуациях, где особенно важны безопасность и стабильность, стоит рассмотреть **Pagekite** или **Cloudflare Tunnel**. Эти сервисы предлагают более гибкие и защищенные возможности для туннелирования, что делает их подходящими для развертывания приложений с более серьезными требованиями к доступу и безопасности.

Для пользователей, предпочитающих использовать SSH, хорошим вариантом будет **Serveo**. Он удобен тем, что не требует установки дополнительного программного обеспечения. Достаточно использовать стандартный SSH-клиент для создания туннеля, что делает его простым и эффективным решением для разработчиков, знакомых с командной строкой и желающих минимизировать дополнительные зависимости. 

Давайте теперь подробнее разберемся с Ngrok и посмотрим, как он работает на деле.

Ngrock

Ngrok — это инструмент для разработчиков, который позволяет создавать безопасные туннели от локального компьютера к публичному интернету. Это особенно полезно, когда вам нужно предоставить доступ к локальному веб-серверу (например, для тестирования вебхуков, демонстраций, разработок), не разворачивая его на реальном сервере.

Установка

Ngrok можно загрузить с официального сайта (https://ngrok.com). В бесплатной версии можно создать один туннель, а в платной доступны дополнительные функции, такие как постоянные поддомены и более высокая производительность.

Установка на macOS:

Если вы используете macOS, вы можете установить Ngrok с помощью Homebrew (менеджер пакетов для macOS).

1. Откройте терминал.

2. Запустите следующую команду для установки Ngrok: brew install ngrok

3. После установки вы можете проверить установку Ngrok, запустив: ngrok version

Установка Ngrok в Linux:

1. Откройте терминал.

2. Загрузите последнюю версию Ngrok:

   wget https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-linux-amd64.zip

3. Распакуйте скачанный файл:

   unzip ngrok-stable-linux-amd64.zip

4. Переместите исполняемый файл ngrok в каталог, доступный из командной строки (PATH).

   Рекомендуется использовать каталог /usr/local/bin. Для этого понадобится пароль администратора (sudo):

   sudo mv ngrok /usr/local/bin

5. Проверьте установку Ngrok:

   ngrok version

   Эта команда должна вывести информацию о версии установленного Ngrok.

Установка Ngrok в Windows:

1. Перейдите на веб-сайт Ngrok и скачайте версию Ngrok для Windows. (Ищите ссылку для скачивания Windows-версии).

2. Извлеките файлы из скачанного ZIP-архива. (Используйте проводник Windows или архиватор, например, 7-Zip или WinRAR).

3. Переместите файл ngrok.exe в выбранную вами папку. (Например, C:\ngrok).

4. Добавьте эту папку в системную переменную среды PATH:

   • Кликните правой кнопкой мыши по значку «Этот компьютер» (или «Компьютер») > «Свойства».

   • Нажмите «Дополнительные параметры системы» > «Переменные среды».

   • В разделе «Системные переменные» найдите переменную Path, выделите её и нажмите «Изменить».

   • Нажмите «Создать» (или «Новый») и добавьте путь к папке Ngrok (например, C:\ngrok) и нажмите «OK». (В старых версиях Windows нужно было добавлять путь через точку с запятой ; в конец существующей строки).

5. Откройте новое окно командной строки (Command Prompt) и проверьте установку: ngrok version Эта команда должна вывести информацию о версии установленного Ngrok.

Аутентификация в Ngrok

Аутентификация вашей учетной записи Ngrok не обязательна, но рекомендуется после установки. Она позволит разблокировать дополнительные функции и избежать ограничений по использованию.

1. Зарегистрируйтесь или войдите в свою учетную запись Ngrok на сайте https://dashboard.ngrok.com.

2. Скопируйте свой токен авторизации (authtoken) с панели управления.

3. В терминале выполните команду для аутентификации:

   ngrok authtoken <ваш_токен_авторизации>

   Замените <ваш_токен_авторизации> на скопированный вами токен.

Теперь вы готовы использовать Ngrok для создания безопасных туннелей к вашему локальному серверу!

Основные возможности

1. Создание туннелей: Ngrok позволяет создать туннель к локальному серверу, который доступен по временной публичной ссылке (например, `https://random-string.ngrok.io`). Запустив Ngrok, вы можете передать URL другим пользователям, чтобы они получили доступ к вашему локальному серверу.

2. Поддержка вебхуков: Ngrok часто используется для тестирования вебхуков, поскольку многие API требуют публичный URL для отправки данных (например, платежные системы, службы уведомлений и другие).

3. Безопасность: Ngrok шифрует соединение через HTTPS и предоставляет возможность авторизации, что повышает безопасность.

4. Журналирование запросов: Ngrok сохраняет запросы и ответы, проходящие через туннель, что полезно для отладки и мониторинга.

Пример использования

1. Запустите локальный сервер (например, на `http://localhost:8000`).

version: '3.8'

services:
  nginx:
    image: nginx:latest
    ports:
      - "8000:80"
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf:ro
      - ./src:/var/www/html
    networks:
      - app_network

  php:
    image: php:8.3-fpm
    volumes:
      - ./src:/var/www/html
    networks:
      - app_network

networks:
  app_network:
    driver: bridge

2. В командной строке выполните команду:

ngrok http 8000

Картинка с сайта: habr.com

3. Ngrok выдаст публичный URL (https://41d8-128-199-48-62.ngrok-free.app), который теперь будет направлять трафик на ваш локальный сервер и локальный URL (http://127.0.0.1:4040), который теперь будет отображать отвкеты от сервера

Картинка с сайта: habr.com

4. Для взаимодействия с внешним API нам нужно создать два маршрута:

1. api/test — этот маршрут будет принимать данные от клиента и отправлять запрос на сторонний сервер.

2. api/webhook — этот маршрут будет принимать ответ от стороннего API, когда он возвращает данные после обработки.

namespace App\Presentation\Api\Action;

use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\Routing\Annotation\Route;

final class ApiTestAction
{
    #[Route('/api/test', name: 'api_test', methods: ['GET'])]
    public function __invoke(Request $request)
    {
        $callbackUrl = $request->query->get('callback_url');

        if ($callbackUrl) {
            $this->sendRequestToExternalApi($callbackUrl);
            return new JsonResponse(['status' => 'success', 'message' => 'Request sent successfully.']);
        }

        return new JsonResponse(['status' => 'error', 'message' => 'callback_url is required.'], 400);
    }

    private function sendRequestToExternalApi($callbackUrl)
    {
        // Logic for sending the request to the external API
    }
}

namespace App\Presentation\Api\Action;

use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\Routing\Annotation\Route;

final class ApiWebhookAction
{
    #[Route('/api/webhook', name: 'api_webhook', methods: ['POST'])]
    public function __invoke(Request $request)
    {
        $data = json_decode($request->getContent(), true);
        return new JsonResponse(['status' => 'success', 'message' => 'Data received.']);
    }
}

5. Пример запроса с использованием curl

Чтобы протестировать маршрут api/test, мы можем отправить запрос с использованием curl. Например, если вы хотите передать callback_url, который указывает на ваш локальный сервер через Ngrok:

curl -G "http://localhost:8080/api/test" --data-urlencode "callback_url=https://41d8-128-199-48-62.ngrok-free.app/api/webhook"

Картинка с сайта: habr.com

Запрос успешно выполнен! Получен ответ от публичного сервера.

Домены

Объекты доменов позволяют создавать конечные точки для приема трафика на этих доменах. Домены могут быть поддоменами базового домена, управляемого ngrok, например foo.ngrok.app, или вы можете использовать свой собственный брендовый домен, например foo.example.com. Более подробную информацию можно найти здесь (ссылка на документацию ngrok).

Вы можете начать с бесплатного плана и получить общедоступный URL: https://wildly-pro-guinea.ngrok-free.app.

HTTPS

Если одного HTTP недостаточно для ваших нужд, используйте следующую команду для настройки перенаправления на HTTPS.

ngrok http --url=wildly-pro-guinea.ngrok-free.app {YOUR_PORT_NUMBER}

🏁 Заключение

Сервисы туннелирования – это отличный способ временно дать доступ к локальному серверу, не беспокоясь о сложной настройке сети. Независимо от того, хотите ли вы тестировать вебхуки, делиться своим приложением с командой или показывать прототип клиентам, существует множество инструментов, которые упрощают эту задачу. Попробуйте несколько вариантов и выберите подходящий именно для вашего проекта.

In this article, we are going to install Ngrok on Windows. This method will help you expose your local website, it could be for debugging or testing a callback or webhook URL. Or you want to expose your local web server to present to a client.

You can know more about it from the URL https://www.ngrok.com. It offers a free version and paid version. This article will focus on how we can set up ngrok on Windows 10 machines.

Steps to Install Ngrok

I. Register and login from ngrok website

2. Navigate to the Setup & Installation page then download Ngrok for Windows.

3. Extract the downloaded zip file.

4. Copy the extracted file to a permanent location. In my case, I create a folder on my “D:// Drive” and named it ngrok.

5. Register the location on your window’s environment variables. This will make the ngrok application accessible on Windows command prompt or PowerShell. Search for Environment Variables on your startup.

6. Select Environment Variables from the System properties windows.

7. Search for Path under System Variables then click the Edit button.

8. add the path to the ngrok.exe file by clicking the New button and paste the directory to ngrok.exe. Then click the OK button.

9. To test if the ngrok is accessible, open the command prompt and execute this command “ngrok -v“. See the image below.

10. Connect your ngrok account by executing the command below. You can get auth token from the ngrok dashboard.

ngrok config add-authtoken 2OJGogfwdgZMPPYC7B8H4W5p1Js_4vLB9dSCFiFWYYr9177MZ

Ngrok Usage

To use ngrok, you just need to run your localhost application locally. Then make sure to take note of the port used. For example, if you have a Visual Studio ASP.NET project like below.

Take note of the port used and then open the command prompt and execute the command below.

ngrok http 63752 --host-header="localhost:63752"

Now, if you successfully run Ngrok, a URL will be generated and it’s pointing to your localhost with the specified port that you use. This time you can now access your localhost URL outside your network in real-time by using the generated URL of Ngrok.

If you are using port 443 or HTTPS on your local you can use the command below to forward ngrok on port 443.

 ngrok http https://localhost --host-header="localhost:443"

Summary

We have successfully set up Ngrok on a Windows machine in this article, we have also highlighted points on where we can use Ngrok. Hopefully, this article gave you an idea or solution to the problem most developers are looking for.

KEEP Coding!

Introduction

Ngrok is a development tool that helps in getting the Public URLs for,

• testing mobile applications
• testing your chatbot
• testing SSH access to your Raspberry Pi
• Exposing your local webserver
• testing your webhooks and message extensions in MS Teams application development
• and much more.

You can know more about it from the URL https://www.ngrok.com. It offers a free version and paid version. In this article, we will focus on how we can set up ngrok on Windows 10 machine.

Steps to Install Ngrok

Step 1

Go to command prompt and check for ngrok, by typing the below command,

ngrok

Картинка с сайта: www.c-sharpcorner.com

This basically confirms that ngrok is not installed on your machine.

Step 2

Now go to www.ngrok.com and install the free version,

Картинка с сайта: www.c-sharpcorner.com

Step 3

It downloads by default to the ‘Downloads’ folder. I can open the file from the browser pop up. This is basically a zip file. Unzip this and place it in a folder.

Картинка с сайта: www.c-sharpcorner.com

Step 4

I have placed it Desktop — Softwares.

Картинка с сайта: www.c-sharpcorner.com

Step 5

Now set up the environment variables for this ngrok, so that you can run it just by simply typing ‘ngrok’ from any directory. For this search for ‘Environment’ in the windows search and select ‘Edit the Environment Variables’. “Environment’ — “Edit the Environment Variable Settings”.

Картинка с сайта: www.c-sharpcorner.com

Step 6

Now click on the ‘Environment Variables” and look for ‘Path’ under the ‘System Variables’ section and click on ‘Edit’.

Note
You can either create variables under ‘user variables’ or ‘System Variables’. I am updating under system variables. If updated under user variables it will affect the user, whereas, in system variables, it will take effect for all the users.

Картинка с сайта: www.c-sharpcorner.com

Step 7

Click on ‘New’ and then add the path where you have stored ngrok. Make sure you close the path with \ which is important.

C:\Users\vmuser\Desktop\Softwares\ngrok-stable-windows-amd64

Картинка с сайта: www.c-sharpcorner.com

Step 8

Finally, check if you are able to run ngrok. Open the command prompt and enter the below command,

ngrok version 

Картинка с сайта: www.c-sharpcorner.com

It is displayed ngrok version 2.3.40. This confirms ngrok is properly installed on your machine and you can use this service for your modern app’s testing.

Conclusion

Thus in this article, we have seen what ngrok service is and how to set up in your windows 10 machine.

References

• https://www.ngrok.com
• https://www.twilio.com/docs/usage/tutorials/how-use-ngrok-windows-and-visual-studio-test-webhooks

About the author