Узнайте, как делиться через Интернет с локального хоста

Представьте, что вы работаете из дома и хотите продемонстрировать свое приложение, над которым вы работали, одному из своих коллег или друзей для немедленной обратной связи. У вас нет времени на развертывание, или он еще не готов к развертыванию. Давайте рассмотрим другой сценарий, в котором вы отлаживаете приложение, в котором проблема возникает только на вашем компьютере, и вы хотите, чтобы ваши коллеги посмотрели на это и помогли вам. Как вы делитесь приложением, работающим на локальном хосте, через Интернет, чтобы другие люди могли получить к нему доступ?

Вы часто попадаете в такие ситуации, и в этом посте я хочу рассказать, как мы можем этого добиться с помощью библиотеки ngrok.

  • Что такое ngrok?
  • Пример проекта
  • Реализация и демонстрация
  • Резюме
  • Заключение

Что такое ngrok?

ngrok предоставляет доступ к локальным серверам за NAT и межсетевыми экранами в общедоступный Интернет через безопасные туннели. То, как это работает, очень просто, когда вы запускаете приложение на своем локальном хосте, ngrok подключает его к облачной службе ngrok, которая принимает трафик на общедоступный адрес и ретранслирует этот трафик через процесс ngrok, запущенный на вашем компьютере, а затем на локальный адрес, который ваше приложение запущено.

Это действительно полезно для следующих сценариев

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

«Вы можете найти больше информации о ngrok на их сайте. Вот ссылка."

Пример проекта

Поскольку наше внимание сосредоточено на том, как работает ngrok, давайте создадим образец проекта nodejs express, который работает на порту 3000, и просто отправим сообщение hello ngrok !!!.

Вот ссылка на проект на Github, вы можете клонировать его и запустить на своем компьютере.

// clone the project
git clone https://github.com/bbachi/example-project-ngrok
// install dependencies and run
npm install
npm start

Реализация и демонстрация

Во-первых, давайте запустим приведенный выше пример проекта на вашем локальном компьютере через порт 3000. Вот простой файл index.js, который запускает экспресс-сервер, прослушивающий порт 3000.

У нас есть package.json с node index.js в разделе сценариев для команды запуска.

Начнем проект с команды npm start

Вы можете проверить этот URL в браузере http: // localhost: 3000.

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

// install ngrok globally
npm install ngrok -g
// expose your app
ngrok http 3000

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

Давайте скопируем один из URL переадресации, нажмем его в браузере и поделимся этим URL с кем угодно.

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

sudo chown -R $USER /usr/local/lib/node_modues

Вы можете обновить команду ngrok в разделе сценариев приложения, как показано ниже.

Резюме

  • Иногда вы можете оказаться в ситуации, когда вам нужно продемонстрировать свое приложение, не развертывая его.
  • ngrok предоставляет доступ к локальным серверам за NAT и межсетевыми экранами в общедоступный Интернет через безопасные туннели.
  • «Вы можете найти больше информации о ngrok на их сайте. Вот ссылка."
  • Мы видели демонстрацию, клонировав образец проекта отсюда.
  • Нам нужно установить ngrok глобально на ваш компьютер с помощью этой команды npm install ngrok -g.
  • Вам нужно запустить эту команду ngrok http [port] при запуске вашего приложения на отдельном терминале.
  • Иногда вам может быть отказано в доступе, вам нужно предоставить разрешения с помощью этой команды sudo chown -R $USER /usr/local/lib/node_modules

Заключение

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