Vite через HTTPS-туннель: allowedHosts, Blocked request и HMR

Чтобы показать Vite-приложение через HTTPS-туннель, пробросьте его порт, разрешите конкретное публичное имя в server.allowedHosts и проверьте WebSocket для HMR. Одна SSH-команда даёт адрес, но не отменяет проверку Host внутри dev-сервера.

Инструкция подходит для React и Vue на Vite. Для запуска проекта внутри Telegram дополнительно прочитайте руководство по Mini App; для обычной демонстрации бота не нужно.

1. Запустите Vite на фиксированном порту

В существующем проекте используйте его зависимости. Для отдельной проверки создайте минимальное приложение:

npm create vite@latest vite-tunnel-demo -- --template react
cd vite-tunnel-demo
npm install

Для Vue замените react на vue. Требования к Node проверьте в документации вашей версии Vite. Сохраните вывод node --version и npm ls vite, чтобы при повторной проверке знать версии.

Во втором терминале создайте туннель:

ssh -R 80:127.0.0.1:5173 -p 2222 tunnelhunt.ru

Скопируйте имя выданного домена без https:// и пути. Пока Vite не запущен, 502 ожидаем: туннель ещё не может подключиться к порту.

2. Настройте allowedHosts и HMR

В первом терминале:

export TUNNEL_HOST='YOUR-SUBDOMAIN.tunnelhunt.ru'

В PowerShell: $env:TUNNEL_HOST = 'YOUR-SUBDOMAIN.tunnelhunt.ru'.

Для React сохраните vite.config.js (или перенесите server в существующий vite.config.ts):

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

const tunnelHost = process.env.TUNNEL_HOST;
if (tunnelHost && !/^[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.tunnelhunt\.ru$/.test(tunnelHost)) {
  throw new Error('TUNNEL_HOST must be a hostname under tunnelhunt.ru');
}

export default defineConfig({
  plugins: [react()],
  server: {
    host: '127.0.0.1',
    port: 5173,
    strictPort: true,
    allowedHosts: tunnelHost ? [tunnelHost] : [],
    hmr: tunnelHost ? {
      protocol: 'wss',
      host: tunnelHost,
      clientPort: 443,
    } : undefined,
  },
});

Для Vue используйте import vue from '@vitejs/plugin-vue' и plugins: [vue()]; настройки сервера те же. Сохраните остальные плагины своего проекта.

Запустите npm run dev. strictPort не даст Vite незаметно перейти на 5174, пока SSH продолжает пробрасывать 5173. Сервер слушает loopback: открывать dev-порт в домашней сети не требуется.

allowedHosts содержит только имя вашего туннеля. Не ставьте true и не разрешайте весь .tunnelhunt.ru: на соседних поддоменах могут быть чужие приложения. Безусловное разрешение Host ослабляет защиту от DNS rebinding. Правила allowedHosts.

3. Проверьте страницу с другого устройства

Откройте https://YOUR-SUBDOMAIN.tunnelhunt.ru с телефона через мобильную сеть. Ожидается интерфейс приложения, а не 502 и не сообщение Blocked request. This host is not allowed.

Если Host заблокирован, сравните имя в браузере и переменную TUNNEL_HOST, затем полностью перезапустите Vite. Изменение переменной в другом терминале не меняет окружение уже запущенного процесса.

Проверьте внутренние ссылки: в браузере пользователя не должно быть переходов на http://localhost:5173. Его localhost — это его устройство, а не ваш компьютер.

4. Проверьте обновление без перезагрузки

В браузере откройте DevTools → Network → WS. Соединение Vite должно идти на wss://YOUR-SUBDOMAIN.tunnelhunt.ru через публичный порт 443 и получать HTTP 101. Локальный Vite может оставаться HTTP: TLS завершается на стороне публичного туннеля.

Измените текст в src/App.jsx (Vue: src/App.vue) и сохраните файл. Открытая публичная страница должна обновиться. Если только первый HTML открывается, HMR ещё не проверен.

Симптом	Что проверить
Blocked request	Точный allowedHosts, hostname без схемы и пути, перезапуск Vite
502	Dev-сервер и SSH запущены; порт 5173 свободен и совпадает с -R
Страница открывается, HMR нет	WS-запрос и 101; wss, host, clientPort: 443
WS пытается подключиться к localhost	В браузер попала локальная конфигурация HMR; перезапустите процесс с TUNNEL_HOST
Ошибка mixed content	Из HTTPS-страницы используется http:// или ws://
После нового туннеля опять 403	Имя сменилось; обновите TUNNEL_HOST и перезапустите Vite

Vite допускает прямое резервное подключение WebSocket при проблемах прокси. В удалённом браузере локальный адрес обычно недоступен, поэтому ориентируйтесь на успешное соединение именно через публичное имя. См. настройки HMR.

5. Подключите локальный API через тот же origin

Если frontend обращается к http://localhost:8000, запрос с телефона уйдёт на телефон. Удобнее отправлять относительный /api/..., а dev-серверу поручить проксирование на ваш backend.

Добавьте в server существующей конфигурации:

proxy: {
  '/api': {
    target: 'http://127.0.0.1:8000',
    changeOrigin: true,
  },
},

Для минимальной проверки можно создать api.mjs и запустить node api.mjs в третьем терминале:

import { createServer } from 'node:http';

createServer((req, res) => {
  if (req.url !== '/api/health') {
    res.writeHead(404);
    return res.end();
  }
  res.writeHead(200, { 'Content-Type': 'application/json' });
  res.end(JSON.stringify({ ok: true }));
}).listen(8000, '127.0.0.1');

Откройте https://YOUR-SUBDOMAIN.tunnelhunt.ru/api/health: ожидается {"ok":true}. Из frontend используйте fetch('/api/health'). Браузер видит один origin; правило CORS для прямого обращения к другому серверу в этом сценарии не требуется. Путь /api/health здесь сохраняется при проксировании — backend должен обслуживать именно его. Proxy Vite.

Правило открывает соответствующие маршруты backend через публичный адрес. Выбирайте только необходимые dev-маршруты и тестовые данные; туннель не заменяет авторизацию самого API.

Для повторяющихся демонстраций

Закреплённый поддомен Pro избавляет от смены имени в TUNNEL_HOST, ссылках и настройках интеграций. Он не делает выключенный компьютер доступным. Для показа без dev-функций соберите приложение и используйте выбранный вами сервер предпросмотра; vite preview требует отдельной настройки своего порта и Host, конфигурация dev-сервера не полностью переносится автоматически.

Общий выбор стека разобран в React/Vue/Angular, а ошибки SSH и проверка публичного адреса — в инструкции localhost.