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

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

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

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

### Шаг 1. Авторизация в FastPanel <a href="#shag-1.-avtorizaciya-v-fastpanel" id="shag-1.-avtorizaciya-v-fastpanel"></a>

<figure><img src="https://docs.iexexchanger.com/~gitbook/image?url=https%3A%2F%2F1156649716-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FYuqSN6CIJoIeh8EPb0uE%252Fuploads%252Fux64QRL6hRbtXzO0Y3Za%252Fimage.png%3Falt%3Dmedia%26token%3Db2f62e65-fcda-40c8-9449-63d0ba28da6e&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=aad795e&#x26;sv=2" alt="" width="563"><figcaption></figcaption></figure>

* Перейдите в панель управления **FastPanel** по адресу, предоставленному вашим хостингом (обычно выглядит так: **<https://ip\\_адрес:8888>** или аналогично).
* Введите свой логин и пароль и нажмите кнопку **«Войти»**.

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

<figure><img src="https://docs.iexexchanger.com/~gitbook/image?url=https%3A%2F%2F1156649716-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FYuqSN6CIJoIeh8EPb0uE%252Fuploads%252F4h1sxfVi4He4HUa5Plry%252Fimage.png%3Falt%3Dmedia%26token%3Da452a860-1c13-4ecf-b656-bb20e40e7110&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=970697c6&#x26;sv=2" alt="" width="563"><figcaption></figcaption></figure>

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

   <figure><img src="https://docs.iexexchanger.com/~gitbook/image?url=https%3A%2F%2F1156649716-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FYuqSN6CIJoIeh8EPb0uE%252Fuploads%252F8P1OlQ6H8cZ5uHrm8xLC%252Fimage.png%3Falt%3Dmedia%26token%3Dbb3c2875-c1f7-4ccf-a1de-587b34cedbfb&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=46bd1dc0&#x26;sv=2" alt="" width="563"><figcaption></figcaption></figure>
4. В открывшейся форме укажите следующие данные:

   * В поле **«Какой домен подключаем?»** введите адрес поддомена для вашего Telegram Mini App (например, tg.yourdomain.com или telegram.yourdomain.com).
   * В поле **«К какому IP-адресу?»** убедитесь, что указан корректный IP-адрес вашего сервера.
   * В поле **«DNS аккаунт»** оставьте значение по умолчанию (обычно указан ваш провайдер, например, FASTVPS).

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

   <figure><img src="https://4233670011-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLTlg7o2JZCIoPVvMc1rY%2Fuploads%2FR7o4VLrufZECHqFBm46q%2Fimage.png?alt=media&#x26;token=f3faf15c-dce9-487f-8750-b8178ec19e2c" alt="" width="563"><figcaption></figcaption></figure>
5. Нажмите кнопку **«Следующий шаг»**, чтобы перейти к настройке конфигураци

### Шаг 3. Конфигурация сайта <a href="#shag-3.-konfiguraciya-saita" id="shag-3.-konfiguraciya-saita"></a>

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

<figure><img src="https://docs.iexexchanger.com/~gitbook/image?url=https%3A%2F%2F1156649716-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FYuqSN6CIJoIeh8EPb0uE%252Fuploads%252FDUUAF8FjGX1COPRmSXXe%252Fimage.png%3Falt%3Dmedia%26token%3D8da80f3c-ef85-4860-b42d-a932ec1a2486&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=def72201&#x26;sv=2" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}

### Важно <a href="#vazhno" id="vazhno"></a>

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

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

***

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

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

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

* В панели 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 <a href="#vklyuchenie-ssl-sertifikatov-https-v-fastpanel" id="vklyuchenie-ssl-sertifikatov-https-v-fastpanel"></a>

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

### Шаг 1. Настройка SSL для основного домена <a href="#shag-1.-nastroika-ssl-dlya-osnovnogo-domena" id="shag-1.-nastroika-ssl-dlya-osnovnogo-domena"></a>

1. Войдите в панель управления FastPanel.
2. В левом меню перейдите во вкладку «Сайты» и выберите ваш поддомен (например, **tg.**<mark style="color:red;">**ваш\_домен**</mark>).
3. Найдите раздел **«SSL сертификаты»** и нажмите на него.

   <figure><img src="https://docs.iexexchanger.com/~gitbook/image?url=https%3A%2F%2F1156649716-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FYuqSN6CIJoIeh8EPb0uE%252Fuploads%252FZMbBdxnB3oW4pg1QAzwP%252Fimage.png%3Falt%3Dmedia%26token%3D5d39f4f0-b639-4a1e-bc7a-2488eba16d2d&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=b31f7dc4&#x26;sv=2" alt=""><figcaption></figcaption></figure>
4. Нажмите кнопку **«Новый сертификат»** в верхнем правом углу.

   <figure><img src="https://docs.iexexchanger.com/~gitbook/image?url=https%3A%2F%2F1156649716-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FYuqSN6CIJoIeh8EPb0uE%252Fuploads%252FBvwowep3mRKDeIkjJnQn%252Fimage.png%3Falt%3Dmedia%26token%3Dff31e866-e353-45d6-9d98-fc86020bc362&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=54ed9b1b&#x26;sv=2" alt=""><figcaption></figcaption></figure>
5. В открывшемся окне выберите тип **«Самоподписанный»**.
6. Заполните форму:
   * **Email** — укажите свой почтовый адрес для получения уведомлений.
   * **Длина ключа** — выберите рекомендуемое значение **2048**.
   * **Основной домен** — автоматически указан ваш основной домен.
   * **Алиасы** — добавьте алиас для основного домена (например, `www.ваш_домен`).
   * **Срок действия** — установите рекомендуемый срок действия сертификата **365** дней.
7. Нажмите кнопку **«Сохранить»**.

***

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

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

Перейдите в панель управления FastPanel → **«Сайты»** → выберите ваш поддомен Telegram Mini App (например, **tg.**<mark style="color:red;">**ваш\_домен**</mark>) → раздел **«Ручная настройка»** → вкладка **«Frontend».**

<figure><img src="https://4233670011-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLTlg7o2JZCIoPVvMc1rY%2Fuploads%2FZVNcuXUUfsx9XtSbhOc8%2Fimage.png?alt=media&#x26;token=8796bd46-1727-4603-9598-7d2844528582" alt="" width="563"><figcaption></figcaption></figure>

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

### **Шаг 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.

<figure><img src="https://docs.iexexchanger.com/~gitbook/image?url=https%3A%2F%2F1156649716-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FYuqSN6CIJoIeh8EPb0uE%252Fuploads%252FUmKlayA4GlvpKEYt7YLO%252Fimage.png%3Falt%3Dmedia%26token%3D62451366-3687-4f06-a565-766d3be612f1&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=355c4789&#x26;sv=2" alt="" width="563"><figcaption></figcaption></figure>

### **Шаг 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) и отдачи статики.

<mark style="color:red;">**Удалите старую конфигурацию:**</mark>

```
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;
}
```

<mark style="color:green;">**Добавьте вместо этого:**</mark>

```
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;
}
```

{% hint style="info" %}

### Важно! Обязательно замените все указания: <a href="#vazhno-obyazatelno-zamenite-vse-ukazaniya" id="vazhno-obyazatelno-zamenite-vse-ukazaniya"></a>

* /var/www/<mark style="color:red;">**польз**</mark>**ователь**/data/www/app.<mark style="color:red;">**ваш\_домен**</mark>
* /var/run/app.<mark style="color:red;">**ваш\_домен**</mark>.sock

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

[<br>](https://docs.iexexchanger.com/voprosy-i-otvety/infrastruktura/gde-naiti-put-k-proektu-i-imya-polzovatelya)