Шаг 1: Настройка FastPanel
Last updated
Was this helpful?
Last updated
Was this helpful?
На этом этапе вы выполните установку и настройку Telegram Mini App на вашем сервере через панель управления FastPanel. Точное соблюдение каждого шага обеспечит корректную интеграцию, надёжную работу и безопасность вашего приложения.
В этом разделе вы узнаете, как правильно создать и настроить домен для вашего Telegram Mini App в панели управления FastPanel. Строгое следование каждому шагу обеспечит стабильную работу и правильную интеграцию приложения. Пожалуйста, выполняйте инструкцию внимательно и по порядку.
Перейдите в панель управления FastPanel по адресу, предоставленному вашим хостингом (обычно выглядит так: https://ip_адрес:8888 или аналогично).
Введите свой логин и пароль и нажмите кнопку «Войти».
В меню слева выберите раздел «Сайты».
На странице сайтов нажмите кнопку «Создать сайт».
В открывшемся окне выберите вариант «Создать сайт вручную» (подходит для большинства сайтов).
В открывшейся форме укажите следующие данные:
В поле «Какой домен подключаем?» введите адрес поддомена для вашего Telegram Mini App (например, tg.yourdomain.com или telegram.yourdomain.com).
В поле «К какому IP-адресу?» убедитесь, что указан корректный IP-адрес вашего сервера.
В поле «DNS аккаунт» оставьте значение по умолчанию (обычно указан ваш провайдер, например, FASTVPS).
После заполнения полей проверьте правильность введённых данных и подтвердите создание поддомена.
Нажмите кнопку «Следующий шаг», чтобы перейти к настройке конфигураци
На этапе конфигурации FastPanel автоматически предложит стандартные настройки сайта, которые подходят в большинстве случаев.
Пока оставьте эти настройки без изменений, сохранив значения по умолчанию. На следующих шагах инструкции мы подробно рассмотрим и настроим параметры, необходимые для корректной работы Telegram Mini App.
Нажмите кнопку «Создать сайт» и дождитесь завершения процедуры создания.
После успешного создания поддомена необходимо загрузить файлы приложения Telegram Mini App.
Выполните следующие шаги:
В панели FastPanel перейдите на вкладку «Сайты» и выберите ваш ранее созданный поддомен (например, tg.yourdomain.com).
Перейдите в раздел «Файлы».
В правом верхнем углу нажмите на кнопку «Загрузить» (значок ⬆️).
Загрузите архив с файлами iEXMiniApp и распакуйте его непосредственно в текущей директории.
После выполнения загрузки и распаковки файлов вы можете перейти к следующему этапу настройки вашего Telegram Mini App.
Для корректной работы Telegram Mini App и безопасного взаимодействия с вашим сервером (backend) важно правильно настроить параметр CORS_ALLOWED_ORIGINS
в файле конфигурации .env:
CORS Allowed Origins (CORS_ALLOWED_ORIGINS):
Укажите домены и поддомены, которым разрешён доступ к API вашего backend-приложения. Обычно это ваш основной сайт, а также поддомены, используемые для Telegram Mini App.
К уже существующим доменам в файле .env, через запятую добавьте новый домен вашего Telegram Mini App:
Эта инструкция поможет вам быстро и правильно настроить SSL-сертификат для поддомена вашего Telegram Mini App в панели управления FastPanel. Это обеспечит безопасное и защищённое подключение пользователей к приложению через HTTPS.
Войдите в панель управления FastPanel.
В левом меню перейдите во вкладку «Сайты» и выберите ваш поддомен (например, tg.ваш_домен).
Найдите раздел «SSL сертификаты» и нажмите на него.
Нажмите кнопку «Новый сертификат» в верхнем правом углу.
В открывшемся окне выберите тип «Самоподписанный».
Заполните форму:
Email — укажите свой почтовый адрес для получения уведомлений.
Длина ключа — выберите рекомендуемое значение 2048.
Основной домен — автоматически указан ваш основной домен.
Алиасы — добавьте алиас для основного домена (например, www.ваш_домен
).
Срок действия — установите рекомендуемый срок действия сертификата 365 дней.
Нажмите кнопку «Сохранить».
Эти настройки помогут обеспечить высокую производительность и правильную маршрутизацию запросов вашего Telegram Mini App, а также наладить стабильную работу frontend-компонентов с backend-сервером.
Перейдите в панель управления FastPanel → «Сайты» → выберите ваш поддомен Telegram Mini App (например, tg.ваш_домен) → раздел «Ручная настройка» → вкладка «Frontend».
Выполните следующие шаги внимательно:
В самом начале конфигурационного файла (вне блока server {}
), вставьте следующий код для настройки корректной обработки запросов вашего Telegram Mini App:
Этот блок автоматически определяет язык браузера пользователя и сохраняет его в специальной переменной, чтобы впоследсвии направлять пользователя на нужную языковую версию Telegram Mini App.
Найдите строку: disable_symlinks if_not_owner from=$root_path;
Сразу после неё добавьте:
Copy
Эти строки направляют пользователя на соответствующую языковую версию сайта по умолчанию (русский язык), если язык браузера не определён.
Если у вас уже есть блок location /
внутри конфигурации nginx, его необходимо удалить и заменить новой конфигурацией, подходящей для Angular SSR (localhost:4001) и отдачи статики.
Удалите старую конфигурацию:
Добавьте вместо этого:
/var/www/пользователь/data/www/app.ваш_домен
/var/run/app.ваш_домен.sock
Замените эти шаблонные пути на реальные директории, созданные автоматически при добавлении сайта в панели FastPanel.