29.08.2024 06:15
Tazer16179 4 1600 Источник

Существует множество различных способов запуска Telegram Mini Apps, но я для себя выделил несколько наиболее удобных и простых методов.

Ngrok — это мощная утилита для создания защищённых туннелей, которая позволяет преобразовать локальный URL, такой как http://localhost, в публичный HTTPS-адрес. Этот инструмент особенно полезен для разработчиков, которым нужно протестировать веб-приложения или интеграции с внешними сервисами, такими как Telegram-боты, прямо с их локальной машины.

Чтобы использовать Ngrok, сначала необходимо запустить ваше приложение на локальном сервере, например, по адресу http://localhost:3000. После этого вы можете запустить Ngrok с помощью команды:

ngrok http 3000

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

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

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

Порты в Visual Studio Code

Второй способ запуска Telegram Mini Apps, который я считаю удобным, — это использование встроенного инструмента управления портами в Visual Studio Code (VSCode). Этот метод позволяет легко и быстро открывать доступ к локальному приложению для внешних сервисов, включая Telegram.

  1. Открытие порта в VSCode:
    Начните с запуска вашего приложения в локальной среде разработки. Затем откройте терминал в VSCode и перейдите на вкладку "Порты" (Ports). В этой вкладке можно увидеть все порты, которые используются в вашем проекте.

  2. Настройка порта:
    Найдите порт, на котором работает ваше приложение (например, порт 3000). Чтобы сделать его доступным извне, измените его состояние с "Приватный" на "Публичный". Это позволит создать публичный URL для доступа к вашему приложению через интернет.

  3. Использование полученного URL:
    После изменения состояния порта вы сможете скопировать сгенерированный URL и использовать его для открытия вашего приложения в Telegram в формате Mini App. Это простой и быстрый способ интеграции локально разрабатываемых приложений с Telegram, без необходимости устанавливать дополнительные инструменты.

Использование страницы переадресации

Ещё один удобный способ запуска Telegram Mini Apps — использование HTTPS-страницы с переадресацией на ваше локальное HTTP-приложение. Этот метод позволяет обходить ограничения на использование небезопасных (HTTP) адресов, сохраняя при этом простоту настройки.

  1. Получение IP-адреса:
    Для начала, вам нужно узнать IP-адрес вашей машины в локальной сети. Это можно сделать, открыв командную строку и введя команду:

    ipconfig

    Полученный IP-адрес будет использоваться для создания редиректа.

  2. Создание страницы редиректа:
    Следующим шагом создайте простую HTML-страницу, которая автоматически перенаправит пользователей на ваш локальный сервер. Пример такой страницы:

    <!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="refresh" content="0; url=http://192.168.1.212:3000" />
        <title>Redirecting...</title>
    </head>
    <body>
        <p>
            Если вы не были перенаправлены автоматически,
            <a href="http://192.168.1.212:3000">нажмите здесь</a>.
        </p>
    </body>
</html>

    Здесь 192.168.1.212:3000 — это пример локального адреса, который необходимо заменить на ваш действительный IP и порт.

  3. Запуск приложения с доступом по IP:
    Для того чтобы ваше приложение могло открываться по IP-адресу, нужно запускать его с указанием параметра --host. Например, если вы используете React, выполните следующую команду:

    npm run dev -- --host

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

  4. Хостинг страницы на HTTPS:
    Теперь вам нужно разместить эту HTML-страницу на ресурсе, который поддерживает HTTPS. Одним из самых простых и популярных способов является использование GitHub Pages. Вы загружаете вашу страницу на GitHub, а затем указываете в Telegram-боте ссылку на эту страницу. Когда пользователь перейдёт по этой ссылке, произойдёт автоматический редирект на ваше локальное приложение.

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

Режим разработчика Telegram

Ещё один способ запуска Telegram Mini Apps — использование режима разработчика в Telegram. Этот метод, хотя и не идеально стабильный, может быть крайне удобным, если у вас есть возможность его использовать.

Стоит отметить, что этот способ работает корректно только на устройствах с iOS, и его поведение может быть непредсказуемым. Однако, если вам удастся его настроить, вы сможете запускать Mini Apps и открывать HTTP-ссылки прямо в боте, без необходимости дополнительных настроек для обеспечения безопасности (HTTPS).

Как включить режим разработчика:
Для того чтобы активировать режим разработчика, вам потребуется следовать инструкциям, представленным в официальной документации Telegram. После активации этого режима, бот, работающий в нём, сможет открывать HTTP-ссылки, что значительно упрощает процесс тестирования и разработки ваших Mini Apps.

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

Использование локальных серверов через localhost.run

Ещё один удобный метод для запуска Telegram Mini Apps — использование сервиса localhost.run. Этот сервис позволяет быстро и просто сделать ваш локальный сервер доступным в интернете без необходимости установки дополнительного программного обеспечения.

  1. Запуск приложения на локальном сервере:
    Для начала запустите ваше приложение на локальном сервере, например, по адресу http://localhost:3000.

  2. Использование localhost.run для туннелирования:
    Откройте терминал и выполните следующую команду:

    ssh -R 80:localhost:3000 localhost.run

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

  3. Использование полученного URL:
    После выполнения команды, в терминале будет отображён публичный URL, который можно использовать для доступа к вашему приложению через интернет. Этот URL также можно использовать для открытия вашего приложения в Telegram Mini App.

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

Использование облачных платформ

Если вам нужно быстро развернуть и протестировать ваше приложение в реальном облачном окружении, вы можете использовать облачные платформы, такие как Heroku, Vercel или Netlify. Эти сервисы позволяют вам развернуть ваше приложение в несколько шагов и предоставляют автоматическое масштабирование и управление инфраструктурой.

  1. Heroku:
    Для развертывания приложения на Heroku выполните следующие шаги:

    • Установите Heroku CLI и войдите в аккаунт.

    • Создайте новое приложение командой heroku create.

    • Разверните ваше приложение командой git push heroku main.

  2. Vercel:
    Vercel особенно хорошо подходит для развертывания фронтенд-приложений. После авторизации в Vercel вы можете подключить репозиторий вашего проекта, и он автоматически развернёт ваше приложение.

  3. Netlify:
    Похожий на Vercel, Netlify позволяет легко развернуть статические и динамические сайты, предоставляя простой в использовании интерфейс и автоматическое управление CI/CD.

Эти платформы подходят для быстрого и удобного развертывания приложений с минимальной настройкой, что делает их отличным выбором для тестирования и демонстрации Telegram Mini Apps.

Заключение

Каждый из описанных способов запуска Telegram Mini Apps имеет свои преимущества и особенности, и выбор подходящего метода зависит от ваших конкретных потребностей и условий. Использование Ngrok, портов в Visual Studio Code, страницы переадресации или режима разработчика Telegram позволяет разработчикам адаптироваться к разным сценариям и тестировать свои приложения наиболее удобным образом.

Ngrok предоставляет быстрый доступ к локальному серверу через HTTPS, что идеально для тестирования и интеграции с внешними сервисами. Порты в VSCode — простой способ открыть доступ к вашему приложению без необходимости установки дополнительного ПО. Страница переадресации — это элегантное решение для обхода ограничений на HTTP-ссылки, а режим разработчика Telegram позволяет использовать HTTP-ссылки прямо в ботах, хотя и с некоторыми ограничениями.

В зависимости от ваших нужд и инструментов, которые вы используете, вы можете выбрать один из этих методов или комбинировать их для достижения наилучшего результата. В конечном счёте, ключ к успешному запуску Telegram Mini Apps — это гибкость и умение адаптироваться к разным условиям, что позволит вам эффективно тестировать и разрабатывать ваши проекты.

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


  1. kubk
    29.08.2024 11:25
    #27223404
    +1

    В статье не описано, что ngrok даёт бесплатно 1 стабильный URL: https://docs.telegram-mini-apps.com/platform/getting-app-link#ngrok (c ограничением 20000 запросов в месяц)

    Это важно, потому что при разработке вы не будете каждый раз генерировать новый URL и идти менять его в настройках BotFather


    1. Tazer16179 Автор
      29.08.2024 11:25
      #27224654

      Да, согласен с вами, спасибо за уточнение.


    1. TakoiNickNameUgeZanyat
      29.08.2024 11:25
      #27225864

      Тоже использовал ngrok при разработке мини апы, но лимит исчерпался за 2 дня, он всегда был 20000?


      1. kubk
        29.08.2024 11:25
        #27227346
        +1

        Если у вас вдруг используется Vite, то он в дев режиме для каждого модуля делает отдельный файл, соответственно HTTP запрос. Это нужно для HMR и увеличения скорости за счёт того что браузер нативно поддерживает модули. C ngrok это приводит к быстрому исчерпанию лимитов. Если у вас действительно в этом причина, то думаю можно отключить минификацию если запуск через Ngrok (например если проверять переменную окружения в конфиге): https://vitejs.dev/config/build-options#build-minify