Как показать локальный проект клиенту без деплоя

Проблема: деплой ради одной демонстрации

Вы работаете над проектом, клиент хочет посмотреть прогресс, нужно срочно показать результат. Локально всё работает, но клиент не может открыть ваш localhost:3000. И начинается: настроить CI/CD, подождать сборку, разобраться с конфигурацией staging-сервера, поправить переменные окружения, заново проверить, что ничего не сломалось при деплое. От 20 минут до нескольких часов – впустую.

Для фрилансеров ситуация ещё хуже: выделенный staging-сервер — это дополнительные расходы, которые не всегда оправданы. А развернуть проект на бесплатном хостинге — значит потратить время на адаптацию конфигурации и ограничения платформы.

Всё это ради одной демонстрации, которая длится 15 минут.

Решение: туннель = публичный URL за 30 секунд

Localhost-туннель делает ваш локальный сервер доступным по публичному HTTPS-адресу одной командой. Никакого деплоя, CI/CD и staging-серверов. fxTunnel создаёт зашифрованное соединение между вашим компьютером и публичным сервером, который выдаёт URL вида https://abc123.fxtun.dev. Клиент открывает ссылку в браузере и видит ровно то, что у вас на экране.

Как это работает:

1. Вы запускаете fxtunnel http 3000 в терминале.
2. fxTunnel устанавливает зашифрованное соединение с публичным сервером.
3. Сервер выдаёт публичный HTTPS-адрес.
4. Все запросы на этот адрес перенаправляются на ваш localhost:3000.

Пошаговый гайд: демонстрация с fxTunnel

Установка

# Быстрая установка (Linux/macOS)
curl -fsSL https://fxtun.dev/install.sh | bash

# Или через go install
go install github.com/mephistofox/fxtun.dev/cmd/fxtunnel@latest

# Проверяем
fxtunnel --version

Фронтенд: React, Vue, Next.js на порту 3000

Большинство фронтенд-фреймворков запускают dev-сервер на порту 3000. Откройте туннель к этому порту — и клиент увидит ваше приложение в браузере.

# Запускаем React / Vue / Next.js
npm run dev
# → Local: http://localhost:3000

# В соседнем терминале — открываем туннель
fxtunnel http 3000

Результат:

fxTunnel v1.x — tunnel is active
Public URL:  https://d7f2a.fxtun.dev
Forwarding:  https://d7f2a.fxtun.dev → http://localhost:3000

Press Ctrl+C to stop

Отправляете https://d7f2a.fxtun.dev клиенту — он открывает ссылку и видит ваше приложение. Hot reload продолжает работать: вы вносите изменения в код, клиент обновляет страницу и видит результат.

Nuxt.js на порту 3000

npx nuxi dev
# → Local: http://localhost:3000

fxtunnel http 3000

Vite на кастомном порту

npx vite --port 5173
# → Local: http://localhost:5173

fxtunnel http 5173

Бэкенд API: Express на порту 8000

Если вы демонстрируете API (например, клиенту-разработчику или фронтенд-команде), откройте туннель к порту API-сервера.

# Express-сервер
node server.js
# → Listening on port 8000

fxtunnel http 8000

Клиент может протестировать API через браузер, Postman или curl:

curl https://d7f2a.fxtun.dev/api/users

Бэкенд API: FastAPI на порту 8000

# FastAPI с uvicorn
uvicorn main:app --reload --port 8000
# → Uvicorn running on http://127.0.0.1:8000

fxtunnel http 8000

FastAPI автоматически генерирует Swagger UI. Клиент может открыть https://d7f2a.fxtun.dev/docs и интерактивно протестировать каждый эндпоинт.

Фулстек: фронтенд + API через один туннель

Если ваш фронтенд и API работают на разных портах, есть два подхода.

Подход 1: Два туннеля

# Терминал 1 — фронтенд
fxtunnel http 3000
# → https://front-abc.fxtun.dev

# Терминал 2 — API
fxtunnel http 8000
# → https://api-xyz.fxtun.dev

Обновите конфигурацию фронтенда, чтобы API-запросы шли на URL второго туннеля. Для React это переменная окружения REACT_APP_API_URL.

Подход 2: Один туннель через прокси

Настройте проксирование API-запросов через dev-сервер фронтенда. Тогда достаточно одного туннеля.

React (package.json):

{
  "proxy": "http://localhost:8000"
}

Vue (vite.config.js):

export default defineConfig({
  server: {
    proxy: {
      '/api': 'http://localhost:8000'
    }
  }
})

Next.js (next.config.js):

module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'http://localhost:8000/api/:path*',
      },
    ]
  },
}

Теперь один туннель к порту 3000 покрывает и фронтенд, и API:

fxtunnel http 3000
# → https://demo-abc.fxtun.dev — фронтенд + API через прокси

Советы для профессиональных демонстраций

Кастомный домен

Ссылка https://abc123.fxtun.dev работает, но https://demo.yourcompany.com выглядит профессиональнее. Кастомные домены доступны в fxTunnel от $5/мес.

fxtunnel http 3000 --domain demo.yourcompany.com

Клиент видит знакомый домен, а не случайный набор символов. Это особенно важно при работе с крупными заказчиками.

Стабильный URL

В fxTunnel SaaS URL остаётся постоянным даже на бесплатном тарифе. Вы можете отправить ссылку клиенту утром, перезапустить туннель в обед и продолжить демонстрацию вечером — адрес не изменится.

HTTPS из коробки

Каждый туннель fxTunnel получает HTTPS-сертификат автоматически. Клиенту не нужно игнорировать предупреждения браузера о небезопасном соединении. Это критично для демонстрации приложений, которые используют API геолокации, камеру, микрофон или Service Workers — браузеры требуют HTTPS для этих функций. Почему это важно и как работает – в «HTTPS на localhost».

Для фрилансеров: впечатляйте клиентов без staging-серверов

Если вы фрилансер, туннель меняет правила игры. Вот типичный сценарий:

1. Клиент пишет: «Покажите, что сделано».
2. Вы запускаете fxtunnel http 3000 — 5 секунд.
3. Отправляете ссылку в чат.
4. Клиент открывает и видит результат. Вы обсуждаете правки в реальном времени.
5. Вносите изменение в код — клиент обновляет страницу и видит обновление.

Никаких дополнительных расходов на хостинг. Никакого времени на деплой. Клиент получает мгновенный доступ к актуальной версии проекта.

С кастомным доменом (от $5/мес) демонстрация выглядит ещё солиднее. Вместо https://random.fxtun.dev клиент видит https://preview.yourname.dev — это создаёт впечатление отлаженного рабочего процесса.

Демо-чеклист для фрилансера

• Запустите проект локально и убедитесь, что всё работает.
• Используйте тестовые данные, а не реальные данные клиента.
• Откройте туннель и проверьте URL в другом браузере.
• Отправьте ссылку клиенту с кратким описанием того, что смотреть.
• После демонстрации закройте туннель (Ctrl+C).

Для команд: быстрая обратная связь в процессе разработки

В командной разработке туннели ускоряют цикл обратной связи. Несколько сценариев:

Ревью дизайна

Дизайнер хочет посмотреть, как выглядит реализация макета. Вместо деплоя на staging — откройте туннель и скиньте ссылку в Slack.

fxtunnel http 3000
# Вставляете URL в Slack: "Посмотри реализацию макета: https://d7f2a.fxtun.dev"

Интеграция микросервисов

Бэкенд-разработчик обновил API. Фронтенд-разработчик хочет протестировать интеграцию до мерджа. Бэкендер открывает туннель к своему API, фронтендер подключается по публичному URL.

# Бэкенд-разработчик
fxtunnel http 8000
# → https://api-review.fxtun.dev

# Фронтенд-разработчик меняет API_URL в .env
# REACT_APP_API_URL=https://api-review.fxtun.dev

QA-тестирование

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

Безопасность: на что обратить внимание при демонстрациях

Туннель открывает ваш локальный сервер в интернет, поэтому относитесь к нему так же, как к любому публичному сервису. Больше про безопасность туннелей – в «Как открыть localhost».

Основные правила

• Закрывайте туннель после демонстрации. Нажмите Ctrl+C, когда закончили. Не оставляйте его на ночь.
• Используйте тестовые данные. Не демонстрируйте проект с реальной базой данных клиента. Заполните БД тестовыми записями.
• Не храните секреты в коде. Проверьте, что API-ключи и пароли не захардкожены — используйте переменные окружения.
• Не открывайте admin-панели. Если демонстрируете пользовательскую часть — убедитесь, что /admin или /dashboard защищены авторизацией.

Что не стоит делать

Дополнительная защита

Если демонстрация длится несколько дней (например, клиент тестирует самостоятельно), используйте дополнительные меры:

# Кастомный домен + HTTPS (от $5/мес)
fxtunnel http 3000 --domain preview.yoursite.com

Также полезно добавить базовую HTTP-авторизацию на уровне приложения или reverse proxy, чтобы ограничить доступ только клиенту.

Сравнение: туннель vs другие способы демонстрации

Туннель выигрывает, когда клиенту нужен самостоятельный доступ к актуальной версии проекта без ожидания деплоя. Если вы выбираете между конкретными инструментами, загляните в «Бесплатные альтернативы ngrok».

FAQ

Как показать локальный сайт клиенту без деплоя?

Запустите fxtunnel http 3000 в терминале. Через пару секунд появится публичный HTTPS-адрес, например https://abc123.fxtun.dev. Отправьте ссылку клиенту – он откроет её в браузере и увидит работающее приложение. Серверы, DNS и прочая настройка не нужны.

Безопасно ли делиться localhost через туннель?

Да, если подходить с головой. Трафик идёт через TLS. Работайте на тестовых данных, закрывайте туннель после демо (Ctrl+C), не оставляйте открытым на ночь. Если доступ нужен надолго – добавьте ограничение по IP или базовую HTTP-авторизацию.

Можно ли демонстрировать фронтенд и бэкенд одновременно?

Конечно. Можно открыть два туннеля: fxtunnel http 3000 для фронтенда и fxtunnel http 8000 для API. А если настроить прокси на dev-сервере (например, поле proxy в package.json для React), хватит одного туннеля на порт 3000.

URL меняется при перезапуске туннеля?

В fxTunnel SaaS – нет, адрес сохраняется между перезапусками даже на бесплатном плане. С кастомным доменом (от $5/мес) адрес полностью ваш, например demo.yoursite.com. Ссылка у клиента остаётся рабочей.

Подходит ли туннель для демонстрации мобильного приложения?

Да. Если мобильное приложение ходит в локальный API, откройте туннель к порту этого API и замените localhost на URL туннеля в конфиге. Устройство сможет достучаться до API из любой сети, а не только из одного Wi-Fi.