Связаться с намиПодключиться

Хостинг статического сайта на фреймворке Gatsby в Yandex Object Storage

Статья создана
Обновлена 22 октября 2024 г.

С помощью этого руководства вы разместите свой статический сайт, созданный на фреймворке Gatsby, в сервисе Object Storage и настроите доступ к нему по протоколу HTTPS с помощью сервиса Yandex Certificate Manager.

Чтобы создать и разместить статический сайт в Object Storage:

  1. Подготовьте облако к работе.
  2. Зарегистрируйте доменное имя.
  3. Создайте и настройте бакет Object Storage.
  4. Привяжите доменное имя к бакету.
  5. Добавьте TLS-сертификат в Yandex Certificate Manager.
  6. Настройте доступ к бакету по HTTPS.
  7. Создайте сайт локально.
  8. Загрузите сайт в бакет.
  9. Проверьте результат.

Если созданные ресурсы вам больше не нужны, удалите их.

Подготовьте облако к работе

Зарегистрируйтесь в Yandex Cloud и создайте платежный аккаунт:

  1. Перейдите в консоль управления, затем войдите в Yandex Cloud или зарегистрируйтесь.
  2. На странице Yandex Cloud Billing убедитесь, что у вас подключен платежный аккаунт, и он находится в статусе ACTIVE или TRIAL_ACTIVE. Если платежного аккаунта нет, создайте его и привяжите к нему облако.

Если у вас есть активный платежный аккаунт, вы можете создать или выбрать каталог, в котором будет работать ваша инфраструктура, на странице облака.

Подробнее об облаках и каталогах.

Установите и настройте AWS CLI

Установите и настройте AWS CLI по инструкции.

В стоимость поддержки создаваемой инфраструктуры входят:

  • плата за использование публичной DNS-зоны и за публичные DNS-запросы (см. тарифы Yandex Cloud DNS);
  • плата за хранение данных в Object Storage, операции с ними и исходящий трафик (см. тарифы Object Storage).

Зарегистрируйте доменное имя

  1. В личном кабинете вашего регистратора доменных имен зарегистрируйте доменное имя, например gatsbytest.ru.

  2. Чтобы получить доступ к именам из публичной зоны, делегируйте домен. Для этого в настройках домена укажите адреса DNS-серверов ns1.yandexcloud.net и ns2.yandexcloud.net.

    Делегирование происходит не сразу. Серверы интернет-провайдеров обновляют записи до 24 часов.
    Проверить делегирование домена можно с помощью сервиса Whois или утилиты dig:

    dig +short NS gatsbytest.ru

    Результат:

    ns2.yandexcloud.net.
ns1.yandexcloud.net.

Создайте и настройте бакет Object Storage

Чтобы разместить статический сайт в облаке, создайте бакет и настройте его.

  1. В консоли управления выберите каталог, в котором хотите создать бакет.
  2. В списке сервисов выберите сервис Object Storage.
  3. Справа вверху нажмите кнопку Создать бакет.
  4. В поле Имя укажите зарегистрированное вами доменное имя, например gatsbytest.ru.
  5. В поле Макс. размер укажите 1 ГБ.
  6. Выберите тип доступа Публичный для всех операций.
  7. Нажмите кнопку Создать бакет.
  8. На странице со списком бакетов выберите созданный бакет.
  9. На панели слева выберите Настройки.
  10. Перейдите на вкладку Веб-сайт.
  11. Выберите Хостинг.
  12. В поле Главная страница укажите абсолютный путь к файлу главной страницы сайта. Для сайта из шаблона Gatsby укажите index.html.
  13. (Опционально) В поле Страница ошибки укажите абсолютный путь к файлу, который будет отображаться при ошибках 4xx. Для сайта из шаблона Gatsby укажите 404.html.
  14. Нажмите кнопку Сохранить.

Если у вас еще нет интерфейса командной строки Yandex Cloud, установите и инициализируйте его.

  1. Создайте бакет:

    yc storage bucket create \
  --name <имя_бакета> \
  --default-storage-class standard \
  --max-size 1073741824 \
  --public-read \
  --public-list \
  --public-config-read

    Где --name — имя бакета. Укажите зарегистрированное вами доменное имя, например gatsbytest.ru.

    Результат:

    name: gatsbytest.ru
folder_id: b1g681qpemb4********
anonymous_access_flags:
  read: false
  list: false
default_storage_class: STANDARD
versioning: VERSIONING_DISABLED
max_size: "1073741824"
acl: {}
created_at: "2024-09-09T15:23:34.919887Z"

    Подробнее о команде yc storage bucket create читайте в справочнике CLI.

  2. Включите в бакете хостинг статического сайта:

    yc storage bucket update \
  --name <имя_бакета> \
  --website-settings '{"index": "index.html", "error": "404.html"}'

    Где:

    • --name — имя созданного ранее бакета, например gatsbytest.ru.
    • index — абсолютный путь к файлу главной страницы сайта. Для сайта из шаблона Gatsby укажите index.html.
    • error — абсолютный путь к файлу, который будет отображаться пользователю при ошибках 4xx. Для сайта из шаблона Gatsby укажите 404.html.

    Результат:

    name: gatsbytest.ru
folder_id: b1g681qpemb4********
default_storage_class: STANDARD
versioning: VERSIONING_DISABLED
max_size: "1073741824"
acl: {}
created_at: "2024-09-09T15:23:34.919887Z"
website_settings:
  redirect_all_requests: {}

    Подробнее о команде yc storage bucket update читайте в справочнике CLI.

  1. Создайте бакет:

    aws s3api create-bucket \
  --endpoint-url https://storage.yandexcloud.net \
  --bucket <имя_бакета> \
  --acl public-read

    Где --bucket — имя бакета. Укажите зарегистрированное вами доменное имя, например gatsbytest.ru.

    Результат:

    {
    "Location": "/gatsbytest.ru"
}

  2. Включите в бакете хостинг статического сайта:

    aws s3api put-bucket-website \
  --endpoint-url https://storage.yandexcloud.net \
  --bucket <имя_бакета> \
  --website-configuration '{
    "IndexDocument": {
      "Suffix": "index.html"
    },
    "ErrorDocument": {
      "Key": "404.html"
    }
  }'

    Где:

    • --bucket — имя созданного ранее бакета, например gatsbytest.ru.
    • IndexDocument.Suffix — абсолютный путь к файлу главной страницы сайта. Для сайта из шаблона Gatsby укажите index.html.
    • ErrorDocument.Key — абсолютный путь к файлу, который будет отображаться пользователю при ошибках 4xx. Для сайта из шаблона Gatsby укажите 404.html.

Чтобы создать бакет, воспользуйтесь методом REST API create для ресурса Bucket, вызовом gRPC API BucketService/Create или методом S3 API create.

Чтобы настроить хостинг статического сайта, воспользуйтесь методом REST API update для ресурса Bucket, вызовом gRPC API BucketService/Update или методом S3 API upload.

Привяжите доменное имя к бакету

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

  1. В консоли управления перейдите в созданный ранее бакет.

  2. На панели слева выберите Настройки.

  3. Перейдите на вкладку Веб-сайт.

  4. В блоке Домены в Cloud DNS нажмите кнопку Создать запись.

  5. В открывшемся окне нажмите кнопку Создать зону и выберите доменную зону, которая соответствует имени бакета, например gatsbytest.ru. (с точкой в конце). Нажмите кнопку Создать.

  6. Нажмите кнопку Создать.

    Дождитесь создания записи.

  7. Нажмите кнопку Сохранить.

  1. Создайте публичную зону DNS gatsbytest-ru-zone в Yandex Cloud DNS:

    yc dns zone create \
  --name gatsbytest-ru-zone \
  --zone <имя_домена> \
  --public-visibility

    Где --zone — имя вашего домена, например gatsbytest.ru.. Значение параметра --zone должно заканчиваться точкой. Например, название доменной зоны gatsbytest.ru. соответствует домену gatsbytest.ru.

    Результат:

    id: dns39gihj0ef********
folder_id: b1g681qpemb4********
created_at: "2024-09-09T15:23:34.919887Z"
name: gatsbytest-ru-zone
zone: gatsbytest.ru.
public_visibility: {}

    Подробнее о команде yc dns zone create читайте в справочнике CLI.

  2. Создайте ресурсную запись ANAME в публичной зоне DNS gatsbytest-ru-zone:

    yc dns zone add-records \
  --name gatsbytest-ru-zone \
  --record "@ 600 ANAME <имя_домена>.website.yandexcloud.net"

    Результат:

    +--------+----------------+-------+---------------------------------------+-----+
| ACTION |      NAME      | TYPE  |                 DATA                  | TTL |
+--------+----------------+-------+---------------------------------------+-----+
| +      | gatsbytest.ru. | ANAME | gatsbytest.ru.website.yandexcloud.net | 600 |
+--------+----------------+-------+---------------------------------------+-----+

    Подробнее о команде yc dns zone add-records читайте в справочнике CLI.

Чтобы создать публичную зону DNS, воспользуйтесь методом REST API create для ресурса DnsZone или вызовом gRPC API DnsZoneService/Create.

Чтобы создать ресурсную запись в зоне DNS, воспользуйтесь методом REST API updateRecordSets для ресурса DnsZone или вызовом gRPC API DnsZoneService/UpdateRecordSets.

Добавьте TLS-сертификат в Yandex Certificate Manager

Чтобы настроить доступ к сайту по защищенному протоколу, получите TLS-сертификат и настройте доступ к бакету по HTTPS.

  1. Добавьте в сервис Certificate Manager сертификат от Let's Encrypt® для вашего домена, который будет использоваться веб-сайтом:

    1. В консоли управления выберите каталог, в котором вы будете создавать сертификат.

    2. В списке сервисов выберите Certificate Manager.

    3. Нажмите Добавить сертификат и выберите Сертификат от Let's Encrypt.

    4. В открывшемся окне в поле Имя укажите имя создаваемого сертификата. Например: gatsbytestcert.

    5. В поле Домены укажите имя вашего домена, например gatsbytest.ru.

    6. Выберите тип проверки прав на домен DNS.

    7. Нажмите Создать.

      В списке сертификатов появится новый сертификат со статусом Validating. Этот статус означает, что запрос на выпуск сертификата от Let's Encrypt® создан, и для его успешной обработки вам необходимо пройти процедуру проверки прав на домен.

  2. Для успешного выпуска сертификата пройдите проверку прав на домен:

    1. В списке сертификатов выберите gatsbytestcert.
    2. В открывшемся окне в блоке Проверка прав на домены выберите CNAME-запись.
    3. Нажмите Создать запись и в открывшемся окне нажмите Создать.

    Проверка прав на домен может занять от нескольких минут до нескольких дней — дождитесь ее успешного завершения. В результате сертификат будет выпущен и перейдет в статус Issued.

  1. Добавьте в сервис Certificate Manager сертификат от Let's Encrypt® для вашего домена, который будет использоваться веб-сайтом.

    Выполните команду:

    yc certificate-manager certificate request \
  --name gatsbytestcert \
  --challenge dns \
  --domains <имя_домена>

    Где --domains — имя вашего домена для веб-сервера. Например: gatsbytest.ru.

    Результат:

    id: fpqbs12t6ion********
folder_id: b1gt6g8ht345********
created_at: "2023-12-24T14:36:39.299844798Z"
name: gatsbytestcert
type: MANAGED
domains:
  - gatsbytest.ru
status: VALIDATING
updated_at: "2023-12-24T14:36:39.299844798Z"

    Подробнее о команде yc certificate-manager certificate request читайте в справочнике CLI.

    Сохраните идентификатор (id) созданного сертификата: он пригодится для прохождения проверки ваших прав на домен.

  2. Для успешного выпуска сертификата пройдите проверку прав на домен:

    1. Получите значения ресурсных записей, необходимых для прохождения проверки:

      yc certificate-manager certificate get \
  --name gatsbytestcert \
  --full

      Результат:

      id: fpq2gpi42teg********
folder_id: b1gt6g8ht345********
created_at: "2023-12-24T18:13:45.960Z"
name: gatsbytestcert
type: MANAGED
domains:
  - gatsbytest.ru
status: VALIDATING
updated_at: "2023-12-24T18:13:45.960Z"
challenges:
  - domain: gatsbytest.ru
    type: DNS
    created_at: "2023-12-24T18:13:45.960Z"
    updated_at: "2023-12-24T18:13:49.280Z"
    status: PENDING
    message: Create a record in your DNS provider.
    dns_challenge:
      name: _acme-challenge.gatsbytest.ru
      type: CNAME
      value: fpq2gpi42teg********.cm.yandexcloud.net.
  - domain: gatsbytest.ru
    type: DNS
    created_at: "2023-12-24T18:13:45.960Z"
    updated_at: "2023-12-24T18:13:49.280Z"
    status: PENDING
    message: Create a record in your DNS provider.
    dns_challenge:
      name: _acme-challenge.gatsbytest.ru.
      type: TXT
      value: iiyJJJlsaFIqQ7DMUzira0OKU3iXuaqiN7U********

      Подробнее о команде yc certificate-manager certificate get читайте в справочнике CLI.

      Сохраните значение поля value из раздела с типом CNAME в блоке challenges.dns_challenge. Это значение понадобятся на следующем шаге.

      В списке сертификатов появится новый сертификат со статусом Validating. Этот статус означает, что запрос на выпуск сертификата от Let's Encrypt® создан, и для его успешной обработки вам необходимо пройти процедуру проверки прав на домен.

    2. Создайте ресурсную запись CNAME для прохождения проверки ваших прав на домен:

      yc dns zone add-records \
  --name gatsbytest-ru-zone \
  --record "_acme-challenge 600 CNAME <значение_dns_challenge>"

      Где <значение_dns_challenge> — сохраненное на предыдущем шаге значение, необходимое для проверки прав на соответствующий домен с помощью CNAME-записи.

      Результат:

      +--------+----------------------------------+-------+------------------------------------------+-----+
| ACTION |              NAME                | TYPE  |                   DATA                   | TTL |
+--------+----------------------------------+-------+------------------------------------------+-----+
| +      | _acme-challenge.gatsbytest.ru.   | CNAME | fpq2gpi42teg********.cm.yandexcloud.net. | 600 |
+--------+----------------------------------+-------+------------------------------------------+-----+

      Подробнее о команде yc dns zone add-records читайте в справочнике CLI.

      Проверка прав на домены может занять от нескольких минут до нескольких дней — дождитесь ее успешного завершения. В результате сертификат будет выпущен и перейдет в статус Issued.

    3. Убедитесь, что статус сертификата изменился на Issued:

      yc certificate-manager certificate get \
  --name gatsbytestcert

      Результат:

      id: fpqr2j0sdb1n********
folder_id: b1gt6g8ht345********
created_at: "2023-12-24T16:38:02.206Z"
name: gatsbytestcert
type: MANAGED
domains:
  - gatsbytest.ru
status: ISSUED
issuer: CN=R3,O=Let's Encrypt,C=US
serial: 4b7d7f0968097ae1a7707854a80********
updated_at: "2023-12-24T16:46:03.578Z"
issued_at: "2023-12-24T16:46:03.578Z"
not_after: "2024-03-23T15:44:59Z"
not_before: "2023-12-24T15:45:00Z"

  1. Добавьте в сервис Certificate Manager сертификат от Let's Encrypt® для вашего домена, который будет использоваться веб-сайтом.

    Чтобы добавить сертификат, воспользуйтесь методом REST API requestNew для ресурса Certificate или вызовом gRPC API CertificateService/RequestNew.

    В списке сертификатов появится новый сертификат со статусом Validating. Этот статус означает, что запрос на выпуск сертификата от Let's Encrypt® создан, и для его успешной обработки вам необходимо пройти процедуру проверки прав на домен.

  2. Для успешного выпуска сертификата пройдите проверку прав на домен.

    Чтобы получить информацию, необходимую для прохождения процедуры проверки прав на домен, воспользуйтесь методом REST API get для ресурса Certificate или вызовом gRPC API CertificateService/Get с флагом view=FULL.

    Чтобы создать ресурсную запись CNAME в зоне DNS, воспользуйтесь методом REST API updateRecordSets для ресурса DnsZone или вызовом gRPC API DnsZoneService/UpdateRecordSets.

Настройте доступ к бакету по HTTPS

Добавьте сертификат в настройках бакета:

  1. В консоли управления выберите каталог.
  2. Выберите сервис Object Storage.
  3. Нажмите на имя необходимого бакета, в данном примере это gatsbytest.ru.
  4. На панели слева выберите Безопасность.
  5. Перейдите на вкладку HTTPS.
  6. Нажмите кнопку Настроить.
  7. В поле Источник выберите Certificate Manager.
  8. В поле Сертификат выберите сертификат в появившемся списке.
  9. Нажмите кнопку Сохранить.

Выполните команду:

yc storage bucket set-https \
  --name <имя_бакета> \
  --certificate-id <идентификатор_сертификата>

Где:

  • --name — имя бакета, в данном примере это gatsbytest.ru;
  • --certificate-id — идентификатор сертификата в Certificate Manager.

Результат:

source_type: SOURCE_TYPE_MANAGED_BY_CERTIFICATE_MANAGER
certificate_id: fpqe2g0hfr0e********

Чтобы привязать к бакету TLS-сертификат Certificate Manager, воспользуйтесь методом REST API setHTTPSConfig для ресурса Bucket или вызовом gRPC API BucketService/SetHTTPSConfig.

Примечание

Для активации настроек может потребоваться некоторое время.

Создайте сайт локально

Для целей тестирования создайте на вашем локальном компьютере сайт, используя шаблон из библиотеки Gatsby Starter Library.

  1. Чтобы создать сайт, выполните команды:

    sudo npm install -g gatsby-cli
gatsby new my-gatsby-project https://github.com/gatsbyjs/gatsby-starter-blog

  2. Перейдите в папку сайта:

    cd my-gatsby-project

  3. Скомпилируйте сайт для локального доступа:

    gatsby develop

    Дождитесь выполнения команды.

  4. Убедитесь, что сайт доступен по адресу http://localhost:8000.

Загрузите сайт в бакет

Чтобы собрать и загрузить рабочую версию сайта в бакет, воспользуйтесь консольной утилитой AWS CLI и специальным плагином S3 из набора встроенных плагинов Gatsby.

Установите плагин S3

  1. На вашем локальном компьютере перейдите в папку сайта my-gatsby-project и выполните команду:

    npm i gatsby-plugin-s3

  2. Откройте файл gatsby-config.js и добавьте декларацию плагина в секцию plugins:

    plugins: [
    {
      resolve: 'gatsby-plugin-s3',
      options: {
        bucketName: '<имя_бакета>',
        region: 'us-east-1',
        customAwsEndpointHostname: 'storage.yandexcloud.net'
      }
    },
    ...
]

    Где bucketName — имя бакета, в данном примере gatsbytest.ru.

    Примечание

    Не меняйте значение региона, это может привести к ошибке.

  3. Откройте файл package.json и добавьте запись deploy в секцию scripts:

    "scripts": {
    "deploy": "gatsby-plugin-s3 deploy --yes",
    ...
}

Загрузите сайт в бакет

  1. Скомпилируйте сайт, выполнив команду:

    sudo npm run build

  2. Дождитесь окончания процесса компиляции и загрузите сайт в бакет, выполнив команду:

    npm run deploy

Проверьте результат

По окончании загрузки убедитесь, что сайт доступен по доменному имени по защищенному протоколу. Для этого перейдите в браузере по адресу https://<имя_бакета>. В данном примере https://gatsbytest.ru.

Как удалить созданные ресурсы

Чтобы остановить работу и перестать платить за созданные ресурсы:

  1. Удалите все объекты из бакета.
  2. Удалите бакет.
  3. При необходимости удалите ресурсные записи и доменную зону.
  4. При необходимости удалите TLS-сертификат.
Предыдущая
Загрузка данных из Yandex Managed Service for YDB с помощью Yandex Data Transfer
Следующая
Хранение статического ключа доступа в секрете Yandex Lockbox