Официальный сайт

Шаг 1: Настройка FastPanel

На этом этапе вы выполните установку и настройку Telegram Mini App на вашем сервере через панель управления FastPanel. Точное соблюдение каждого шага обеспечит корректную интеграцию, надёжную работу и безопасность вашего приложения.

Создание домена в панели FastPanel

В этом разделе вы узнаете, как правильно создать и настроить домен для вашего Telegram Mini App в панели управления FastPanel. Строгое следование каждому шагу обеспечит стабильную работу и правильную интеграцию приложения. Пожалуйста, выполняйте инструкцию внимательно и по порядку.

Шаг 1. Авторизация в FastPanel

  • Перейдите в панель управления FastPanel по адресу, предоставленному вашим хостингом (обычно выглядит так: https://ip_адрес:8888 или аналогично).

  • Введите свой логин и пароль и нажмите кнопку «Войти».

Шаг 2. Создание домена для Telegram Mini App

  1. В меню слева выберите раздел «Сайты».

  2. На странице сайтов нажмите кнопку «Создать сайт».

  3. В открывшемся окне выберите вариант «Создать сайт вручную» (подходит для большинства сайтов).

  4. В открывшейся форме укажите следующие данные:

    • В поле «Какой домен подключаем?» введите адрес поддомена для вашего Telegram Mini App (например, tg.yourdomain.com или telegram.yourdomain.com).

    • В поле «К какому IP-адресу?» убедитесь, что указан корректный IP-адрес вашего сервера.

    • В поле «DNS аккаунт» оставьте значение по умолчанию (обычно указан ваш провайдер, например, FASTVPS).

    После заполнения полей проверьте правильность введённых данных и подтвердите создание поддомена.

  5. Нажмите кнопку «Следующий шаг», чтобы перейти к настройке конфигураци

Шаг 3. Конфигурация сайта

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

Важно

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

Нажмите кнопку «Создать сайт» и дождитесь завершения процедуры создания.

Загрузка файлов Telegram Mini App в FastPanel

После успешного создания поддомена необходимо загрузить файлы приложения Telegram Mini App.

Выполните следующие шаги:

  • В панели FastPanel перейдите на вкладку «Сайты» и выберите ваш ранее созданный поддомен (например, tg.yourdomain.com).

  • Перейдите в раздел «Файлы».

  • В правом верхнем углу нажмите на кнопку «Загрузить» (значок ⬆️).

  • Загрузите архив с файлами iEXMiniApp и распакуйте его непосредственно в текущей директории.

После выполнения загрузки и распаковки файлов вы можете перейти к следующему этапу настройки вашего Telegram Mini App.

Настройка доменов и безопасности (CORS)

Для корректной работы Telegram Mini App и безопасного взаимодействия с вашим сервером (backend) важно правильно настроить параметр CORS_ALLOWED_ORIGINS в файле конфигурации .env:

CORS Allowed Origins (CORS_ALLOWED_ORIGINS):

Укажите домены и поддомены, которым разрешён доступ к API вашего backend-приложения. Обычно это ваш основной сайт, а также поддомены, используемые для Telegram Mini App.

К уже существующим доменам в файле .env, через запятую добавьте новый домен вашего Telegram Mini App:

CORS_ALLOWED_ORIGINS=https://ваш_домен,https://tg.ваш_домен

Включение SSL-сертификатов (HTTPS) в FastPanel

Эта инструкция поможет вам быстро и правильно настроить SSL-сертификат для поддомена вашего Telegram Mini App в панели управления FastPanel. Это обеспечит безопасное и защищённое подключение пользователей к приложению через HTTPS.

Шаг 1. Настройка SSL для основного домена

  1. Войдите в панель управления FastPanel.

  2. В левом меню перейдите во вкладку «Сайты» и выберите ваш поддомен (например, tg.ваш_домен).

  3. Найдите раздел «SSL сертификаты» и нажмите на него.

  4. Нажмите кнопку «Новый сертификат» в верхнем правом углу.

  5. В открывшемся окне выберите тип «Самоподписанный».

  6. Заполните форму:

    • Email — укажите свой почтовый адрес для получения уведомлений.

    • Длина ключа — выберите рекомендуемое значение 2048.

    • Основной домен — автоматически указан ваш основной домен.

    • Алиасы — добавьте алиас для основного домена (например, www.ваш_домен).

    • Срок действия — установите рекомендуемый срок действия сертификата 365 дней.

  7. Нажмите кнопку «Сохранить».

Настройка Nginx для Telegram Mini App (Frontend)

Эти настройки помогут обеспечить высокую производительность и правильную маршрутизацию запросов вашего Telegram Mini App, а также наладить стабильную работу frontend-компонентов с backend-сервером.

Перейдите в панель управления FastPanel → «Сайты» → выберите ваш поддомен Telegram Mini App (например, tg.ваш_домен) → раздел «Ручная настройка» → вкладка «Frontend».

Выполните следующие шаги внимательно:

Шаг 1: Добавьте блок определения языка (map) за пределами блока server

В самом начале конфигурационного файла (вне блока server {}), вставьте следующий код для настройки корректной обработки запросов вашего Telegram Mini App:

map $http_accept_language $accept_language {
    "~*ru" ru;
    "~*en" en;
    default ru;
}

map $cookie_lang $selected_lang {
    "~^(ru|en)$" $cookie_lang;
    default $accept_language;
}

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

Шаг 2: Добавьте проверку языка и перенаправление внутри блока server

Найдите строку: disable_symlinks if_not_owner from=$root_path;

Сразу после неё добавьте:

Copy

add_header Vary "Accept-Language, Cookie";

Эти строки направляют пользователя на соответствующую языковую версию сайта по умолчанию (русский язык), если язык браузера не определён.

Шаг 3: Замените блок location / внутри блока server

Если у вас уже есть блок location / внутри конфигурации nginx, его необходимо удалить и заменить новой конфигурацией, подходящей для Angular SSR (localhost:4001) и отдачи статики.

Удалите старую конфигурацию:

location / {
    proxy_pass http://127.0.0.1:81;
    proxy_redirect http://127.0.0.1:81/ /;
    include /etc/nginx/proxy_params;
}


 location ~* ^.+\.(jpg|jpeg|gif|png|svg|js|css|mp3|ogg|mpeg|avi|zip|gz|bz2|rar|swf|ico|7z|doc|docx|map|ogg|otf|pdf|tff|tif|txt|wav|webp|woff|woff2|xls|xlsx|xml)$ {
    try_files $uri $uri/ @fallback;
}

location @fallback {
    proxy_pass http://127.0.0.1:81;
    proxy_redirect http://127.0.0.1:81/ /;
    include /etc/nginx/proxy_params;
}

Добавьте вместо этого:

location = / {
    return 302 /$selected_lang/$is_args$args;
}

location ~ ^/(ru|en)$ {
    add_header Set-Cookie "lang=$1; Path=/; Max-Age=31536000; SameSite=Lax";
    return 302 /$1/$is_args$args;
}

location ~ ^/(ru|en)/ {
    proxy_pass http://localhost:4001;
    proxy_redirect http://localhost:4001/ /;
    include /etc/nginx/proxy_params;
    
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;

    proxy_buffering on;
    proxy_buffers 16 64k;
    proxy_buffer_size 128k;
    proxy_read_timeout 60s;
    proxy_connect_timeout 10s;
    proxy_send_timeout 10s;
}

location / {
    return 302 /$selected_lang$request_uri$is_args$args;
}

location ^~ /images/ {
    alias /var/www/пользователь/data/www/app.ваш_домен/public/images/;
    expires 30d;
    add_header Cache-Control "public, max-age=2592000, immutable";
    autoindex off;
    access_log off;
}

location ^~ /exports/ {
    alias /var/www/пользователь/data/www/app.ваш_домен/public/static/exports/;
    autoindex off;
    access_log off;
}

location ^~ /static/ {
    alias /var/www/пользователь/data/www/app.ваш_домен/public/static/;
    autoindex off;
    access_log off;
}

location ^~ /storage/ {
    alias /var/www/пользователь/data/www/app.ваш_домен/public/storage/;
    expires 30d;
    add_header Cache-Control "public, max-age=2592000, immutable";
    autoindex off;
    access_log off;
}

location /apis {
    index index.php index.html index.htm;
    alias /var/www/пользователь/data/www/app.ваш_домен/public;

    # Laravel routing fallback
    try_files $uri $uri/ @apis;

    # Защита от скрытых файлов (.env, .htaccess и т.п.)
    location ~ /\.(?!well-known).* {
        deny all;
    }

    # PHP-обработка
    location ~ \.php$ {
        include /etc/nginx/fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $request_filename;
        fastcgi_pass unix:/var/run/app.ваш_домен.sock;
    }
}

location @apis {
    rewrite ^/apis/(.*)$ /apis/index.php?/$1 last;
}

Важно! Обязательно замените все указания:

  • /var/www/пользователь/data/www/app.ваш_домен

  • /var/run/app.ваш_домен.sock

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

PreviousУстановка приложенияNextШаг 2: Настройка PM2

Last updated

Was this helpful?