Skip to main content

Шаг 1. Настройка backend бота

В .env файле бота добавьте:
# Включить Cabinet API
CABINET_ENABLED=true

# JWT секрет (сгенерируйте: openssl rand -hex 32)
CABINET_JWT_SECRET=your_random_secret_key_here

# Домен кабинета для CORS
CABINET_ALLOWED_ORIGINS=https://cabinet.example.com
Перезапустите бота:
make reload

Шаг 2. Получение frontend файлов

Вариант A: Docker образ (рекомендуется)

docker pull ghcr.io/bedolaga-dev/bedolaga-cabinet:latest

# Извлечь статику
docker create --name tmp_cabinet ghcr.io/bedolaga-dev/bedolaga-cabinet:latest
docker cp tmp_cabinet:/usr/share/nginx/html ./cabinet-dist
docker rm tmp_cabinet

Вариант B: Сборка из исходников (через Docker)

git clone https://github.com/BEDOLAGA-DEV/bedolaga-cabinet.git
cd bedolaga-cabinet
cp .env.example .env
Отредактируйте .env:
VITE_API_URL=/api
VITE_TELEGRAM_BOT_USERNAME=your_bot_username
VITE_APP_NAME=My VPN
VITE_APP_LOGO=V
Соберите и извлеките:
docker compose build
docker create --name tmp_cabinet cabinet_frontend
docker cp tmp_cabinet:/usr/share/nginx/html ./cabinet-dist
docker rm tmp_cabinet

Вариант C: Сборка без Docker (через npm)

Установите Node.js через NVM:
# Установка NVM
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
source ~/.bashrc

# Установка Node.js LTS
nvm install --lts
Соберите проект:
git clone https://github.com/BEDOLAGA-DEV/bedolaga-cabinet.git
cd bedolaga-cabinet
cp .env.example .env
# Отредактируйте .env (VITE_API_URL, VITE_TELEGRAM_BOT_USERNAME и т.д.)

npm install
npm run build
Собранные файлы будут в dist/. Скопируйте их на сервер:
sudo mkdir -p /srv/cabinet
sudo cp -r ./dist/* /srv/cabinet/

Шаг 3. Размещение файлов на сервере

# Создайте директорию
sudo mkdir -p /srv/cabinet

# Скопируйте файлы
sudo cp -r ./cabinet-dist/* /srv/cabinet/

Шаг 4. Настройка обратного прокси

Подробная настройка — в разделе Настройка прокси.

Шаг 5. Запуск и проверка

# Перезагрузите Caddy
docker exec <caddy_container> caddy reload --config /etc/caddy/Caddyfile

# Или Nginx
docker exec <nginx_container> nginx -s reload
Откройте https://cabinet.example.com в браузере. Вы должны увидеть экран авторизации через Telegram.

Альтернативная установка: Docker контейнер

Если не хотите раздавать статику напрямую, можно проксировать запросы на Docker контейнер cabinet.

docker-compose.yml

docker-compose.yml
services:
  cabinet-frontend:
    image: ghcr.io/bedolaga-dev/bedolaga-cabinet:latest
    container_name: cabinet_frontend
    restart: unless-stopped
    networks:
      - bot_network

networks:
  bot_network:
    external: true
    name: remnawave-bedolaga-telegram-bot_bot_network

Caddyfile

Caddyfile
https://cabinet.example.com {
    encode gzip zstd

    # API запросы → backend бота
    handle /api/* {
        uri strip_prefix /api
        reverse_proxy remnawave_bot:8080
    }

    # Frontend → nginx контейнер (порт 80 внутри Docker сети)
    handle {
        reverse_proxy cabinet_frontend:80
    }
}
В этом варианте кэшированием статики занимается nginx внутри контейнера.

Устранение проблем

CORS ошибка в консоли браузера

Домен кабинета не добавлен в CABINET_ALLOWED_ORIGINS в .env бота. Добавьте и перезапустите.

API возвращает HTML вместо JSON

Прокси настроен неправильно — запросы /api/* попадают на frontend вместо backend. Проверьте порядок блоков handle в Caddyfile (API должен быть первым).

502 Bad Gateway

  1. Backend бота не запущен — проверьте docker ps
  2. Контейнеры в разных Docker сетях:
    # Проверить сети контейнера
    docker inspect <container> --format='{{json .NetworkSettings.Networks}}' | python3 -m json.tool
    
    # Подключить к нужной сети
    docker network connect <network_name> <container_name>
    
  3. Неправильное имя сервиса:
    docker exec <caddy_container> wget -qO- http://remnawave_bot:8080/health
    

Telegram авторизация не работает

  1. VITE_TELEGRAM_BOT_USERNAME должен быть без @
  2. Домен кабинета добавлен в BotFather → Bot Settings → Domain

Белый экран / SPA не работает

Прокси не настроен на fallback к index.html. Убедитесь что try_files {path} /index.html (Caddy) или try_files $uri /index.html (Nginx) присутствует.

Белый экран, ошибка входа или бесконечная загрузка

Если кабинет не загружается, показывает ошибку авторизации или зависает — скорее всего протухла сессия. Telegram запомнил старые данные входа и пытается их использовать. Нужно очистить кэш WebView. Android:
  1. Telegram → Настройки (меню слева)
  2. Пролистайте в самый низ до номера версии
  3. Зажмите палец на версии на пару секунд → отпустите (появится смайлик)
  4. Зажмите на версии ещё раз → откроется Debug Menu
  5. Нажмите «Clear WebView cache»
  6. Вернитесь в бот
iPhone / iPad:
  1. Telegram → вкладка «Настройки» (внизу справа)
  2. Быстро тапните по иконке настроек 10 раз подряд (за 2-3 секунды)
  3. Откроется Debug Menu
  4. Нажмите «Clear WebView cache»
  5. Вернитесь в бот
Telegram Desktop (Windows / Linux):
  1. Настройки → Продвинутые настройки
  2. Внизу нажмите «Experimental settings»
  3. Очистите данные WebView
  4. Перезапустите бот
Telegram для macOS (из App Store):
  1. Быстро кликните 5 раз по иконке «Настройки» внизу
  2. Откроется Debug Menu
  3. Нажмите «Clear WebView cache»
  4. Перезайдите в бот
«Telegram для macOS» из App Store и «Telegram Desktop» с сайта — разные приложения. Для версии с сайта используйте инструкцию для Desktop.
Если не помогло:
  1. Полностью закройте Telegram (не сверните, а именно закройте) и откройте заново
  2. Удалите чат с ботом и запустите заново через /start
  3. Если ничего не помогает — переустановите Telegram. Все чаты, подписки и контакты хранятся в облаке и никуда не денутся