Деплой и продакшен

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

Mini App готово — осталось развернуть его в продакшене. В этом уроке разберём требования к деплою, настройку через BotFather, оптимизацию производительности и чеклист безопасности.

Требование HTTPS

Mini App URL обязан использовать HTTPS — без исключений. Telegram не откроет HTTP-ссылку:

Настройка через 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.

Критические метрики

Стратегии оптимизации

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 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)

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.

Полный чеклист деплоя

Итоги модуля M08

В модуле M08 мы изучили:

1. Архитектуру Mini App — WebView, bridge, платформенные ограничения
2. Жизненный цикл — от запуска до закрытия, initData и валидация
3. Темы и UI — CSS-переменные, MainButton, BackButton
4. Stars — платежи за цифровые товары через XTR
5. TON Connect — два режима моста, комбинированная авторизация
6. Бот-интеграцию — способы запуска, web_app_data, HMAC-SHA256
7. Деплой — HTTPS, BotFather, производительность, безопасность

Mini App — это точка входа в TON для 500M+ пользователей Telegram. Понимание архитектуры и паттернов платформы позволяет создавать приложения, которые работают надёжно и масштабируются.

Частые ошибки

1. Не настраивают HTTPS: Telegram Mini Apps требуют HTTPS для всех ресурсов; HTTP-контент блокируется.
2. Забывают установить правильные CORS-заголовки: без них API-запросы от Mini App к вашему серверу блокируются браузером.
3. Не тестируют на реальных мобильных устройствах: поведение в мобильном Telegram существенно отличается от десктопного клиента.
4. Используют один и тот же бот-токен для тестовой и продакшен-среды: это создаёт риски при отладке и может привести к случайным изменениям в продакшене.