Добавление сайта со статическими файлами

ServBay — это мощный инструмент локальной веб-разработки, поддерживающий множество языков программирования и баз данных. Помимо динамических сайтов, ServBay отлично подходит для размещения и тестирования сайтов со статическими файлами, таких как простые веб-страницы или фронтенд-приложения на HTML, CSS и JavaScript.

В этом материале вы узнаете, как добавить и настроить сайт со статическими файлами в ServBay.

Обзор

Сайт со статическими файлами состоит из файлов, которые напрямую обслуживаются веб-сервером, без выполнения серверных скриптов (например, PHP, Node.js, Python и т.д.). Такие сайты обычно включают HTML-страницы, CSS-стили, JavaScript-файлы, изображения, шрифты и другие ресурсы.

Используя ServBay для размещения локального статического сайта, вы сможете легко разрабатывать, отлаживать и тестировать проект. Это особенно удобно для сценариев, где требуется имитировать доменное имя в продакшн-среде, тестировать подключение по HTTPS или кросс-доменные запросы (CORS).

Типовые сценарии использования

Разработка и тестирование чисто фронтенд-проектов (HTML/CSS/JS).
Размещение статической документации или блогов.
Проверка поведения разных веб-серверов (Caddy/Nginx) при работе со статическими ресурсами.
Эмуляция доступа по доменному имени и HTTPS в локальной среде.
Тестирование сборок фронтенд-фреймворков (React, Vue, Angular и др.).

Предварительные требования

Убедитесь, что ServBay установлен и запущен на macOS.
У вас есть файлы статического сайта, который вы хотите развернуть.

Пошаговая инструкция

Следуйте этим шагам, чтобы добавить сайт со статическими файлами в ServBay:

Шаг 1: Подготовьте файлы вашего сайта

Убедитесь, что все файлы сайта (например, index.html, style.css, script.js и др.) расположены в отдельной папке.

Рекомендуется создавать директорию сайта внутри стандартного корневого каталога сайтов ServBay /Applications/ServBay/www — так будет проще управлять файлами. Например, для проекта с именем my-static-site создайте папку my-static-site по адресу /Applications/ServBay/www/ и поместите в неё все файлы сайта.

bash

# Создание примера директории в терминале
mkdir -p /Applications/ServBay/www/servbay-static-demo
cd /Applications/ServBay/www/servbay-static-demo

# Создание простого файла index.html
echo '<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ServBay 静态网站示例</title>
    <style>
        body { font-family: sans-serif; text-align: center; margin-top: 50px; }
        h1 { color: #333; }
    </style>
</head>
<body>
    <h1>恭喜您！ServBay 静态网站配置成功！</h1> <!-- Поздравляем! Статический сайт ServBay успешно настроен! -->
    <p>您正在通过 ServBay 访问这个本地静态页面。</p> <!-- Вы просматриваете эту локальную страницу через ServBay. -->
</body>
</html>' > index.html

# Теперь структура файлов выглядит так:
# /Applications/ServBay/www/servbay-static-demo/index.html

Шаг 2: Добавление сайта в ServBay

Откройте приложение ServBay.
В левой боковой панели выберите пункт Сайты (Обратите внимание: в старых версиях он может называться "Хосты", а в новых используется "Сайты").
В нижней части списка сайтов нажмите кнопку Добавить. Откроется окно настроек.

Шаг 3: Настройка параметров сайта

В открывшемся окне заполните или выберите следующие параметры:

Домен (Domain): Введите доменное имя, по которому хотите открывать сайт локально. Рекомендуется использовать домены с суффиксом .servbay.demo, например static.servbay.demo или my-static-site.servbay.demo. ServBay автоматически настроит локальное разрешение доменов на .servbay.demo, никаких изменений файла hosts вручную не потребуется.
- Пояснение: Использование домена .servbay.demo позволяет избежать конфликтов с реальными онлайн-доменами, а встроенный DNS-сервер ServBay гарантирует, что такие домены будут указывать на ваш компьютер.
Путь (Path): Нажмите на иконку папки справа и выберите директорию, в которой находятся файлы сайта, подготовленные в шаге 1, например /Applications/ServBay/www/servbay-static-demo/.
- Пояснение: Путь задаёт корневой каталог (Document Root), из которого веб-сервер (Caddy или Nginx) будет отдавать файлы сайта. При обращении к http://static.servbay.demo/ сервер сначала ищет файл index.html или другой стартовый файл именно в этой папке. Убедитесь, что выбираете именно папку сайта, а не конкретный файл.
Порт (Port): Обычно можно оставить по умолчанию. HTTP по умолчанию использует порт 80, HTTPS — порт 443. При желании можно указать другой порт.
Веб-сервер (Web Server): Выберите желаемый веб-сервер. Для статических сайтов и Caddy, и Nginx — отличные варианты.
- Caddy: Простой в настройке, поддерживает HTTP/2 и автоматическую настройку HTTPS (с помощью ServBay User CA), рекомендуется по умолчанию в ServBay.
- Nginx: Высокопроизводительный, гибкий, широко применяется в продакшн-окружениях.
- Выберите любой из них — оба подходят для данного сценария.
Версия PHP (PHP Version): Для статических сайтов поддержка PHP не требуется. Выберите None.
Версия Node.js (Node.js Version): Для статических сайтов Node.js не нужен. Выберите None.
Версия Python (Python Version): Для статических сайтов поддержка Python не требуется. Выберите None.
Версия Go (Go Version): Для статических сайтов поддержка Go не требуется. Выберите None.
Версия Java (Java Version): Для статических сайтов поддержка Java не требуется. Выберите None.
SSL: Если вы хотите получить доступ к статическому сайту через HTTPS в локальной среде, отметьте этот пункт. ServBay автоматически выпустит и установит локальный SSL-сертификат при помощи встроенного центра сертификации ServBay User CA для удобного тестирования HTTPS.
CORS: Если вашему сайту необходима поддержка кросс-доменных запросов (Cross-Origin Resource Sharing), например, для загрузки шрифтов или данных API с других доменов, активируйте эту опцию и выполните соответствующие настройки. ServBay позволяет настраивать CORS-заголовки для сайтов.

Шаг 4: Сохранение и применение изменений

После заполнения всех параметров нажмите кнопку Сохранить внизу окна.
Вернитесь к списку сайтов в ServBay. Там появится новый сайт.
В верхней части списка сайтов нажмите Применить изменения.
- Пояснение: Кнопка Применить изменения заставляет ServBay перезапустить конфигурацию веб-сервера (Caddy или Nginx), чтобы новые настройки вступили в силу. Этот шаг обязателен, иначе сайт не будет работать.

Проверка настроек

После сохранения и применения изменений откройте браузер и введите в адресной строке нужный домен (например, http://static.servbay.demo или https://static.servbay.demo, если был включён SSL).

Если всё настроено корректно, вы увидите содержимое вашего статического сайта, например, созданную ранее страницу index.html.

На что обратить внимание

Проверьте, что указанный Путь действительно указывает на корневую папку сайта.
После каждого добавления, изменения или удаления сайта обязательно снова нажимайте кнопку Применить изменения.
Для статических сайтов всегда выбирайте режим None для серверных языков (PHP, Node.js и т.п.) — это снижает потребление ресурсов и потенциальные риски безопасности.
В случае проблем с доступом убедитесь, что ServBay запущен, что веб-сервер (Caddy/Nginx) работает, и что введённый в браузере домен полностью совпадает с настройками в ServBay.

Часто задаваемые вопросы (FAQ)

В: При попытке открыть домен сайта появляется сообщение "Не удаётся получить доступ к сайту" или "Сервер не найден". Что делать?

О:

Убедитесь, что приложение ServBay запущено.
Проверьте, что вы нажали кнопку Применить изменения в ServBay.
Сравните домен, введённый в браузере, с тем, что указан в настройках ServBay (учитывая http:// или https://).
Проверьте, что выбранная в настройках Путь действительно указывает на папку сайта.
Изучите журнал ServBay — там могут быть подробные сведения об ошибке.

В: Почему при доступе к сайту отображается список файлов каталога, а не мой файл index.html?

О: Обычно это происходит, если в корне сайта отсутствует стартовая страница (index.html). Добавьте в корневую папку сайта файл index.html (или другой стартовый файл, предусмотренный сервером) с правильным именем и расширением (учитывая регистр букв).

В: Можно ли включить HTTPS для статического сайта?

О: Да, просто активируйте опцию SSL при настройке сайта в ServBay. ServBay сгенерирует и установит доверенный SSL-сертификат для выбранного домена, чтобы вы могли работать с HTTPS даже в локальной среде.

Итоги

С помощью ServBay вы можете легко добавлять и управлять сайтами со статическими файлами локально — будь то простые HTML-страницы или результат сборки сложного фронтенд-приложения. Используйте возможности управления сайтами, локального доменного разрешения и поддержки SSL в ServBay для более эффективной разработки и тестирования веб-проектов.

Добавление сайта со статическими файлами ​

Обзор ​

Типовые сценарии использования ​

Предварительные требования ​

Пошаговая инструкция ​

Шаг 1: Подготовьте файлы вашего сайта ​

Шаг 2: Добавление сайта в ServBay ​

Шаг 3: Настройка параметров сайта ​

Шаг 4: Сохранение и применение изменений ​

Проверка настроек ​

На что обратить внимание ​

Часто задаваемые вопросы (FAQ) ​

Итоги ​