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

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

Статья создана
Обновлена 29 августа 2024 г.

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

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

  1. Подготовьте облако к работе.
  2. Зарегистрируйте доменное имя.
  3. Создайте сайт локально.
  4. Создайте и настройте бакет Object Storage.
  5. Загрузите сайт в бакет.
  6. Настройте доступ по HTTPS-протоколу.

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

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

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

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

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

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

В стоимость поддержки инфраструктуры входит плата за хранение данных в 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.

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

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

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

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

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

    gatsby develop

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

    http://localhost:8000

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

Создайте бакет

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

  1. В консоли управления выберите каталог, в котором хотите создать бакет.
  2. Выберите сервис Object Storage.
  3. Нажмите кнопку Создать бакет.
  4. На странице создания бакета:
    1. В качестве имени бакета укажите зарегистрированное вами доменное имя, например gatsbytest.ru.
    2. Для целей тестирования укажите минимальный размер бакета.
    3. Выберите тип доступа Публичный для всех операций.
    4. Нажмите кнопку Создать бакет.

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

  1. Создайте бакет в каталоге по умолчанию:

    yc storage bucket create \
   --name <имя_бакета> \
   --default-storage-class <класс_хранилища> \
   --max-size <максимальный_размер_бакета> \
   --public-read \
   --public-list \
   --public-config-read

    Где:

    • --name — имя бакета. Укажите зарегистрированное вами доменное имя, например gatsbytest.ru.
    • --default-storage-class — класс хранилища. Доступные значения:
      • standard — стандартное хранилище;
      • cold — холодное хранилище;
      • ice — ледяное хранилище.
    • --max-size — максимальный размер бакета в байтах. 0 — без ограничений.
    • --public-read — флаг для включения публичного доступа на чтение объектов в бакете.
    • --public-list — флаг для включения публичного доступа на просмотр списка объектов в бакете.
    • --public-config-read — флаг для включения публичного доступа на чтение настроек в бакете.

Если у вас еще нет интерфейса командной строки AWS CLI, установите и сконфигурируйте его.

В терминале выполните команду, указав имя бакета и эндпоинт Object Storage:

aws --endpoint-url=https://storage.yandexcloud.net \
   s3 mb s3://<имя_бакета>

Где:

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

Если у вас еще нет Terraform, установите его и настройте провайдер Yandex Cloud.

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

    terraform {
  required_providers {
    yandex = {
      source = "yandex-cloud/yandex"
    }
  }
  required_version = ">= 0.13"
}

provider "yandex" {
  token     = "<IAM-_или_OAuth-токен>"
  cloud_id  = "<идентификатор_облака>"
  folder_id = "<идентификатор_каталога>"
  zone      = "ru-central1-a"
}

resource "yandex_iam_service_account" "sa" {
  name = "<имя_сервисного_аккаунта>"
}

// Назначение роли сервисному аккаунту
resource "yandex_resourcemanager_folder_iam_member" "sa-editor" {
  folder_id = "<идентификатор_каталога>"
  role      = "storage.editor"
  member    = "serviceAccount:${yandex_iam_service_account.sa.id}"
}

// Создание статического ключа доступа
resource "yandex_iam_service_account_static_access_key" "sa-static-key" {
  service_account_id = yandex_iam_service_account.sa.id
  description        = "static access key for object storage"
}

// Создание бакета с использованием ключа
resource "yandex_storage_bucket" "test" {
  access_key = yandex_iam_service_account_static_access_key.sa-static-key.access_key
  secret_key = yandex_iam_service_account_static_access_key.sa-static-key.secret_key
  bucket     = "<имя_бакета>"
}

    Где:

    • yandex_iam_service_account — описание сервисного аккаунта, который создаст бакет и будет работать с ним:
      • name — имя сервисного аккаунта.
    • yandex_storage_bucket — описание бакета:
      • bucket — имя бакета. Укажите зарегистрированное вами доменное имя, например gatsbytest.ru.

  2. Проверьте корректность конфигурационных файлов.

    1. В командной строке перейдите в папку, где вы создали конфигурационный файл.
    2. Выполните проверку с помощью команды: 
      terraform plan

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

  3. Разверните облачные ресурсы.

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

      terraform apply

    2. Подтвердите создание ресурсов.

    После этого в указанном каталоге будут созданы все требуемые ресурсы. Проверить появление ресурсов и их настройки можно в консоли управления.

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

Настройте бакет

Чтобы настроить бакет на хостинг статического сайта:

  1. В консоли управления перейдите в бакет, для которого хотите настроить хостинг.
  2. Перейдите на вкладку Веб-сайт.
  3. В разделе Хостинг:
    • в поле Главная страница укажите абсолютный путь к файлу главной страницы сайта. Для сайта из шаблона Gatsby укажите index.html;
    • при желании в поле Страница ошибки укажите абсолютный путь к файлу, который будет отображаться при ошибках 4хх. Для сайта из шаблона Gatsby укажите 404.html.
  4. Нажмите кнопку Сохранить.

  1. Создайте файл с настройками хостинга в формате JSON. Например:

    {
  "index": "index.html",
  "error": "404.html"
}

    Где:

    • index — абсолютный путь к файлу главной страницы сайта.
    • error — абсолютный путь к файлу, который будет отображаться пользователю при ошибках 4хх.

  2. Выполните следующую команду:

    yc storage bucket update --name <имя_бакета> \
  --website-settings-from-file <путь_к_файлу>

    Где:

    • --name — имя бакета, в данном примере gatsbytest.ru.
    • --website-settings-from-file — путь к файлу с настройками хостинга.

Чтобы убедиться, что настройки хостинга появились в описании бакета, выполните команду:

yc storage --name <имя_бакета> bucket get --full

Результат:

website_settings:
  index: index.html
  error: error404.html
  redirect_all_requests: {}

Если у вас еще нет Terraform, установите его и настройте провайдер Yandex Cloud.

Перед началом работы, получите статические ключи доступа — секретный ключ и идентификатор ключа, используемые для аутентификации в Object Storage.

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

    provider "yandex" {
  token     = "<OAuth>"
  cloud_id  = "<идентификатор_облака>"
  folder_id = "<идентификатор_каталога>"
  zone      = "ru-central1-a"
}

resource "yandex_storage_bucket" "test" {
  access_key = "<идентификатор_статического_ключа>"
  secret_key = "<секретный_ключ>"
  bucket     = "<имя_бакета>"
  acl        = "public-read"

  website {
    index_document = "index.html"
    error_document = "404.html"
  }

}

    Где:

    • access_key — идентификатор статического ключа доступа.
    • secret_key — значение секретного ключа доступа.
    • bucket — имя бакета.
    • acl — параметры управления доступом ACL.
    • website — параметры веб-сайта:
      • index_document — абсолютный путь к файлу главной страницы сайта. Обязательный параметр.
      • error_document — абсолютный путь к файлу, который будет отображаться пользователю при ошибках 4хх. Необязательный параметр.

  2. Проверьте корректность конфигурационных файлов.

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

    2. Выполните проверку с помощью команды:

      terraform plan

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

  3. Разверните облачные ресурсы.

    1. Выполните команду:
    terraform apply
    1. Подтвердите создание ресурсов.

    После этого в указанном каталоге будут созданы все требуемые ресурсы. Проверить появление ресурсов и их настройки можно в консоли управления.

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

Привяжите доменное имя

Создайте на DNS-сервере публичную зону DNS и ресурсную запись, которая связывает ваше доменное имя и бакет:

  1. В консоли управления перейдите в бакет, для которого хотите использовать собственный домен.
  2. Перейдите на вкладку Веб-сайт.
  3. В разделе Хостинг в блоке Домены в Cloud DNS нажмите кнопку Создать запись.
  4. В открывшемся окне нажмите кнопку Создать зону и выберите доменную зону, которая соответствует имени бакета, например gatsbytest.ru. (с точкой в конце). Нажмите кнопку Создать.
  5. Нажмите кнопку Создать.
  6. Нажмите кнопку Сохранить.

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

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

Настройте AWS CLI

  1. Для установки AWS CLI воспользуйтесь инструкцией на сайте производителя.

  2. Создайте сервисный аккаунт.

  3. Назначьте сервисному аккаунту роли, необходимые для вашего проекта. Подробнее о ролях см. в документации Identity and Access Management.

  4. Создайте статический ключ доступа.

  5. Для настройки AWS CLI введите команду aws configure. Команда запросит значения для следующих параметров:

    • AWS Access Key ID — идентификатор статического ключа, созданного на предыдущем шаге.
    • AWS Secret Access Key — содержимое статического ключа.
    • Default region name — регион ru-central1.

    Примечание

    Для работы с Object Storage всегда указывайте регион — ru-central1.
    Неверно указанный регион приведет к ошибке авторизации.

  6. Значения остальных параметров оставьте без изменений.

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

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

    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'
     }
   },
   ...
]

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

    Примечание

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

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

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

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

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

    sudo npm run build

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

    sudo npm run deploy

  3. По окончании загрузки убедитесь, что сайт доступен по доменному имени, перейдя в браузере по адресу:

    http://<имя_бакета>

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

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

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

Получите сертификаты от Let's Encrypt®

  1. Добавьте новый сертификат от Let's Encrypt®:

    1. В консоли управления выберите каталог, в который будет добавлен сертификат.
    2. В списке сервисов выберите Certificate Manager.
    3. Нажмите кнопку Добавить сертификат.
    4. В открывшемся меню выберите Сертификат от Let's Encrypt.
    5. В открывшемся окне в поле Имя введите имя сертификата.
    6. (Опционально) В поле Описание введите описание сертификата.
    7. В поле Домены введите имя бакета, в котором размещен сайт. В данном примере это gatsbytest.ru.
    8. Выберите тип проверки прав на домен: HTTP.
    9. Нажмите кнопку Создать.

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

      yc certificate-manager certificate request \
   --name gatsbycert \
   --domains gatsbytest.ru

      Где:

      • --name — имя сертификата.
      • --domains — домены сертификатов.

    1. Опишите в конфигурационном файле Terraform параметры ресурса, который необходимо создать:

      resource "yandex_cm_certificate" "le-certificate" {
   name    = "<имя_сертификата>"
   domains = ["<домен>"]

   managed {
   challenge_type = "HTTP"
   }
}

      Где:

      • domains — список доменов, для которых нужно создать сертификат. В данном примере это gatsbytest.ru.
      • challenge_type — тип проверки прав на домен, которую нужно пройти владельцу домена.

    2. Создайте ресурсы:

      1. В терминале перейдите в папку, где вы отредактировали конфигурационный файл.

      2. Проверьте корректность конфигурационного файла с помощью команды:

        terraform validate

        Если конфигурация является корректной, появится сообщение:

        Success! The configuration is valid.

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

        terraform plan

        В терминале будет выведен список ресурсов с параметрами. На этом этапе изменения не будут внесены. Если в конфигурации есть ошибки, Terraform на них укажет.

      4. Примените изменения конфигурации:

        terraform apply

      5. Подтвердите изменения: введите в терминале слово yes и нажмите Enter.

    После этого в указанном каталоге будет создан сертификат. Проверить появление сертификата и его настройки можно в консоли управления или с помощью команды CLI:

    yc certificate-manager certificate get <имя_сертификата>

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

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

  2. Получите информацию для прохождения проверки прав на домен:

    1. В консоли управления выберите каталог, в который был добавлен сертификат.
    2. В списке сервисов выберите Certificate Manager.
    3. Выберите в списке сертификат, для которого необходимо пройти процедуру проверки и нажмите на него.
    4. В открывшемся окне в блоке Проверка прав на домены будет указана информация для прохождения процедуры проверки прав — Ссылка на размещение файла и Содержимое.

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

      yc certificate-manager certificate get \
  --id fpq6gvvm6piu******** \
  --full

      Где:

      • --id — идентификатор сертификата.
      • --full — показать список активных процедур проверки прав на домены.

      Результат:

      id: fpq6gvvm6piu********
folder_id: b1g7gvsi89m3********
created_at: "2024-03-27T08:49:11.533771Z"
name: gatsbycert
type: MANAGED
domains:
- gatsbytest.ru
status: VALIDATING
updated_at: "2020-09-15T08:49:11.533771Z"
challenges:
- domain: gatsbytest.ru
  type: HTTP
  created_at: "2024-03-27T12:20:32.326Z"
  updated_at: "2024-03-27T12:30:16.709Z"
  status: PENDING
  message: Create a file in your web server's base directory.
  http_challenge:
    url: http://gatsbytest.ru/.well-known/acme-challenge/3LiH-nrTC7GdMbRgVqttEvdTODeNeaD0TtX********
    content: 3LiH-nrTC7GdMbRgVqttEvdTODeNeaD0TtXteWgtAH8.ZHCju15sJiKBwT8G5FTl7UtfmJWp1gKNYYP********

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

  3. На локальном компьютере в папке сайта gatsby-starter-blog создайте вложенные папки для размещения файла валидации. Для этого выполните:

    mkdir .well-known
cd .well-known
mkdir acme-challenge

  4. Создайте файл валидации на основании полученной информации. Для этого из ссылки размещения файла валидации скопируйте последний компонент URL и создайте файл с данным именем в папке acme-challenge:

    cd acme-challenge
nano <имя_файла>

    Где <имя_файла> — последний компонент ссылки размещения файла валидации.

    Например, если ссылка имеет вид:

    http://gatsbytest.ru/.well-known/acme-challenge/3LiH-nrTC7GdMbRgVqttEvdTODeNeaD0TtX********

    Выполните:

    nano 3LiH-nrTC7GdMbRgVqttEvdTODeNeaD0TtX********

    Сохраните в файл содержимое файла валидации.

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

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

  1. Добавьте сертификат в настройках HTTPS-доступа бакета:

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

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

    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********

    Чтобы выбрать сертификат из Certificate Manager:

    1. Откройте файл конфигурации Terraform и добавьте блок https в описание бакета:

      ...
resource "yandex_storage_bucket" "b" {
  bucket = "<имя_бакета>"

  https {
    certificate_id = "<идентификатор_сертификата>"
  }
}
...

      Где:

      • bucket — имя бакета, в данном примере это gatsbytest.ru;
      • certificate_id — идентификатор сертификата в Certificate Manager, который будет использован для бакета.

    2. Проверьте конфигурацию командой:

      terraform validate

      Если конфигурация является корректной, появится сообщение:

      Success! The configuration is valid.

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

      terraform plan

      В терминале будет выведен список ресурсов с параметрами. На этом этапе изменения не будут внесены. Если в конфигурации есть ошибки, Terraform на них укажет.

    4. Примените изменения конфигурации:

      terraform apply

    5. Подтвердите изменения: введите в терминал слово yes и нажмите Enter.

      Проверить выбранный сертификат можно в консоли управления.

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

  2. Проверьте, что сайт теперь доступен по защищенному протоколу, перейдя по адресу:

https://<имя_бакета>

Где <имя_бакета> — имя бакета, в примере это gatsbytest.ru

Примечание

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

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

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

  1. Удалите все объекты из бакета.
  2. Удалите бакет.
Предыдущая
Организация виртуального хостинга
Следующая
Обзор
В этой статье: