Всем ngrok

Всем ngrok

@iksergeyru

Сделать из локальной машины полноценный сервер для демонстрации проектов просто.

Шаг 0. Для начала потребуется приложение, которое будем "вывешивать" в публичный доступ. Создадим его.

Для демонстрации использую .net, в терминале VSCode

dotnet new mvc

После создания проекта запустим его локально

dotnet run

В терминале будет что-то вроде

 i@ksergeyru ~/webapp dotnet run   
Building...
info: Microsoft.Hosting.Lifetime[14]
   Now listening on: https://localhost:7012
info: Microsoft.Hosting.Lifetime[14]
   Now listening on: http://localhost:5255
info: Microsoft.Hosting.Lifetime[0]
   Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
   Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]

Переходим на https://localhost:7012 , должна отобразиться страница

Стартовая страница проекта

Шаг 1. Теперь воспользуемся утилитой ngrok

Переходим на https://ngrok.com/ создаём аккаунт


Шаг 2. После подтверждения регистрации, заходим в личный кабинет и скачиваем приложение для своей операционной системы

Распаковываем архив в папку, у меня /Users/i/folder/ т е полный путь к утилите /Users/i/folder/ngrok

Шаг 3. В личном кабинете на сайте переходим в раздел Your Authtoken

Your Authtoken

Копируем токен

Шаг 4. Открываем любой терминал (cmd, powershell, zsh ...), выполняем

/Users/i/folder/ngrok http https://localhost:7012 --authtoken ${Authtoken из шага 3}$

При успешном выполнении, будет выдан публичный адрес для доступа

Результат

Теперь локальный https://localhost:7012/ доступен по публичному https://bd11-178-219-46-0.eu.ngrok.io

В терминале будет отображаться история запросов

История запросов


Верстальщикам эта утилита подойдёт. С плагином Live Server для VSCode всё прекрасно работает

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>Привет, ngrok!</h1>
</body>

</html> 
Локально
ngrok
С подручного девайса


Благодарю за внимание

Report Page