Додавання Вашого Першого Вебсайту

У ServBay додати новий сайт для запуску локального проєкту дуже просто та інтуїтивно зрозуміло. У цій інструкції ви знайдете детальний опис, як додати свій перший сайт у ServBay: від кроків додавання до вибору важливих параметрів і корисних порад.

Незалежно від того, розробляєте ви PHP, Node.js, статичний сайт чи налаштовуєте реверс-проксі або редірект — ServBay запропонує універсальні можливості.

Огляд

ServBay створено для веброзробників, як потужне й легке у керуванні локальне середовище. Дружній графічний інтерфейс (GUI) дозволяє швидко додавати, налаштовувати та керувати багатьма локальними сайтами. Виконайте ці кроки й за декілька хвилин створите та налаштуєте свій перший сайт під індивідуальні проєктні потреби.

Передумови

Перед стартом додавання сайту, переконайтесь, що:

• Ви успішно встановили та запустили застосунок ServBay на macOS.

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

Ось детальні кроки для створення нового сайту через GUI ServBay:

Крок 1: Відкрийте додаток ServBay

У папці “Програми” вашого macOS знайдіть іконку ServBay та двічі клікніть для запуску програми.

Крок 2: Перейдіть до керування сайтами

Після запуску додатку відкриється основний інтерфейс. Зліва в меню навігації натисніть опцію Сайти. Вас буде перенаправлено на сторінку управління сайтами в ServBay.

Крок 3: Почніть додавання нового сайту

На сторінці керування сайтами знайдіть і натисніть + у нижньому лівому куті. На правій стороні з’явиться форма для внесення параметрів нового сайту.

Крок 4: Налаштуйте параметри сайту

В новій формі конфігурації сайту вам потрібно вказати або вибрати такі основні дані:

1. Назва: Задайте зручну назву для вашого локального сайту — це лише для ідентифікації між сайтами всередині ServBay.
2. Домен: Введіть домен для локального доступу. Щоб уникнути конфліктів із реальними доменами, наполегливо рекомендуємо використовувати .demo або інші TLD, запропоновані ServBay (наприклад, servbay.demo або myproject.servbay.demo). ServBay автоматично налаштує локальний DNS, і ви зможете ввести цей домен у браузері.
3. Протокол: Виберіть підтримуваний протокол. Зазвичай встановлюється HTTP/HTTPS за замовчуванням, і ServBay самостійно згенерує необхідні налаштування HTTPS.
4. Запит на SSL-сертифікат: Налаштуйте SSL/TLS для локального сайту.
   • ServBay CA: Рекомендовано для розробки. ServBay автоматом створює та керує SSL-сертифікатом, підписаним внутрішнім кореневим центром (ServBay PKI). Все, що потрібно ― довірити кореневий сертифікат (ServBay User CA або ServBay Public CA) у вашій системі, після чого браузер дозволить доступ по HTTPS без попереджень.
   • ACME: Для імітації production-оточення можна використати протокол ACME (наприклад, Let's Encrypt, ZeroSSL, Google Trust Services). Якщо домен доступний зовнішньо та вказує на вашу машину з ServBay, буде випущено справжній публічний сертифікат і автоматично здійснюватися продовження.
5. Тип сайту: Оберіть відповідний тип залежно від застосованих технологій:
   • PHP: Для PHP-проєктів — WordPress, Laravel, Symfony тощо. ServBay налаштує вебсервер (Nginx або Apache) з PHP-FPM для обробки PHP-запитів.
   • Node.js: Для Node.js застосунків. ServBay зазвичай налаштовує реверс-проксі, який перенаправляє трафік на порт Node.js.
   • Статичний: Для сайтів, що складаються з HTML, CSS, JavaScript та інших статичних файлів. Запити обслуговує сервер напряму.
   • Реверс-проксі: Перенаправляє домен/путь на іншу локальну чи зовнішню адресу — зручно для проксирування сторонніх сервісів.
   • Редірект: Усі запити на цей домен скеровуються на інший URL.
6. Версія PHP: При виборі типу “PHP” із випадаючого списку виберіть встановлену PHP-версію для виконання скриптів. Переконайтесь, що бажану версію PHP встановлено через менеджер пакунків ServBay.
7. URL-правила rewrite (чпу/псевдостатичні): Більшість сучасних фреймворків/СMS (наприклад, Laravel, WordPress, Discuz!) потребують правил rewrite для красивих адрес типу /about замість /index.php?page=about. ServBay має типові пресети для популярних систем — просто оберіть потрібну опцію. Якщо ваша система відсутня в списку або потрібні особливі правила, можливо, доведеться відредагувати конфігурацію вебсерверу (Nginx або Apache) власноруч.
8. Коренева директорія: Вкажіть фізичний шлях до каталогу з файлами сайту. Це папка, з якої сервер надаватиме файли у відповідь на запити. Рекомендується зберігати проєкти у директорії ServBay за замовчуванням, наприклад /Applications/ServBay/www/servbay-demo. Перевірте, що дана директорія існує й процес ServBay має доступ для читання.

WARNING

Для фреймворків (наприклад, Laravel) кореневу папку потрібно вказувати на public (де міститься index.php), а не на корінь проєкту!

Крок 5: Збережіть і активуйте сайт

Після заповнення всіх полів перевірте правильність даних і натисніть кнопку Додати внизу форми. ServBay створить і застосує конфігурацію для нового сайту на вибраному вебсервері (Nginx або Apache), а також оновить локальний DNS.

Після успішного збереження новий сайт з’явиться у списку. Натиснувши іконку браузера справа вгорі, ви відразу перейдете на свій сайт.

Крок 6: Використовуйте швидкі дії для управління

Для кожного сайту у списку ServBay доступні зручні швидкі кнопки для управління і щоденної роботи:

1. Відкрити в IDE: Миттєво відкрийте root-директорію сайту у налаштованому редакторі коду/IDE.
2. Відкрити в браузері: Перейдіть за URL сайту у вашому стандартному веб-браузері.
3. Перегляд журналів сайту: Швидкий доступ до логів доступу й помилок для діагностики.
4. Пауза/старт сайту: Тимчасово вимикайте або вмикайте доступ до сайту.
5. Видалити сайт: Видаляє сайт із конфігурації ServBay (реальні файли не будуть стерті).

Простий приклад: створення статичного HTML сайту

Щоб переконатися, що перший сайт додано правильно, виконайте такий простий тест:

1. Додайте сайт за попередньою інструкцією, наприклад із доменом servbay.demo, тип — Статичний, коренева папка — /Applications/ServBay/www/servbay-demo-static.

2. Створіть цю директорію у файловій системі: /Applications/ServBay/www/servbay-demo-static.

3. Додайте в неї файл під назвою index.html.

4. Відкрийте index.html у текстовому редакторі, вставте такий HTML-код:

   <!DOCTYPE html>
   <html>
   <head>
       <title>ServBay Static Test</title>
   </head>
   <body>
       <h1>Вітаємо! Ваш перший сайт на ServBay працює!</h1>
       <p>Якщо ви бачите цю сторінку, значить ServBay успішно налаштував та запустив ваш статичний сайт.</p>
   </body>
   </html>

5. Збережіть файл index.html.

6. Поверніться у керування сайтами ServBay, знайдіть сайт servbay.demo й натисніть браузерну іконку для переходу.

7. У браузері відкриється http://servbay.demo (або https://servbay.demo згідно з вашим SSL), і відобразиться ваш файл index.html.

Примітки

• Конфлікт доменів: Не використовуйте домени, які можуть конфліктувати із локальною мережею чи VPN. .demo — безпечний вибір.
• Доступ до кореневої папки: Переконайтесь, що користувач, під яким працює ServBay, має права читання вказаної root-директорії та її дочірніх файлів.
• Зайняті порти: ServBay використовує типові порти (HTTP 80, HTTPS 443). Якщо ці порти зайняті іншими програмами, сервер може не запускатись або сайт буде недоступний. Вимкніть програму, яка використовує потрібний порт.
• Довіра до ServBay CA: Якщо ви використовуєте ServBay CA для HTTPS, потрібно добавити ServBay User CA або ServBay Public CA до довірених у macOS. Зазвичай покрокові інструкції можна знайти у документації ServBay.

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

• Q: Чому мій сайт показує HTTP Error 403 - Forbidden або HTTP Error 404 - File not found?
  • A: Це найпоширеніша помилка під час розробки.
  • Насамперед перевірте, чи правильно задано кореневу директорію сайту. У сучасних фреймворках (Laravel, Symfony, CakePHP тощо) з міркувань безпеки і структури проєкту коріння проєкту (де розміщені vendor, composer.json, package.json тощо) не є коренем сайту або точкою входу.
  • Вказуйте root-директорію сайту так, аби вона містила реальний файл запуску (index.php, index.htm, index.html).
  • Типові директориї для входу: public, web, www, htdocs, wwwroot, webroot тощо.
• Q: Додав сайт, але при переході на домен в браузері з'являється “Не вдалося отримати доступ” чи “З'єднання відхилено”?
  • A: Перевірте, що ServBay запущено й вебсервер (Caddy/Nginx/Apache) працює (див. головний екран).
  • Переконайтесь, що у браузері зазначено той самий домен, котрий був вказаний у налаштуваннях ServBay.
  • Перевірте у списку сайтів, чи сайт у стані “запущено” (а не “на паузі”).
  • Переконайтеся, що коренева папка вказана вірно й у ній присутній файл входу (наприклад, index.html, index.php).
  • Перевірте, чи жодна інша програма не зайняла порти 80 або 443.
• Q: Мій PHP-сайт працює некоректно, з’являється порожня сторінка або файл завантажується?
  • A: Переконайтеся, що у конфігурації сайту вибрано правильну версію PHP і вона встановлена та запущена через ServBay.
  • Перевірте права на файли у кореневій папці сайту.
  • Перегляньте логи сайту (доступні через іконку швидких дій) — чи є там PHP-помилки.
  • Переконайтеся, що проєкт містить файл index.php або інший, визначений як основний у налаштуваннях ServBay.
• Q: Налаштував HTTPS, але браузер показує попередження про сертифікат?
  • A: Для ServBay CA потрібно додати кореневий сертифікат ServBay у довірені вашої системи або браузера. Детальніше — у офіційній документації ServBay.
  • Якщо використовується ACME, перевірте, що домен вказує на ServBay, а сертифікат видано й встановлено правильно. Перегляньте логи ServBay для деталей ACME.
• Q: Не працює rewrite, сторінки не завантажуються/відсутні?
  • A: Переконайтеся, що у налаштуваннях сайту вибрано rewrite-правила, відповідні до вашого фреймворку або застосунку.
  • Якщо сервер — Apache, перевірте наявність .htaccess в root чи піддиректоріях сайту та дозвіл на його використання (конфігурація Apache).
  • Для Nginx або Caddy: правила прописуються у створених ServBay конфігах, переконайтеся, що вони коректно завантажені.

Висновок

Дотримуючись цієї інструкції, ви легко додасте й запустите перший локальний сайт у середовищі ServBay. Потужна система керування сайтами, гнучкі параметри (SSL, тип сайту, версія PHP, rewrite) і зручні швидкі дії значно підвищують ефективність локальної розробки. Досліджуйте інші функції ServBay — роботу з пакетами, базами даних тощо, для створення повноцінного середовища розробки.