BorisovAI
Все публикации
Новая функцияborisovai-adminClaude Code

Туннели в админ-панели: простая идея, сложная реализация

Туннели в админ-панели: простая идея, сложная реализация

Система туннелей для admin-панели: от идеи к функциональности

Когда работаешь над borisovai-admin — панелью управления инфраструктурой — рано или поздно встречаешься с проблемой удалённого доступа к сервисам. Задача была классической: нужно добавить в админ-панель возможность управления FRP-туннелями (Fast Reverse Proxy). Это скромные 5 шагов, которые, как выяснилось, требовали куда больше внимания к деталям, чем казалось изначально.

Завязка простая. Пользователь должен видеть, какие туннели сейчас активны, какой статус у FRP-сервера, и уметь сгенерировать конфиг для клиентской части. Всё это через красивый интерфейс прямо в админ-панели. Типичный запрос, но именно в таких задачах проявляются все неожиданные подводные камни.

Первым делом обновил навигацию — добавил ссылку “Туннели” во все четыре HTML-файла (index.html, tokens.html, projects.html, dns.html). Казалось бы, мелочь, но когда навигация должна быть идентична на каждой странице, нужно быть аккуратнее: всего одна опечатка — и юзер потеряется. Все ссылки расположены на одинаковых позициях в строках 195–238, что удобно для поддержки.

Потом столкнулся с архитектурой бэкенда. В server.js добавил две вспомогательные функции: readFrpsConfig для чтения конфигурации FRP-сервера и frpsDashboardRequest для безопасного запроса данных к dashboard FRP. Это не просто HTTP-вызовы — это минимальная абстракция, которая упрощает тестирование и повторное использование. Далее идут четыре GET-эндпоинта:

  1. Статус FRP-сервера (жив ли?)
  2. Список активных туннелей с метаинформацией
  3. Текущая конфигурация в JSON
  4. Генерация frpc.toml — клиентского конфига, который можно скачать одной кнопкой

Неожиданно выяснилось — FRP-сервер нужно ещё установить и запустить. Поэтому обновил скрипт install-all.sh: добавил FRP как опциональный компонент установки. Это важно, потому что не все инсталляции нуждаются в туннелях, а если выбрал — получишь полный стек.

На фронте создал новую страницу tunnels.html с тремя блоками:

  • Карточка статуса — простая информация о том, работает ли FRP
  • Список туннелей с авто-обновлением каждые 10 секунд (классический полинг, проще чем WebSocket для такого масштаба)
  • Генератор клиентского конфига — вводишь параметры, видишь готовый frpc.toml

Интересный факт про FRP: это вообще проект из Китая (автор — fatedier), но в экосистеме DevOps он стал де-факто стандартом для туннелирования благодаря простоте и надёжности. Многие не знают, что FRP может работать не только как reverse proxy, но и как VPN, и даже как load balancer — просто конфиг нужен другой.

В итоге получилась полнофункциональная система управления туннелями, интегрированная в админ-панель. Теперь администратор может с одного места видеть всё: какие туннели работают, генерировать конфиги для новых серверов, проверять статус. Документация пошла в CLAUDE.md, чтобы следующий разработчик не переобнаруживал велосипед.

Главный урок: даже в мелких фичах типа “добавить ссылку в навигацию” скрывается целая архитектура. Лучше потратить час на планирование, чем потом переделывать интеграцию FRP.

😄 FRP — это когда твой сервер вдруг получает способность ходить в гости через NAT, как путник с волшебным клаком.

Метаданные

Session ID:
grouped_borisovai-admin_20260208_1521
Branch:
main
Dev Joke
Kafka — как первая любовь: никогда не забудешь, но возвращаться не стоит.

Оцените материал

0/1000