Інструкція з налаштування Ngrok-зворотного проксі-сервісу в ServBay

Ngrok — це потужний інструмент, який дозволяє безпечно відкрити ваш локальний веб-сервіс для публічного доступу в інтернеті. Завдяки інтеграції Ngrok у ServBay ви зможете легко створювати захищені публічні тунелі для локальних сайтів розробки — це ідеально для презентацій проєктів, тестування Webhook-ів чи швидкого спільного перегляду розробки із зовнішніми учасниками команди. У цій інструкції детально описано, як налаштувати та використовувати Ngrok у ServBay для зворотного проксі.

Огляд

ServBay має вбудовану підтримку Ngrok, що значно спрощує інсталяцію і налаштування. Ви можете керувати тунелями Ngrok безпосередньо через графічний інтерфейс ServBay, пов’язуючи будь-який локальний сайт із тимчасовою публічною URL-адресою.

Типові сценарії використання

• Демонстрація для замовника: Показуйте клієнту сайт у розробці, який працює на вашому локальному комп’ютері.
• Розробка Webhook-ів: Тестуйте сторонні сервіси, які вимагають публічної callback-адреси (наприклад, платіжні шлюзи, API).
• Тестування мобільних застосунків: Дозвольте мобільному пристрою отримати доступ до локального backend через публічний тунель.
• Співпраця: Тимчасово діліться локальним середовищем розробки із членами команди.

Передумови

1. Встановлено ServBay: Переконайтеся, що ServBay встановлено й запущено на вашій системі macOS.
2. Аккаунт Ngrok: Вам потрібен акаунт Ngrok. Зареєструйтесь на офіційному сайті Ngrok (безкоштовний чи платний тариф).
3. Локальний сайт: У ServBay має бути доданий хоча б один локальний сайт, наприклад servbay.demo.

Покрокова інструкція

1. Встановіть пакет Ngrok у ServBay

Перед першим використанням Ngrok потрібно його встановити:

1. Відкрийте програму ServBay.
2. У лівій навігаційній панелі виберіть Пакети (Packages).
3. У списку знайдіть або скористайтеся пошуком, щоб знайти Ngrok.
4. Натисніть кнопку встановлення поруч із Ngrok.
5. Після завершення встановлення спробуйте увімкнути перемикач запуску праворуч від Ngrok. Якщо Ngrok ще не налаштовано, запуск може завершитися невдачею або показувати аномальний стан — це нормально, далі йде конфігурація.

2. Отримайте ваш Ngrok Authtoken

Ngrok використовує Authtoken для верифікації акаунта й авторизації роботи сервісу.

1. Перейдіть у Ngrok Dashboard і увійдіть у свій акаунт.

2. У лівій навігації дашборду знайдіть Your Authtoken ("Getting Started" → "Your Authtoken").

3. Скопіюйте Authtoken — це довгий рядок, зберігайте його в безпечному місці.

   

3. Налаштування Ngrok у ServBay

Після отримання Authtoken поверніться до ServBay для налаштування:

1. У лівій панелі оберіть Tunnel.

2. У списку тунельних сервісів оберіть ngrok.

   

3. Auth Token (Токен авторизації):

   • Вставте скопійований Ngrok Authtoken у поле Auth Token.

4. Налаштування тунелю (Local Domain та External Domain): ServBay дозволяє створювати тунелі Ngrok для кількох локальних сайтів.

   • Local Domain (локальний сайт):
     • Відкрийте випадаючий список і оберіть локальний домен для відкриття через Ngrok. Cписок автоматично показує всі додані у ServBay сайти (наприклад, servbay.test або servbay.demo).
   • External Domain (зовнішнє доменне ім’я):
     • Для безкоштовних користувачів Ngrok: Залиште це поле порожнім. Ngrok автоматично згенерує випадкову публічну URL-адресу з доменом типу .ngrok-free.app або іншим доступним. Після успішного запуску тунелю ServBay автоматично відобразить згенерований адресу.
     • Для платних користувачів Ngrok: Якщо у вашому акаунті Ngrok додано власні чи зарезервовані домени, впишіть бажаний зовнішній домен сюди.

5. Додати більше тунелів:

   • Щоб налаштувати тунелі для декількох сайтів, натисніть кнопку + праворуч від наявного тунелю. Повторіть крок 4 для кожного нового тунелю.

6. Збережіть налаштування:

   • Після закінчення конфігурації натисніть Зберегти (Save) у правому нижньому куті.

4. Запуск і перевірка Ngrok

1. Після збереження налаштувань ServBay спробує запустити сервіс Ngrok із новою конфігурацією.
2. Перевірте статус-індикатор поруч із сервісом ngrok. Якщо налаштування коректні, індикатор стане зеленим — сервіс працює.
3. Для кожного успішно створеного тунелю у полі External Domain (якщо залишали порожнім) з’явиться призначена Ngrok публічна URL-адреса.
4. Перевірте доступність:
   • Натисніть іконку копіювання біля зовнішнього домену, щоб швидко скопіювати адресу.
   • Або натисніть значок браузера (зазвичай компас або земна куля), щоб одразу відкрити сайт у браузері.
   • Якщо все налаштовано правильно, ваш локальний сайт буде доступний за отриманим Ngrok URL.

5. Керування тунелями Ngrok

У вікні налаштування Ngrok у ServBay:

• Копіювати зовнішній домен: Натисніть іконку копіювання для зручності обміну посиланням.
• Відкрити в браузері: Натисніть іконку браузера для швидкого тесту.
• Додати тунель: Натисніть +.
• Видалити тунель: Натисніть - для видалення непотрібної конфігурації.
• Зупинити сервіс: Використовуйте перемикач біля ngrok, щоб вимкнути чи увімкнути увесь сервіс.

Важливі зауваження

• Обмеження безкоштовної версії Ngrok: Домени, видані безкоштовною версією Ngrok, змінюються щоразу під час перезапуску сервісу/тунелю. До того ж є ліміти на кількість підключень, швидкість і тривалість роботи. Для постійної URL-адреси і додаткових можливостей розгляньте платні тарифи.
• Стан локального сервісу: Сайт, обраний у Local Domain, мусить стабільно працювати в ServBay (PHP, Nginx/Apache тощо повинні бути ввімкнені й налаштовані; Ngrok лише перенаправляє трафік і не може самостійно запускати чи лагодити сайти).
• Фаєрвол: Переконайтеся, що вбудований фаєрвол macOS або сторонній захист не блокує з’єднання ServBay або Ngrok з мережею.
• HTTPS: Ngrok автоматично підтримує HTTPS для тунелів, що дуже корисно при сучасній веб-розробці й тестуванні.

Поширені питання (FAQ)

• Q: Ngrok не запускається, статус-індикатор червоний або помаранчевий. Як вирішити?
  • A: Спершу перевірте, чи правильно введено Ngrok Authtoken. Переконайтеся в наявності інтернету й доступності сайту Ngrok. Для діагностики використовуйте логи сервісу (іконка log праворуч у панелі керування).
• Q: Я користуюся безкоштовною версією Ngrok, чому поле External Domain порожнє або там написано “Leave blank if you're a free user”?
  • A: Це нормально. Для безкоштовних акаунтів це поле заповнювати не потрібно. Після старту тунелю ServBay автоматично підхопить і покаже призначену випадкову адресу.
• Q: Чи можна одночасно користуватися Ngrok та іншими тунельними сервісами (наприклад, frp, Cloudflared)?
  • A: У ServBay можна встановити й налаштувати кілька сервісів тунелювання. Ви можете обрати той, що підходить, а за необхідності активувати одразу кілька. Однак паралельна робота кількох тунелів для одного й того ж локального сайту може ускладнити налаштування чи спричинити конфлікти — дійте обережно і контролюйте маршрутизацію.

Висновок

Інтеграція Ngrok у ServBay значно спрощує відкриття локального середовища розробки на macOS для роботи з інтернетом. Це ідеальне рішення для швидких презентацій, тестування Webhook-ів або спільної розробки. Пам’ятайте про правильне налаштування зовнішнього домену відповідно до вашого тарифу Ngrok (безкоштовний чи платний) і слідкуйте за стабільністю роботі локальних сервісів.