Развертывание Astro-сайта на объектном хранилище с CDN

С помощью VK Object Storage и CDN можно развернуть статический сайт на фреймворке Astro с глобальной доставкой контента и низкой задержкой. Объектное хранилище выступает в роли serverless-хостинга для фронтенда, а CDN обеспечивает кеширование на edge-серверах и доставку контента по HTTPS.

Для примера далее используются следующие данные:

• Имя бакета: astro-site-bucket
• Доменное имя сайта: astro.example.com
• Директория собранного проекта: ./dist
• Эндпоинт хранилища: https://hb.ru-msk.vkcloud-storage.ru

1. Убедитесь, что у вас установлен и настроен AWS CLI.

2. Создайте бакет VK Object Storage со следующими параметрами:

   • Имя: astro-site-bucket. Имя бакета должно соответствовать правилам именования.
   • Класс хранения: Hotbox — подходит для быстрой раздачи большого количества файлов.

3. Установите Node.js версии 18 или выше, если это еще не сделано.

4. Создайте проект Astro:

    
   npm create astro@latest

5. Убедитесь, что у вас есть доступ к управлению DNS-записями домена astro.example.com.

1. Перейдите в директорию проекта Astro.

2. Убедитесь, что в файле astro.config.mjs настроен статический вывод:

    
   import { defineConfig } from 'astro/config';export default defineConfig({  output: 'static',});

3. Соберите проект:

    
   npm run build

   В директории ./dist появятся статические файлы сайта: index.html, страницы ошибок, изображения, файлы CSS и JavaScript.

4. Убедитесь, что в корне ./dist присутствуют файлы index.html и 404.html. Если файл 404.html не создан автоматически, создайте его вручную.

Настройте конфигурацию статического сайта. В конфигурации укажите индексный документ и страницу ошибки для бакета. Это можно сделать через файл конфигурации или сразу в команде AWS CLI:

 
aws s3api put-bucket-website \  --bucket astro-site-bucket \  --website-configuration '{"IndexDocument":{"Suffix":"index.html"},"ErrorDocument":{"Key":"404.html"}}' \  --endpoint-url https://hb.ru-msk.vkcloud-storage.ru

Здесь:

• index.html — документ, который отдается при обращении к корню бакета.
• 404.html — документ, который отдается при ошибке 404.

После настройки конфигурации статический сайт будет доступен по адресу: https://astro-site-bucket.hb-website.hb.ru-msk.vkcloud-storage.ru

1. Настройте публичный доступ на чтение для объектов сайта. Используйте один из способов.

   Политика доступа (рекомендуется)

   ACL

   1. Создайте файл policy.json с политикой, разрешающей анонимное чтение объектов:

       
      {"Version": "2012-10-17","Statement": [   {      "Sid": "PublicReadGetObject",      "Effect": "Allow",      "Principal": "*",      "Action": "s3:GetObject",      "Resource": ["arn:aws:s3:::astro-site-bucket/*"]   }]}

   2. Примените политику:

       
      aws s3api put-bucket-policy \--bucket astro-site-bucket \--policy file://policy.json \--endpoint-url https://hb.ru-msk.vkcloud-storage.ru

   Установите стандартный ACL public-read для бакета:

    
   aws s3api put-bucket-acl \  --bucket astro-site-bucket \  --acl public-read \  --endpoint-url https://hb.ru-msk.vkcloud-storage.ru

   При загрузке объектов также указывайте флаг --acl public-read, чтобы каждый объект был доступен для чтения.

2. Настройте CORS для бакета, если сайт использует кросс-доменные запросы к ресурсам в хранилище.

   Пример XML-конфигурации CORS:

    
   <CORSConfiguration>  <CORSRule>    <AllowedOrigin>https://astro.example.com</AllowedOrigin>    <AllowedMethod>GET</AllowedMethod>    <AllowedMethod>HEAD</AllowedMethod>    <AllowedHeader>*</AllowedHeader>    <MaxAgeSeconds>3000</MaxAgeSeconds>  </CORSRule></CORSConfiguration>

   Здесь:

   • AllowedOrigin — домен сайта, с которого разрешены запросы к бакету.
   • AllowedMethods — HTTP-методы, разрешенные в запросах.
   • MaxAgeSeconds — время кеширования результатов предварительного запроса в браузере.

1. Синхронизируйте содержимое директории ./dist с бакетом с помощью AWS CLI:

    
   aws s3 sync ./dist s3://astro-site-bucket \  --endpoint-url https://hb.ru-msk.vkcloud-storage.ru

   Команда загружает только новые и измененные файлы, что ускоряет повторные деплои.

2. Убедитесь, что файлы загружены:

    
   aws s3 ls s3://astro-site-bucket \  --endpoint-url https://hb.ru-msk.vkcloud-storage.ru

1. Создайте CDN-ресурс через интерфейс бакета astro-site-bucket. В параметрах укажите:

   • Персональный домен:astro.example.com.
   • Время жизни кеша: 4. Для статического сайта рекомендуется указывать значение от 1 до 7 дней.

2. Нажмите Перейти к CDN-ресурсу, чтобы перейти в раздел CDN для дальнейшей настройки.

3. Сохраните служебное доменное имя CDN-ресурса (например, cl-541e19d9.service.cdn.msk.vkcs.cloud) — оно понадобится для создания CNAME-записи.

4. Включите доступ к контенту конечным пользователям. Это необходимо, чтобы затем иметь возможность выбрать Let's Encrypt в качестве SSL-сертификата.

5. Выберите HTTPS в качестве протокола взаимодействия с источником для CDN-ресурса, чтобы обеспечить безопасную передачу данных пользователям. Это также необходимо для использования Let's Encrypt в качестве SSL-сертификата.

6. В настройках шифрования CDN-ресурса выберите опцию Let's Encrypt — будет использован бесплатный SSL-сертификат, который создается автоматически после распространения CNAME-записей в DNS (обычно до 30 минут). Подробнее об управлении SSL-сертификатами — в разделе Использование SSL-сертификата.

7. Настройте DNS-запись: создайте CNAME-запись для домена astro.example.com, указав в качестве псевдонима сохраненное служебное доменное имя CDN-ресурса. Если используется сервис DNS от VK Cloud, следуйте инструкции по добавлению DNS-записей.

Настройте кеширование на CDN-ресурсе. Подробнее о рекомендуемых значениях TTL для разных типов контента в разделе Кеширование контента.

1. Настройте политику доступов по домену, чтобы предотвратить использование ваших ресурсов другими сайтами.
2. Настройте политику доступа по странам для ваших источников, чтобы ограничить доступ к контенту по географическому признаку.

1. Откройте сайт по адресу https://astro.example.com в браузере. Должна отобразиться главная страница Astro-сайта.

2. Проверьте страницу ошибки — откройте несуществующий URL, например https://astro.example.com/nonexistent-page. Должна отобразиться страница 404.html.

3. Проверьте заголовки ответа:

    
   curl -I https://astro.example.com

   Убедитесь, что:

   • В заголовке Content-Type указан правильный MIME-тип.
   • Присутствуют заголовки кеширования от CDN.

4. Проверьте, что изображения и другие статические ресурсы загружаются корректно.

Созданные ресурсы тарифицируются. Если они вам больше не нужны:

1. Удалите объекты из бакета.
2. Удалите бакет.
3. Удалите CDN-ресурс, если он больше не нужен.