Статические сайты не требуют использования баз данных и серверных скриптов, поэтому для их размещения не обязательно арендовать полноценный виртуальный сервер — можно использовать S3-хранилище. В статье расскажем, как быстро развернуть статический сайт в объектном S3-хранилище, привязать к нему домен и настроить SSL-сертификат.
Что такое статический сайт
Статический сайт — это набор файлов с неизменяемым содержимым. Его можно сравнить со страницами печатного журнала или PDF-документа: текст, вёрстка и изображения жёстко зафиксированы в коде и отображаются для всех пользователей одинаково. Архитектура статического сайта состоит из HTML-страниц с текстом и структурой, CSS-стилей для оформления, JavaScript-скриптов для анимации, а также медиафайлов: изображений, видео и шрифтов.
Главная особенность такого сайта заключается в том, что все его страницы созданы заранее. Сервер отдаёт данные в исходном виде — точно так же, как если бы вы открыли документ из папки на своём компьютере. Вот как это работает:
- Запрос браузера. Пользователь вводит адрес сайта. Браузер отправляет запрос на сервер, например, «дай мне страницу index.html»
- Ответ сервера. Сервер находит нужный файл на диске и отправляет его обратно браузеру. В этот момент на сервере не происходит никакой предварительной обработки, сборки страницы или выполнения кода.
- Отрисовка. Браузер принимает файлы: HTML, CSS, JS и собирает из них визуальную страницу, которую и видит пользователь.
На статическом сайте все страницы уже в готовом виде, поэтому они быстро загружаются в браузере. У динамического сайта всё не так — страницы не хранятся в готовом виде. Серверу нужно сначала запускать программные скрипты, которые отправляют запросы к базам данных, и только потом собирать страницу и показывать пользователю.
Раньше статические сайты выглядели примитивно и содержали только текстовый и визуальный контент. Сейчас же благодаря генераторам статических сайтов (SSG), таких как Hugo, Gatsby, Next.js, Nuxt.js или Astro можно разрабатывать масштабные, визуально богатые интернет-магазины, блоги и корпоративные порталы. Все динамические элементы: корзина товаров, личный кабинет, система комментариев или внутренний поиск переносится на сторону клиента и работают через сторонние API-интерфейсы. В свою очередь, совсем простые проекты можно создать бесплатно с помощью ИИ без знания кода и конструкторов.
Где можно разместить статический сайт
Выбор площадки под сайт напрямую определяет стабильность его работы, скорость загрузки у пользователей и итоговую стоимость поддержки. Исторически сложилось несколько вариантов хостинга статического сайта — рассмотрим основные.
Виртуальный хостинг (Shared Hosting). Файлы размещаются на сервере, где вычислительные ресурсы (процессор и оперативная память) делятся между всеми арендаторами, а программное окружение настраивается пользователем индивидуально в рамках возможностей, предоставленных провайдером. Настройкой веб-сервера и обновлением системных пакетов занимается хостинг-провайдер, а управление сайтом происходит через панель управления.
Виртуальные серверы (VPS/VDS). Аренда полноценной виртуальной машины с выделенными ресурсами и root-доступом. Это позволяет самостоятельно выбирать ОС, устанавливать необходимые веб-серверы, настраивать проксирование и серверные модули.
Специализированные платформы: GitHub Pages, Netlify, Vercel. Сервисы, которые автоматически собирают и разворачивают сайт напрямую из репозитория с кодом. Разместить сайт можно бесплатно или за небольшую плату. Но когда количество посетителей ресурса вырастет, платформа потребует перейти на дорогой тариф. Также существует риск блокировок со стороны зарубежных платформ.
Объектное хранилище S3. Данные размещаются в виде независимых объектов в распределённой системе хранения. При включении функции статического хостинга хранилище напрямую обрабатывает входящие HTTP-запросы и отдаёт файлы пользователям без участия веб-сервера. Кроме того, это финансово доступный вариант, позволяющий оптимизировать расходы на ИТ-инфраструктуру.
Архитектура S3: как устроено объектное хранилище и почему оно идеально для статики
Simple Storage Service (S3-хранилище) — технология облачного объектного хранения данных. S3-хранилище напоминает автоматизированную камеру хранения, например, почтомат. Вы отдаёте файл на хранение, система присваивает ему уникальный идентификатор (ключ) и выдаёт прямую ссылку — их используют для доступа к файлу.
Вместо дерева папок в S3-хранилище есть бакеты — это аналог каталога на компьютере. Любой бакет по умолчанию работает как облачное файловое хранилище, где файлы доступны по API или прямым ссылкам. Но если включить функцию статического хостинга, S3 начинает принимать HTTP-запросы к этому бакету как веб-сервер.
Хранилище само сопоставляет запросы к домену с нужными файлами: например, автоматически открывает главную страницу или перенаправляет на страницу ошибки. Также к S3-бакету можно привязать собственное доменное имя и подключить SSL-сертификат, чтобы браузер не показывал предупреждений о небезопасном соединении.
Почему удобно размещать статические сайты в S3-хранилище:
- Масштабируемость без потери производительности. Объектное хранилище спроектировано под работу с высокими нагрузками и без проблем может обслуживать множество запросов одновременно без замедления работы.
- Высокий уровень безопасности. Статический сайт, загруженный в S3, защищён от подавляющего большинства веб-атак. Злоумышленники физически не смогут провести SQL-инъекцию или внедрить вредоносный код на сервер, так как у проекта нет базы данных и исполняемых скриптов. Однако безопасность клиентского кода остаётся на ответственности разработчика.
- Нет необходимости администрировать сервер. Пользователю не нужно самостоятельно устанавливать и конфигурировать веб-серверы (Nginx, Apache), обновлять пакеты безопасности операционной системы или очищать системные логи. Провайдер полностью берёт на себя обслуживание инфраструктуры.
- Экономичность и оптимизация бюджета. Использование S3-хранилища — это один из самых бюджетных способов запустить сайт. Оплата, как правило, зависит только от фактического объёма хранимых данных, что позволяет избежать лишних переплат и эффективно экономить средства на размещении проекта.
При планировании долгосрочного бюджета обязательно уточните, берёт ли ваш провайдер плату за трафик в S3-хранилище. Если проект станет популярным, крупной графой расходов может стать плата за посещаемость ресурса, так как большой поток посетителей увеличит расходы на сетевую инфраструктуру. В FirstVDS мы тарифицируем только место на сервере, без оплаты входящего и исходящего трафика.
Как развернуть сайт в объектном хранилище
В качестве примера мы используем объектное хранилище FirstVDS. У других S3-провайдеров шаги будут аналогичными, однако настройки и внешний вид панели управления могут иметь свои особенности.
Чтобы разместить статический сайт в S3-хранилище, сначала закажите услугу в личном кабинете провайдера. После этого развертывание сайта выполняется в 3 этапа:
- Создание S3-бакета.
- Настройка конфигурации S3-бакета и включение режима хостинга.
- Загрузка статических файлов сайта.
Этап 1. Создаём S3-бакет
S3-бакет создаётся в Личном кабинете пользователя, где сначала нужно авторизоваться. Затем:
- В левом меню откройте вкладку Товары и выберите пункт S3 хранилище.
- Нажмите кнопку Бакеты.
- Нажмите кнопку Создать.
- Придумайте название бакета в латинице. Допускаются только строчные буквы, цифры и дефисы в нижнем регистре.
- Для типа доступа выберите Публичное чтение, чтобы открыть файлы сайта для просмотра в интернете. Если оставить доступ закрытым, сайт не откроется.
- Подтвердите настройки кнопкой Ок.
Созданный бакет появится в общем списке, его настройки можно будет отредактировать также через панель управления S3 Manager.
Этап 2. Включаем режим статического хостинга
По умолчанию созданный бакет работает как обычный файловый архив. Переведём его в режим отдачи веб-страниц:
- В общем списке найдите нужный бакет и в верхнем меню нажмите на кнопку Веб-сайт.
- Активируйте первый тумблер Веб-сайт. Он отвечает за включение функций статического веб-сайта для бакета.
- Заполните поле Стартовая страница. В нём нужно указать имя главного файла, который открывается по умолчанию при переходе на корень сайта. Традиционно это index.html.
- В следующем поле Страница ошибок введите имя страницы, которую S3-бакет продемонстрирует пользователю при вводе некорректного адреса. Стандартно это 404.html или error.html.
- Чтобы сохранить настройки, нажмите Ок.
Система сгенерирует ссылку на бакет (website), найти которую можно во вкладке Доступы. Это уникальный веб-адрес, по которому S3-бакет будет доступен в глобальной сети. Скопируйте его и вставьте в адресную строку для проверки.
Этап 3. Добавляем файлы сайта в хранилище
S3-бакет в объектном хранилище подготовлен, переходим к загрузке статических файлов сайта:
- Вернитесь на главную панель управления, выберите хранилище и в верхнем меню откройте вкладку S3 Manager — это инструмент для работы с файлами в хранилище.
- Из главной страницы перейдите в нужный бакет и нажмите на кнопку Загрузить. Можно загрузить как отдельные файлы, так и папку целиком.
- Выделите на компьютере все файлы сайта или папку и нажмите кнопку Открыть.
- Дождитесь окончания загрузки.
Когда файлы уже загружены, проверьте отображение сайта через ссылку на бакет. Её можно найти и скопировать во вкладке Доступы.
Как привязать домен и подключить SSL-сертификат
Стандартный технический URL неудобен для пользователей и продвижения в поиске. Поэтому рекомендуем подключить домен и SSL-сертификат.
Выделим основные моменты подключения домена и сертификата, а более развёрнутую инструкцию вы сможете найти в нашей базе знаний.
Настраиваем DNS-запись у регистратора
Перед добавлением доменного имени нужно создать направляющую запись на стороне регистратора или в панели управления DNS-зоной. При добавлении домена биллинговая система (Личный кабинет пользователя) автоматически проверяет наличие этой записи — без неё при привязке домена возникнет ошибка.
Проверочные алгоритмы биллинга работают с записями типа CNAME. Как настроить маршрутизацию:
- Откройте редактор DNS-зон домена в панели управления DNS FirstVDS.
Подробнее о переносе доменов на обслуживание в FirstVDS от другого регистратора можно прочитать в нашей инструкции.
- Добавьте новую запись со следующими параметрами:
- Тип записи: CNAME.
- Имя (хост): www (или другое имя вашего поддомена).
- Значение (адрес): s3ssl.firstvds.ru.
Параметр Значение будет отличаться в зависимости от хостинг-провайдера S3-хранилища.
- Сохраните внесённые изменения.
Привязываем домен и SSL-сертификат
Зафиксируйте текстовый адрес внутри самой панели управления хранилищем — это позволит системе понять, какой именно бакет должен отвечать на запросы по вашему домену.
Добавить домен для S3-бакета можно через настройки статического сайта:
- Зайдите в бакеты и в верхнем меню выберите пункт Веб-сайт.
- В настройках переключите тумблер Использовать свой домен, введите в поле доменное имя и активируйте «Сертификат от Let's Encrypt». Сертификат бесплатный, выпустится автоматически и будет своевременно продлеваться системой без вашего участия.
После привязки адреса в личном кабинете хранилище будет готово принимать внешние запросы.
Проверка и типичные ошибки
После завершения всех настроек откройте сайт в браузере по вашему доменному адресу и проверьте его работу. Если сайт не открывается или какие-то элементы отображаются некорректно, причина может быть в одной из типичных ошибок.
Ошибка 403 Forbidden
Ошибка доступа означает, что S3-хранилище получило запрос, но отказало в выдаче файлов. Это происходит, когда бакет не разрешает публичный доступ к данным. Такое поведение заложено в настройках безопасности по умолчанию.
Что проверить: тип доступа к бакету. Убедитесь, что для бакета включён тип доступа Публичное чтение. Если оставить его закрытым, сайт не откроется у других пользователей.
Ошибка 404 Not Found или отображение парковочной страницы
Если при вводе домена в адресную строку открывается стандартная парковочная страница провайдера или вылетает ошибка «Страница не найдена», значит, запрос дошёл до сервера, но не был направлен в ваш S3-бакет. Либо S3-бакет получил запрос, но не нашёл стартовую страницу.
Что проверить:
- Конфигурацию DNS у регистратора и убедитесь, что адрес, указанный на форме добавления домена, верно скопирован в поле Значение для CNAME-записи.
- Проверьте, активирован ли тумблер Веб-сайт в настройках бакета, который переводит хранилище в режим статического хостинга.
- Наличие файла в бакете, который указан в форме настройки статического веб-сайта как «Стартовая страница».
- Глобальное обновление DNS-записей в интернете занимает от 30 минут до 24 часов. Если настройки внесены верно, нужно просто подождать.
Сайт загружается, но не отображаются изображения и медиафайлы
Если текст и структура сайта отображаются корректно, но графический контент, иконки или шрифты отсутствуют, это означает, что браузер не может обнаружить или прочитать медиафайлы по указанным в коде ссылкам.
Что необходимо проверить:
- Регистр символов в путях. Если картинка на диске называется Photo.JPG, а в коде сайта прописан путь к photo.jpg, она не отобразится. Проверьте, чтобы имена в коде точно совпадали с именами загруженных файлов.
- Тип путей к файлам. Убедитесь, что пути к медиафайлам в коде являются относительными (например, ./img/pic.png), а не абсолютными путями с диска. (например, C:/Users/pic.png). Абсолютные пути ведут на локальный компьютер разработчика — на сервере они работать не будут.
Предупреждение «Подключение не защищено» (Ошибка SSL)
Браузер показывает это предупреждение, когда не получает от сервера действительный SSL-сертификат. Чаще всего сертификат просто не выпущен или не привязан к домену. Если браузер сообщает о небезопасном соединении, убедитесь, что в панели управления хранилища напротив вашего домена активирована галочка «Сертификат от Let's Encrypt». Также сбой может быть вызван некорректной настройкой DNS-записей или тем, что они ещё не успели обновиться в сети после изменения.
Теперь сайт готов к работе. При этом статический сайт в S3-хранилище — практически полностью автономный. Достаточно один раз настроить S3-бакет, подключить домен, SSL-сертификат и можно пользоваться сайтом без ежедневного администрирования и обновлений безопасности.
На этом развёртывание сайта закончено. Дальнейшее обслуживание сводится к минимуму, так как у проекта нет базы данных и скриптов, способных дать сбой. При необходимости обновить контент, например, изменить контакты или добавить новую статью, достаточно отредактировать локальные файлы и загрузить их в бакет вместо старых. Все изменения применятся сразу, а сайт продолжит работу в штатном режиме без дополнительного администрирования.
