Деплой и продакшен
Деплой Mini App — это не просто выкладка файлов на хостинг, а целый процесс, включающий настройку HTTPS, регистрацию бота и тестирование на реальных устройствах. Ошибки на этом этапе могут сделать приложение недоступным для пользователей или создать уязвимости в безопасности.
Mini App готово — осталось развернуть его в продакшене. В этом уроке разберём требования к деплою, настройку через BotFather, оптимизацию производительности и чеклист безопасности.
Требование HTTPS
Mini App URL обязан использовать HTTPS — без исключений. Telegram не откроет HTTP-ссылку:
| Окружение | Решение |
|---|---|
| Локальная разработка | ngrok, Cloudflare Tunnel (предоставляют HTTPS-туннель) |
| Staging | Let’s Encrypt на VPS или managed SSL |
| Production | CDN с автоматическим SSL (Vercel, Cloudflare Pages и др.) |
ngrok для локальной разработки
ngrok http 5173 создаёт HTTPS-туннель к вашему локальному серверу. Полученный URL можно указать в BotFather для тестирования. Бесплатного плана достаточно для разработки.
Настройка через BotFather
Создание Mini App
/mybots -> Выбрать бота -> Bot Settings -> Menu Button
Или для отдельного приложения:
/newapp -> Выбрать бота -> Указать параметры
Параметры:
- Title — название, отображаемое в Telegram
- Description — описание для пользователей
- Photo — иконка (640x360px)
- Web App URL — HTTPS-ссылка на ваше приложение
- Short Name — для direct links (
t.me/bot/short_name)
Menu Button
/mybots -> Выбрать бота -> Bot Settings -> Menu Button -> Configure
URL: https://your-app.com
Button text: Открыть приложение
Menu Button появляется в каждом чате с ботом — основная точка входа.
Производительность
Telegram показывает спиннер загрузки до вызова ready(). Если ваше приложение грузится долго — пользователь видит только индикатор и может закрыть Mini App.
Критические метрики
| Метрика | Цель | Почему важно |
|---|---|---|
| Time to ready() | < 2 секунды | Telegram показывает ошибку при > 3 секунд |
| Bundle size | < 500 KB (gzipped) | Мобильные сети, особенно 3G |
| First paint | < 1 секунда | UX-ощущение скорости |
Стратегии оптимизации
1. Минимизация бандла
// vite.config.ts -- code splitting
export default defineConfig({
build: {
rollupOptions: {
output: {
manualChunks: {
// Выносим тяжёлые зависимости
'ton-connect': ['@tonconnect/ui-react'],
'telegram': ['@telegram-apps/sdk-react'],
}
}
}
}
});
2. Ранний вызов ready()
// Вызывайте ready() ДО загрузки данных
miniApp.ready();
// Данные подгружаются после -- пользователь уже видит UI
fetchUserData().then(setData);
3. Кэширование
# HTTP-заголовки для статических ресурсов
Cache-Control: public, max-age=31536000, immutable
# Для HTML -- короткий кэш
Cache-Control: public, max-age=300
4. Preload критических ресурсов
<!-- В index.html -->
<link rel="preload" href="/main.js" as="script" />
<link rel="preload" href="/styles.css" as="style" />
Mini App URL должен ответить за 3 секунды
Если сервер не отвечает в течение 3 секунд, Telegram покажет пользователю ошибку. Убедитесь, что хостинг быстрый и имеет CDN для вашей целевой аудитории.
Варианты хостинга
| Тип | Примеры | Когда использовать |
|---|---|---|
| Static hosting | Vercel, Cloudflare Pages, Netlify | SPA без серверного рендеринга |
| Container hosting | Docker, Railway, Render | Если нужен бэкенд в одном деплое |
| VPS | Самостоятельный сервер | Полный контроль, сложная инфраструктура |
Для большинства Mini App static hosting — оптимальный выбор: быстрый, дешёвый (часто бесплатный), с автоматическим SSL и CDN.
Чеклист безопасности
1. Валидация initData
[x] Серверная проверка HMAC-SHA256 на КАЖДОМ API-запросе
[x] Проверка auth_date (не старше 1 часа)
[x] Никогда не доверять initDataUnsafe на сервере
2. CORS
// Разрешить запросы только от вашего Mini App
app.use(cors({
origin: 'https://your-mini-app.com',
methods: ['GET', 'POST'],
}));
3. Content Security Policy
Content-Security-Policy:
default-src 'self';
script-src 'self' https://telegram.org;
connect-src 'self' https://your-api.com;
img-src 'self' data: https:;
4. Клиентское хранилище
[x] Не хранить секреты (токены, ключи) на клиенте
[x] Не хранить PII в localStorage/sessionStorage
[x] Использовать CloudStorage для пользовательских настроек
[x] Сессионные токены -- только httpOnly cookies
5. Дополнительно
[x] Rate limiting на API-эндпоинты
[x] Защита от CSRF (проверка initData = достаточно)
[x] Логирование ошибок на сервере
[x] Мониторинг uptime (Mini App должно быть доступно 24/7)
initData как CSRF-защита
Валидация initData на каждом API-запросе заменяет классическую CSRF-защиту. Если initData валиден — запрос гарантированно пришёл от Telegram-пользователя через Mini App.
Docker для разработки
Docker полезен для локальной разработки и изоляции окружения:
# docker-compose.yml
services:
mini-app:
build: .
ports:
- "5173:5173"
volumes:
- .:/app
- /app/node_modules
command: npx vite --host 0.0.0.0
# Dockerfile
FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 5173
CMD ["npx", "vite", "--host", "0.0.0.0"]
Для тестирования в Telegram используйте ngrok: ngrok http 5173 -> URL в BotFather.
Полный чеклист деплоя
| Шаг | Проверка |
|---|---|
| HTTPS | URL начинается с https:// |
| BotFather | Menu Button / /newapp настроены |
| ready() | Вызывается < 2 секунд |
| initData | Валидируется на каждом API-запросе |
| CORS | Ограничен доменом Mini App |
| CSP | Настроен Content-Security-Policy |
| Bundle | Gzipped < 500 KB |
| Кэш | Cache-Control на статику |
| Мониторинг | Uptime + error logging |
| Тестирование | Проверено на iOS, Android, Desktop |
Итоги модуля M08
В модуле M08 мы изучили:
- Архитектуру Mini App — WebView, bridge, платформенные ограничения
- Жизненный цикл — от запуска до закрытия, initData и валидация
- Темы и UI — CSS-переменные, MainButton, BackButton
- Stars — платежи за цифровые товары через XTR
- TON Connect — два режима моста, комбинированная авторизация
- Бот-интеграцию — способы запуска, web_app_data, HMAC-SHA256
- Деплой — HTTPS, BotFather, производительность, безопасность
Mini App — это точка входа в TON для 500M+ пользователей Telegram. Понимание архитектуры и паттернов платформы позволяет создавать приложения, которые работают надёжно и масштабируются.
Частые ошибки
- Не настраивают HTTPS: Telegram Mini Apps требуют HTTPS для всех ресурсов; HTTP-контент блокируется.
- Забывают установить правильные CORS-заголовки: без них API-запросы от Mini App к вашему серверу блокируются браузером.
- Не тестируют на реальных мобильных устройствах: поведение в мобильном Telegram существенно отличается от десктопного клиента.
- Используют один и тот же бот-токен для тестовой и продакшен-среды: это создаёт риски при отладке и может привести к случайным изменениям в продакшене.
Проверка знанийПочему время до вызова ready() критично для Mini App, и что произойдёт при превышении 3 секунд?
Check Your Understanding
Finished the lesson?
Mark it as complete to track your progress
Войдите чтобы оценить урок