Как сделать локальный Django-сайт доступным в Интернете / Туннели ngrok

Допустим вы пишите какое-то Django-приложение. Как обычно разработка идёт локально на вашем компьютере.  По умолчанию все Django-проекты доступны по адресу http://localhost:8000 или http://127.0.0.1:8000 что одно и тоже. Эта адреса твоего локального компьютера. Соответственно никто другой в Интернете, перейдя по одному из этих адресов, ваш сайт не увидит.

Проект пока рано заливать на какой-то хостинг или выделенный сервер, но показать его другому человеку уже нужно: похвастаться другу, человеку и команды разработки, заказчику и т.д. Даже если этот человек подключится к WI-FI у вас дома и будет находиться с сайтом в одной сети, localhost будет перенаправлять гостя на своё же устройство, а не на ваш сайт.

Что делать, как показать Django-проект, которые запускается на локальном сервере, недоступном в Интернете? Есть несколько вариантов:

• cделать скриншоты каждой страницы сайта;

• показать экран в ZOOM или Discord;

• дать доступ к своему рабочему столу через Team Viewer;

• записать экранку;

• настроить HTTP-туннель с помощью утилиты ngrok.

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

• что такое туннелирование и HTTP-туннель;

• зачем нужна и как работает утилита ngrok;

• как настроить HTTP-туннель с помощью ngrok, чтобы сделать доступным в Интернете ваш локальный сайт на Django или любом другом веб-фреймворке.

Прежде чем начнём, давайте знакомится. Меня зовут Макс. Я преподаватель в классическом университете и один из авторов YouTube-каналы PyLounge. Теперь же приступим к делу!

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

Дисклеймер: Я намеренно упрощаю некоторые понятия и концепции, т.к. данный материал нацелен преимущественно на новичков. Может быть подобного рода допущения грешны, но что вы мне сделаете, я в другом городе?

Туннелирование — термин из компьютерных сетей, который обозначает процесс, в ходе которого создаётся соединение между двумя устройствами с помощью инкапсуляции различных протоколов.

Комбинация туннелирования и шифрования позволяет реализовать закрытые виртуальные частные сети (VPN).

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

HTTP-туннелирование используется для создания сетевого соединения между двумя компьютерами в условиях ограниченного сетевого подключения (брандмауэр, NAT, ACL). Туннель создается посредником, который называется прокси-сервером, который обычно находится в DMZ.

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

Ngrok создает туннель между вашим компьютером и удалённым сервером и предоставляет доступ к нему с уникального домена (адреса), который сама и генерирует.  Достаточно только зарегистрироваться на сайте сервиса, установить программу на компьютер и запустить команду создания туннеля. Этим мы и займемся.

Пусть у нас изначально есть некоторый Django-проект. Он работает и запушен локально, доступен по адресу http://localhost:8000.

1. Переходим на официальный сайт Ngrok — https://ngrok.com/

2. Регистрируемся на сайте и подтверждаем почту. Это бесплатно.

3. Скачиваем архив с ngrok для вашей версии операционной системы. В моём случае это Windows 10 64-бит.

4. Распаковываем архив в любое удобное место.

5. Запустим файл ngrok.exe.

6. В открывшемся окне выполним следующую команду для автоматической конфигурации файла настроек ngrok.yml:

   ngrok config add-authtok ВАШ_ТОКЕН

Токен можно посмотреть на сайте ngrok на вкладке Your Authtoken либо в разделе Setup & Installation в пункте 2. Connect your account.

Это нужно, чтобы получить доступ ко всем функциям ngrok.

7. Теперь для создания HTTP-туннеля выполним команду:

   ngrok http http://localhost:8000 или ngrok http 8000

Открывается окно сеанса туннелирования. В этом окне в разделе Forwarding сгенерировалась ссылка. По ней наше Django-приложение, запушенное на порту 8000, и будет доступно в Интернете.

Теперь вы можете просто скопировать эту ссылку и отправлять её другу, заказчику, другому разработчику и т.д. Эта ссылка будет работать пока вы не завершите сеанс Ngrok или пока не закончится время сеанса (аренды ссылки). После чего сеанс придётся перезагрузить, при этом сгенерируется новая ссылка.

Однако при попытке перейти на сайт Django выдаст ошибку DisallowedHost

Чтобы её исправить необходимо открыть файл settings.py нашего Django-приложения и в списке ALLOWED_HOSTS указываем '*'

Django проверяет заголовок хоста HTTP-запроса на наличие URL/ip-адреса, который находится в пределах разрешенных хостов ALLOWED_HOSTS . Указывая * мы разрешаем доступ с любого хоста.

После сохранения изменений сайт наконец-то будет доступен по сгенерированной ссылке!

Базовый синтаксис утилиты Ngrok выглядит следующим образом:

ngrok команда опции

Список команд:

• completion — сгенерировать скрипт автодополнения для bash или zsh;

• config add-authtoken — сохранить токен аутентификации в конфиг файл;

• config check — проверить конфигурационный файл на ошибки;

• config edit — редактировать конфигурационный файл;

• http — создание HTTP туннеля;

• tcp — создание TCP туннеля;

• start — запуск туннелей, настроенных в конфигурационном файле;

• service install — установить конфигурационные файлы сервисов в систему;

• service start — запустить сервис;

• service stop — остановить сервис;

• update — обновить утилиту до последней версии;

• version — показать версию утилиты.

 Если вы хотите посмотреть перечень всех команд, можно запустить команду ngrok help.

У каждой команды есть свои параметры. Так чтобы сделать доступным локальный HTTP порт нашего приложения извне необходимо использовать команду http. Затем указать порт в качестве параметра, например для нашего случая это порт Django проекта 8000:

ngrok http 8000

Например, если вы не хотите, чтобы кто-то посторонний не смог получить доступ к вашему ресурсу, можно добавить HTTP-авторизацию. Для этого используется опция —basic-auth:

ngrok http --basic-auth="пользователь:пароль" 8000

На самом деле возможностей довольно много. Есть много мощных комбинации команд и их опций. Со всем этим по мере надобности рекомендую ознакомиться в документации ngrok.

На последок упомяну, что, когда Ngrok-клиент запущен, можно открыть веб-интерфейс, который доступен по адресу http://127.0.0.1:4040. В нём доступна история запросов, в которой можно увидеть какие данные пришли и что было отправлено в ответ, переотправить или модифицировать запрос и многое другое.

---

Вот таким нехитром способом можно использовать Ngrok для создания туннелей и проброса локального порта в Интернет.

В бесплатном тарифе Ngrok может использоваться только для не длительного проброса в районе, кажется, 1 часа (тут могу ошибиться). Потом надо перезапускать сессию. Однако для локальной разработки, чтобы показать, как выглядит локальный сайт вполне подойдёт.

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

Надеюсь эта статья была полезной и интересной. До скорых встреч!