Хостинг статического сайта на GCP: Cloud Storage и Cloud CDN

Быстрые ссылки

• Что такое «статический» сайт?
• Настройка Cloud Storage и Cloud CDN

Что такое «статический» сайт?

Термин «статический» не означает отсутствие JavaScript или «неинтерактивности». Статический сайт — это сайт, где сервер не формирует HTML на лету в ответ на каждый запрос. Вы разворачиваете заранее сгенерированные файлы: HTML, CSS, JavaScript, изображения и другие ассеты. Примеры:

• Одностраничное приложение на React, собранное в набор статических файлов.
• Блог, экспортированный генератором статических сайтов (Hugo, Jekyll) в HTML.

Контраст: серверные платформы (PHP/WordPress, серверные шаблонизаторы, динамический рендеринг) формируют HTML запрос‑зависимо, обращаясь к базе данных. Статический подход упрощает обслуживание, улучшает скорость и снижает поверхность атаки.

Важно: статический сайт всё ещё может быть полностью динамическим на клиенте — взаимодействие с API, аутентификация и пользовательские данные выполняются через JavaScript и отдельные сервисы.

Плюсы и ограничения

• Плюсы: простое масштабирование (Cloud Storage), высокая доступность, низкая задержка при использовании CDN, меньше администрирования.
• Ограничения: нет серверного рендеринга на стороне хоста; если нужна база данных или серверная логика — потребуется отдельный бэкенд/API.

Важно: Load Balancer добавляет постоянную стоимость (процессинг/час и трафик). Для простых персональных проектов рассмотрите Firebase Hosting или GitHub Pages.

Настройка Cloud Storage и Cloud CDN — пошагово

Ниже — практическая инструкция для доставки статического сайта через Google Cloud Storage + HTTPS Load Balancer с Cloud CDN.

1) Создайте бакет в Cloud Storage

• Откройте Cloud Storage Console и создайте бакет.
• Выберите многорегиональный (Multi-region) стандартный tier и включите uniform access control (единый доступ).

2) Сделайте контент доступным публично

Бакет по умолчанию приватный. Откройте вкладку Permissions и добавьте нового участника:

• В поле «Новый участник» введите «allUsers» (в GCP это специальный принципал, обозначающий всех пользователей).
• Назначьте роль Storage Object Viewer.

Вы увидите предупреждение о публичном доступе — подтвердите, если это ожидаемое поведение.

3) Залейте файлы сайта

Можно копировать вручную через веб‑консоль или воспользоваться утилитой gsutil. Для синхронизации директории используйте:

gsutil rsync -R public gs://bucketname

После этого сайт будет доступен по адресу вида https://storage.googleapis.com/BUCKET_NAME/index.html или по URL бакета. Для собственного домена и HTTPS потребуется Load Balancer.

4) Создайте HTTPS Load Balancer

• Перейдите в Networking Console → Load Balancing → Create load balancer.
• Выберите конфигурацию HTTPS Load Balancing и укажите, что балансировщик — «интернет‑ориентированный» (internet-facing).

5) Добавьте Backend bucket

В разделе Backend Configuration добавьте новый backend bucket — это связывает Load Balancer с вашим Cloud Storage бакетом. Здесь же можно включить Cloud CDN, чтобы кэшировать файлы ближе к пользователям.

Примеры настроек:

• Backend: имя бакета
• Cloud CDN: включено (рекомендуется для статики)
• Настройки кэширования: проверьте заголовки Cache‑Control у ваших файлов (см. раздел о кэшировании)

6) Правила маршрутизации

Если весь трафик идёт на один бакет — настройте правило, которое маршрутизирует «/» на backend bucket. Если вы хотите хранить медиа в отдельном бакете, добавьте правило по префиксу (/images/ → другой бакет).

7) Настройте фронтенд и выделенный IP

• В frontend configuration выберите протокол HTTPS.
• Для удобной привязки DNS поменяйте ephemeral IP на статический IP (создайте новый статический адрес в диалоге).

8) SSL‑сертификат и домен

Вы можете заказать бесплатный SSL‑сертификат у Google (Managed SSL) или загрузить свой. Для использования сертификата нужно подтвердить владение доменом и затем выбрать сертификат в настройках фронтенда.

9) DNS‑запись

В DNS провайдера создайте A‑запись, указывающую на выделенный статический IP балансировщика. После распространения DNS (иногда до 24 часов) ваш домен начнёт отдавать контент через Load Balancer и Cloud CDN.

Кэширование и инвалидация

• Настраивайте заголовки Cache‑Control при сборке сайта (например, для ассетов с хешированием — long max‑age; для index.html — short TTL или no‑cache).
• Для немедленной очистки кэша Cloud CDN используйте функции инвалидации в консоли или gcloud:

gcloud compute url-maps invalidate-cdn-cache URL_MAP_NAME --path "/*"

Планируйте стратегию версионирования ассетов (content hashing), чтобы избегать необходимости частых инвалидаций.

Безопасность и доступ

• Минимизируйте публичный доступ: если сайт требует аутентификации, храните приватные данные в приватных бакетах и отдавайте через авторизованный backend.
• Используйте строгие заголовки безопасности (Content Security Policy, X-Frame-Options и др.) в ваших HTML.
• Для логирования и аудита включите Cloud Logging и мониторинг для балансировщика и бакета.

Когда этот подход не подходит

• Если вам нужен серверный рендеринг (SSR) для SEO/производительности без client-side hydration.
• Если сайт очень похож на динамическое приложение с персонализированным содержимым на уровне HTML для каждого пользователя.
• Если ваши вычисления требуют выполнения длительных серверных задач.

Альтернативы для таких случаев: App Engine, Cloud Run, Compute Engine + NGINX, или хостинг WordPress на VM/managed сервисе.

Альтернативные платформы и сокращения затрат

• Firebase Hosting — простая интеграция с CI, бесплатный план и встроенный SSL для небольших проектов.
• Netlify / Vercel — удобны для непрерывного развёртывания с репозитория.
• GitHub Pages — бесплатный вариант для простых статических сайтов.

Шаблон SOP: быстрое развертывание (сводка действий)

1. Создать бакет (multi‑region, uniform access).
2. Залить файлы через gsutil rsync.
3. Настроить публичные права (если нужно) или оставить приватным и служить через Load Balancer.
4. Создать HTTPS Load Balancer → Backend bucket → включить Cloud CDN.
5. Назначить статический IP и SSL‑сертификат.
6. Обновить DNS → проверить доступность и SSL.
7. Настроить логи и мониторинг, настроить кэширование.

Чек‑лист ролей

• DevOps
  • Создал бакет, проверил права и политики.
  • Настроил Load Balancer и выделенный IP.
  • Настроил мониторинг и оповещения.
• Frontend разработчик
  • Собрал статические файлы, настроил Cache‑Control и хеширование ассетов.
  • Протестировал сайт локально и после развёртывания.
• Владелец/менеджер
  • Обновил DNS и подтвердил SSL.
  • Проверил бюджет и ожидаемые расходы.

Критерии приёмки

• Сайт доступен по нужному домену по HTTPS.
• Статические ресурсы возвращают ожидаемые заголовки Cache‑Control.
• Логи балансировщика и бакета показывают успешные запросы.
• Страницы загружаются корректно с CDN‑кэша (проверка по заголовкам ответов).

Примеры ошибок и как их решать

• 403 Forbidden для объектов: проверьте права бакета и роль Storage Object Viewer для allUsers или настройте Signed URLs.
• SSL невалиден: убедитесь, что сертификат привязан к фронтенду балансировщика и домен проверен.
• Кэш отдаёт устаревший контент: используйте content hashing для ассетов; при необходимости — инвалидация CDN.

Диаграмма решения (Mermaid)

flowchart TD
  A[Нужен статический сайт?] -->|Да| B{Требуется серверная логика?}
  B -->|Нет| C[Cloud Storage + LB + CDN]
  B -->|Да| D[Развернуть бэкенд: Cloud Run/App Engine/VM]
  C --> E[Рассмотреть Firebase/Netlify для простоты]
  D --> F[Комбинировать: статические ассеты в бакете, API в Cloud Run]

Краткий словарь

• Cloud Storage — объектное хранилище для файлов.
• Bucket — контейнер в Cloud Storage.
• Load Balancer — балансировщик запросов с поддержкой HTTPS и интеграцией с CDN.
• Cloud CDN — кэширование контента на периферии Google.

Итог

Хостинг статических сайтов через Google Cloud Storage + HTTPS Load Balancer и Cloud CDN — надёжный подход для производительных и масштабируемых сайтов без серверной логики. Он снижает операционную сложность, даёт гибкое кэширование и удобную интеграцию с выделенным доменом и SSL. Для простых личных сайтов рассмотрите альтернативы с более низкими затратами, а для сайтов с динамикой — комбинируйте статическую доставку ассетов с отдельным API/бэкендом.