Как показать заказчику сайт, который открыт только на вашем компьютере

В чём проблема

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

Как это решает DevProxy

Программа DevProxy даёт вашему сайту временный адрес в интернете вида https://demo.ваше-пространство.devtunnels.ru. Заказчик открывает его у себя и видит то же, что и вы. Вы поправили страницу, и он сразу видит изменения после обновления. Закончили показ, закрыли программу, и ссылка перестала работать.

Что понадобится

• Программа DevProxy и ключ доступа с готовым вариантом «Сайт или API». Как их получить, описано в статье «Как начать пользоваться DevProxy».
• Сайт, который уже открывается у вас в браузере.

Шаг 1. Узнайте адрес сайта на своём компьютере

Посмотрите, по какому адресу открывается сайт у вас. Обычно его пишет программа, в которой вы запускаете сайт, например Local: http://localhost:5173/. Число после двоеточия называется портом. Запомните его.

Готовые настройки для популярных инструментов есть в кабинете, в разделе «Шаблоны»: Vite, Next.js, ASP.NET, Django и другие. Там же указан обычный порт каждого.

Шаг 2. Запишите настройки

Откройте файл настроек (как это сделать, написано в общей статье) и замените его содержимое на этот текст:

server: https://control.devtunnels.ru
token: ВАШ_КЛЮЧ
reconnect: true
tunnels:
  - name: demo
    kind: http
    local: http://127.0.0.1:5173

Вместо ВАШ_КЛЮЧ вставьте свой ключ, а вместо 5173 укажите порт своего сайта. Слово demo станет началом адреса. Его можно заменить на своё: латинские строчные буквы, цифры и дефис, например magazin-obuvi.

Сохраните файл.

Шаг 3. Запустите программу

В окне PowerShell или «Терминале» выполните:

devproxy start

Шаг 4. Отправьте ссылку

Откройте в кабинете раздел «Туннели». Рядом с вашим туннелем указан адрес. Кнопка с двумя листками копирует его, кнопка со стрелкой сразу открывает сайт.

Отправьте адрес заказчику. Пока программа на вашем компьютере запущена, сайт у него открывается.

Важно знать

• Ссылку может открыть любой, у кого она есть. Не показывайте так страницы с настоящими данными клиентов, если на сайте нет входа по паролю.
• Ваш компьютер в это время должен быть включён, а программа DevProxy и сам сайт запущены.
• Закончили показ: нажмите Ctrl+C в окне программы или закройте его.
• Каждое открытие сайта расходует трафик тарифа. Для показов обычно хватает бесплатных 5 ГБ в месяц.

Если что-то не получилось

• Вместо сайта сообщение об ошибке соединения. Проверьте, что сайт открывается у вас по адресу http://127.0.0.1:ПОРТ и что порт в файле указан тот же.
• Сообщение «Blocked request. This host is not allowed». Так защищается инструмент разработки Vite: он не узнаёт новый адрес. В файл vite.config добавьте в раздел server строку allowedHosts: ['.devtunnels.ru'] и перезапустите сайт. Похожие настройки есть у Django (ALLOWED_HOSTS) и некоторых других инструментов.
• Страница открывается без оформления. Сайт ссылается на свои файлы по полному адресу localhost. Сделайте адреса файлов относительными или настройте адрес сайта в его конфигурации.