09.09.2024 05:00
yakvenalex 0 1300 Источник

В современном мире веб-разработки наличие доменного имени с поддержкой HTTPS стало неотъемлемой частью обеспечения безопасности и доверия пользователей. Особенно это актуально для приложений, таких как телеграм-боты, использующие вебхуки — без HTTPS такие приложения и вовсе не работают.

На практике появляется необходимость в покупке доменного имени и настройке Nginx или Apache на сервере. В данном случае нужно покупать домен, HTTPS-сертификат, тратить много времени на настройку и проксирование.

Конечно, есть сервисы, такие как Amvera Cloud, которые берут вопросы настройки проекта на себя и выделяют домен с HTTPS под проект, но такие сервисы подходят не для всех задач.

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

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

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

Мы будем использовать следующие сервисы для получения бесплатного домена с HTTPS:

  • Ngrok — известный сервис с бесплатным планом и определенными ограничениями.

  • Localtunnel — полностью бесплатный сервис, поддерживающий HTTPS.

Эти инструменты позволяют легко и быстро настроить доменное имя для вашего приложения, будь то веб-сайт на Flask, Django, FastAPI, телеграм-бот на вебхуках или любое другое приложение, требующее доменного имени с HTTPS.

В качестве примера я создам простое Flask-приложение. Сначала мы запустим его локально (с хостом localhost), а затем откроем глобальный доступ через указанные сервисы.

Я выбрал Python Flask из-за его простоты и скорости разработки веб-приложений. Однако методы, которые я продемонстрирую, одинаково хорошо подойдут для любого приложения, требующего доступа через доменное имя с HTTPS.

Сначала подготовим наше веб-приложение.

Структура простого Flask приложения

Структура моего Flask-приложения будет иметь следующий вид:

Flask_app
├── app.py         # Файл с кодом приложения
├── static         # Папка для статических файлов
│   ├── style.css  # Файл стилей
│   └── script.js  # JavaScript файл
└── templates      # Папка для HTML-шаблонов
    └── index.html # Основной HTML-шаблон

Написание кода Flask python

Я создам новый проект для этого приложения в PyCharm и реализую указанную выше структуру.

Чтобы установить Flask, откройте терминал и выполните команду:

pip install flask

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

Файл app.py:

from flask import Flask, render_template


app = Flask(__name__)


@app.route('/')
def index():
    return render_template('index.html')


if __name__ == '__main__':
    app.run(debug=True)

Это минимальное Flask-приложение возвращает HTML-шаблон index.html при переходе на корневой маршрут (главная страница сайта).

Теперь опишем  HTML шаблон нашего приложения.

Файл temlates/index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Компактное Flask приложение для Хабра</title>
    <link rel="icon"
          href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>?</text></svg>">

    <!-- Подключение стилей -->
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<div class="container">
    <svg class="flask-logo rotate" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <path d="M78.2,83.3H21.8c-2.5,0-4.5-2-4.5-4.5V62.7c0-1.2,0.5-2.3,1.4-3.1L40,38.9V21.8c0-2.5,2-4.5,4.5-4.5h11
                c2.5,0,4.5,2,4.5,4.5v17.1l21.3,20.7c0.9,0.8,1.4,2,1.4,3.1v16.1C82.7,81.3,80.7,83.3,78.2,83.3z"
              fill="#333"/>
        <path d="M60,38.9V21.8c0-2.5-2-4.5-4.5-4.5h-11c-2.5,0-4.5,2-4.5,4.5v17.1L18.7,59.6c-0.9,0.8-1.4,2-1.4,3.1v16.1
              c0,2.5,2,4.5,4.5,4.5h56.4c2.5,0,4.5-2,4.5-4.5V62.7c0-1.2-0.5-2.3-1.4-3.1L60,38.9z" fill="#FFFFFF"/>
        <circle cx="50" cy="50" r="15" fill="#333"/>
    </svg>
    <h1 class="gradient-text">Привет, Flask!</h1>
    <p>Добро пожаловать в компактное Flask приложение. Это элегантное решение демонстрирует мощь и простоту Flask -
        микро-фреймворка для веб-разработки на Python.</p>
    <div class="highlight">
        <p>Это простое Flask приложение для Хабра создано, чтобы показать, как легко начать работу с Flask. Идеально для
            начинающих веб-разработчиков и быстрого прототипирования.</p>
    </div>
    <p>Несмотря на простоту, приложение легко расширяется новыми маршрутами, базами данных или API. Flask - гибкая
        основа для роста вашего проекта.</p>
    <a href="https://flask.palletsprojects.com/" class="btn">Узнать о Flask</a>
</div>

<!-- Подключение скриптов -->
<script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>

Код может быть любым, но я решил продемонстрировать вам как происходит импорт статических файлов в HTML шаблон.

Для импорта стилей я использовал:

<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

Для импорта JavaScipt:

<script src="{{ url_for('static', filename='script.js') }}"></script>

Исходник стилей и скрипта, так как не имеет самоцели данной статьи, оставлю за скобками. Полный исходник кода данного проекта, как и прочий эксклюзивный контент, который я не публикую на Хабре, вы найдете в моем телеграмм канале «Легкий путь в Python».

Запуск проекта

Для запуска проекта используйте команду:

flask run

В результате вы увидите следующее:

* Serving Flask app 'app'
* Running on http://127.0.0.1:5000

Press CTRL+C to quit

Это сообщение говорит о том, что сейчас Flask приложение доступно по адресу: http://127.0.0.1:5000

По умолчанию Flask использует порт 5000, но вы можете изменить его с помощью команды:

flask run --port 8000

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

Теперь, когда приложение запущено, вы можете перейти по адресу http://127.0.0.1:8000 и увидеть ваше приложение в действии. В моем случае приложение выглядит так:

Все работает, а это значит что настало время привязывать доменное имя с HTTPS протоколом к нашему приложению.

Подключаем Ngrok

  • Перейдите на официальный сайт Ngrok по адресу https://ngrok.com/.

  • Зарегистрируйтесь и подтвердите свою электронную почту. Регистрация бесплатна.

  • После входа в аккаунт скачайте архив с Ngrok, соответствующий вашей операционной системе. В моем случае это версия для Windows 10 64-бит.

  • Распакуйте архив в удобное для вас место.

  • Запустите файл ngrok.exe.

  • В открывшемся окне выполните команду для автоматической настройки конфигурационного файла ngrok.yml. Токен можно найти на сайте Ngrok в разделе «Your Authtoken», Этот шаг необходим для доступа ко всем функциям Ngrok.

  • Добавляем токен в файл с настройками

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

Теперь в вашем компьютере появляется возможность создания локальных HTTPS-туннелей. Для запуска такого туннеля достаточно в терминале ввести:

ngrok http http://localhost:8000

или

ngrok http 8000

Важно чтоб порт, который вы указываете в данной команде, совпадал с портом, который вы указали в своем Flask приложении.

Создадим туннель:

ngrok http 8000

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

https://fd62-80-85-143-232.ngrok-free.app -> http://localhost:8000

Эта запись указывает на то, что с помощью сервиса ngrok был создан туннель, который перенаправляет трафик с публичного URL-адреса https://fd62-80-85-143-232.ngrok-free.app на локальный сервер, работающий на http://localhost:8000. Это позволяет получить доступ к локальному серверу через интернет.

Теперь перезапустим Flask приложение и перейдем по выделенному доменному имени.

При первом переходе вас встретит такое сообщение. Кликаем на «Visit Site».

Теперь приложение получило публичный доступ, и если бы вы сейчас перешли по адресу https://fd62-80-85-143-232.ngrok-free.app, вы бы увидели тот же результат, несмотря на то, что приложение находится на моем локальном компьютере.

Подключаем LocalTunnel

Для работы с Localtunnel нам необходимо будет установить NodeJS на свой компьютер, если этого еще не было сделано. Скачать его можно под любую операционную систему с сайта https://nodejs.org/en/download/package-manager.

Далее выполняем установку.

Для того чтобы убедиться, что Node установлен корректно, в терминале вводим:

node --version

Результат должен быть примерно таким:

Теперь установим Localtunel. Для этого вводим в терминале:

npm install -g localtunnel

Далее, для создания туннеля, вводим следующее:

lt --port 8000 --subdomain yakvenalex-habr

Как видите, мы можем сами указать субдомен. В моем случае это: yakvenalex-habr.

После этого вы должны получить сообщение в таком формате:

your url is: https://yakvenalex-habr.loca.lt

Перезапустим Flask-приложение и перейдем по указанному доменному имени.

При первом заходе вам необходимо будет в графе Tunnel Password прописать айпи адрес. Для его получения необходимо перейти по https://loca.lt/mytunnelpassword.

Копируем его и вставляем Tunnel Password. Затем жмем на «Click to submit»:

Если все сделано корреткно, то после этого действия должно будет подгрузиться ваше Flask приложение.

В целом, этот метод работает, но я бы всё же порекомендовал Ngrok, а Localtunnel привёл здесь просто в качестве примера.

Заключение

Сегодня я рассказал, как легко организовать трансляцию вашего локального приложения в глобальную сеть без необходимости покупки доменного имени и установки HTTPS сертификатов.

Эти примеры подходят для временных решений или в процессе разработки. Для рабочих проектов лучше использовать серверы или хостинги, такие как Amvera Cloud, которые предоставляют постоянные доменные имена и собственные настройки HTTPS.

Лично я использую Ngrok и Localtunel в следующих случаях:

  1. Локальная разработка телеграм‑ботов на вебхуках.

  2. Демонстрация проектов на Flask, FastAPI и Django заказчикам без необходимости настройки сервера и поднятия Nginx/Apache.

Рекомендую и вам воспользоваться этими технологиями.

На этом всё. Если информация оказалась полезной, оставьте комментарий и поставьте лайк.

Спасибо за внимание!

Комментарии (0)