Хостинг статического сайта на фреймворке Gatsby в Yandex Object Storage
С помощью этого руководства вы разместите свой статический сайт, созданный на фреймворке Gatsby
Чтобы создать и разместить статический сайт в Object Storage:
- Подготовьте облако к работе.
- Зарегистрируйте доменное имя.
- Создайте сайт локально.
- Создайте и настройте бакет Object Storage.
- Загрузите сайт в бакет.
- Настройте доступ по HTTPS-протоколу.
Если созданные ресурсы вам больше не нужны, удалите их.
Подготовьте облако к работе
Зарегистрируйтесь в Yandex Cloud и создайте платежный аккаунт:
- Перейдите в консоль управления
, затем войдите в Yandex Cloud или зарегистрируйтесь. - На странице Yandex Cloud Billing
убедитесь, что у вас подключен платежный аккаунт, и он находится в статусеACTIVE
илиTRIAL_ACTIVE
. Если платежного аккаунта нет, создайте его.
Если у вас есть активный платежный аккаунт, вы можете создать или выбрать каталог, в котором будет работать ваша инфраструктура, на странице облака
Подробнее об облаках и каталогах.
Необходимые платные ресурсы
В стоимость поддержки инфраструктуры входит плата за хранение данных в Object Storage, операции с ними и исходящий трафик (см. тарифы Object Storage).
Зарегистрируйте доменное имя
-
В личном кабинете вашего регистратора зарегистрируйте доменное имя, например
gatsbytest.ru
. -
Чтобы получить доступ к именам из публичной зоны, делегируйте домен. Для этого в настройках домена укажите адреса DNS-серверов
ns1.yandexcloud.net
иns2.yandexcloud.net
.Делегирование происходит не сразу. Серверы интернет-провайдеров обновляют записи до 24 часов.
Проверить делегирование домена можно с помощью сервиса Whois или утилитыdig
:dig +short NS gatsbytest.ru
Результат:
ns2.yandexcloud.net. ns1.yandexcloud.net.
Создайте сайт локально
Для целей тестирования создайте на локальном компьютере сайт, используя шаблон из библиотеки Gatsby Starter Library
-
Чтобы создать сайт, выполните команды:
npm install -g gatsby-cli gatsby new my-gatsby-project https://github.com/gatsbyjs/gatsby-starter-blog cd gatsby-starter-blog
-
Проверьте, что сайт создан. Для этого выполните команду:
gatsby develop
Дождитесь выполнения команды и убедитесь, что сайт доступен по адресу:
http://localhost:8000
Создайте и настройте бакет Object Storage
Создайте бакет
Чтобы разместить статический сайт в облаке, создайте бакет:
- В консоли управления
выберите каталог, в котором хотите создать бакет. - Выберите сервис Object Storage.
- Нажмите кнопку Создать бакет.
- На странице создания бакета:
- В качестве имени бакета укажите зарегистрированное вами доменное имя, например
gatsbytest.ru
. - Для целей тестирования укажите минимальный размер бакета.
- Выберите тип доступа Публичный для всех операций.
- Нажмите кнопку Создать бакет.
- В качестве имени бакета укажите зарегистрированное вами доменное имя, например
Если у вас еще нет интерфейса командной строки Yandex Cloud, установите и инициализируйте его.
-
Создайте бакет в каталоге по умолчанию:
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.
-
Опишите в конфигурационном файле параметры ресурсов, которые необходимо создать:
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
.
-
Проверьте корректность конфигурационных файлов.
- В командной строке перейдите в папку, где вы создали конфигурационный файл.
- Выполните проверку с помощью команды:
terraform plan
Если конфигурация описана верно, в терминале отобразится список создаваемых ресурсов и их параметров. Если в конфигурации есть ошибки, Terraform на них укажет.
-
Разверните облачные ресурсы.
-
Выполните команду:
terraform apply
-
Подтвердите создание ресурсов.
После этого в указанном каталоге будут созданы все требуемые ресурсы. Проверить появление ресурсов и их настройки можно в консоли управления
. -
Чтобы создать бакет, воспользуйтесь методом REST API create для ресурса Bucket, вызовом gRPC API BucketService/Create или методом S3 API create.
Настройте бакет
Чтобы настроить бакет на хостинг статического сайта:
- В консоли управления
перейдите в бакет, для которого хотите настроить хостинг. - Перейдите на вкладку
Веб-сайт. - В разделе Хостинг:
- в поле Главная страница укажите абсолютный путь к файлу главной страницы сайта. Для сайта из шаблона Gatsby укажите
index.html
; - при желании в поле Страница ошибки укажите абсолютный путь к файлу, который будет отображаться при ошибках 4хх. Для сайта из шаблона Gatsby укажите
404.html
.
- в поле Главная страница укажите абсолютный путь к файлу главной страницы сайта. Для сайта из шаблона Gatsby укажите
- Нажмите кнопку Сохранить.
-
Создайте файл с настройками хостинга в формате JSON. Например:
{ "index": "index.html", "error": "404.html" }
Где:
index
— абсолютный путь к файлу главной страницы сайта.error
— абсолютный путь к файлу, который будет отображаться пользователю при ошибках 4хх.
-
Выполните следующую команду:
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.
-
Опишите в конфигурационном файле параметры ресурсов, которые необходимо создать:
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хх
. Необязательный параметр.
-
Проверьте корректность конфигурационных файлов.
-
В командной строке перейдите в папку, где вы создали конфигурационный файл.
-
Выполните проверку с помощью команды:
terraform plan
Если конфигурация описана верно, в терминале отобразится список создаваемых ресурсов и их параметров. Если в конфигурации есть ошибки, Terraform на них укажет.
-
-
Разверните облачные ресурсы.
- Выполните команду:
terraform apply
- Подтвердите создание ресурсов.
После этого в указанном каталоге будут созданы все требуемые ресурсы. Проверить появление ресурсов и их настройки можно в консоли управления
.
Чтобы настроить хостинг статического сайта, воспользуйтесь методом REST API update для ресурса Bucket, вызовом gRPC API BucketService/Update или методом S3 API upload.
Привяжите доменное имя
Создайте на DNS-сервере публичную зону DNS и ресурсную запись, которая связывает ваше доменное имя и бакет:
- В консоли управления
перейдите в бакет, для которого хотите использовать собственный домен. - Перейдите на вкладку
Веб-сайт. - В разделе Хостинг в блоке Домены в Cloud DNS нажмите кнопку Создать запись.
- В открывшемся окне нажмите кнопку Создать зону и выберите доменную зону, которая соответствует имени бакета, например
gatsbytest.ru.
(с точкой в конце). Нажмите кнопку Создать. - Нажмите кнопку Создать.
- Нажмите кнопку Сохранить.
Загрузите сайт в бакет
Чтобы собрать и загрузить рабочую версию сайта в бакет, воспользуйтесь консольной утилитой AWS CLI
Настройте AWS CLI
-
Для установки AWS CLI воспользуйтесь инструкцией
на сайте производителя. -
Назначьте сервисному аккаунту роли, необходимые для вашего проекта. Подробнее о ролях см. в документации Identity and Access Management.
-
Для настройки AWS CLI введите команду
aws configure
. Команда запросит значения для следующих параметров:AWS Access Key ID
— идентификатор статического ключа, созданного на предыдущем шаге.AWS Secret Access Key
— содержимое статического ключа.Default region name
— регионru-central1
.
Примечание
Для работы с Object Storage всегда указывайте регион —
ru-central1
.
Неверно указанный регион приведет к ошибке авторизации. -
Значения остальных параметров оставьте без изменений.
Установите плагин S3
-
На локальной машине перейдите в папку сайта
gatsby-starter-blog
и выполните команду:npm i gatsby-plugin-s3
-
Откройте файл
gatsby-config.js
и добавьте декларацию плагина в секциюplugins
:plugins: [ { resolve: 'gatsby-plugin-s3', options: { bucketName: '<имя_бакета>', region: 'us-east-1', customAwsEndpointHostname: 'storage.yandexcloud.net' } }, ... ]
Где
<имя_бакета>
— имя бакета, в данном примереgatsbytest.ru
.Примечание
Не меняйте значение региона, это может привести к ошибке.
-
Откройте файл
package.json
и добавьте записьdeploy
в секциюscripts
:"scripts": { "deploy": "gatsby-plugin-s3 deploy --yes", ... }
Загрузите сайт в бакет
-
Скомпилируйте сайт, выполнив команду:
sudo npm run build
-
Дождитесь окончания процесса компиляции и загрузите сайт в бакет, выполнив команду:
sudo npm run deploy
-
По окончании загрузки убедитесь, что сайт доступен по доменному имени, перейдя в браузере по адресу:
http://<имя_бакета>
Где
<имя_бакета>
— имя бакета, в данном примереgatsbytest.ru
.
Настройте доступ по HTTPS-протоколу
Чтобы настроить доступ к сайту по защищенному протоколу, получите сертификат безопасности и настройте HTTPS-доступ к бакету.
Получите сертификаты от Let's Encrypt®
-
Добавьте новый сертификат от Let's Encrypt®:
Консоль управленияCLITerraformAPI- В консоли управления
выберите каталог, в который будет добавлен сертификат. - В списке сервисов выберите Certificate Manager.
- Нажмите кнопку Добавить сертификат.
- В открывшемся меню выберите Сертификат от Let's Encrypt.
- В открывшемся окне в поле Имя введите имя сертификата.
- (Опционально) В поле Описание введите описание сертификата.
- В поле Домены введите имя бакета, в котором размещен сайт. В данном примере это
gatsbytest.ru
. - Выберите тип проверки прав на домен:
HTTP
. - Нажмите кнопку Создать.
-
Выполните команду:
yc certificate-manager certificate request \ --name gatsbycert \ --domains gatsbytest.ru
Где:
--name
— имя сертификата.--domains
— домены сертификатов.
-
Опишите в конфигурационном файле Terraform параметры ресурса, который необходимо создать:
resource "yandex_cm_certificate" "le-certificate" { name = "<имя_сертификата>" domains = ["<домен>"] managed { challenge_type = "HTTP" } }
Где:
domains
— список доменов, для которых нужно создать сертификат. В данном примере этоgatsbytest.ru
.challenge_type
— тип проверки прав на домен, которую нужно пройти владельцу домена.
-
Создайте ресурсы:
-
В терминале перейдите в папку, где вы отредактировали конфигурационный файл.
-
Проверьте корректность конфигурационного файла с помощью команды:
terraform validate
Если конфигурация является корректной, появится сообщение:
Success! The configuration is valid.
-
Выполните команду:
terraform plan
В терминале будет выведен список ресурсов с параметрами. На этом этапе изменения не будут внесены. Если в конфигурации есть ошибки, Terraform на них укажет.
-
Примените изменения конфигурации:
terraform apply
-
Подтвердите изменения: введите в терминале слово
yes
и нажмите Enter.
-
После этого в указанном каталоге будет создан сертификат. Проверить появление сертификата и его настройки можно в консоли управления
или с помощью команды CLI:yc certificate-manager certificate get <имя_сертификата>
Чтобы добавить сертификат, воспользуйтесь методом REST API requestNew для ресурса Certificate или вызовом gRPC API CertificateService/RequestNew.
В списке сертификатов появится новый сертификат со статусом
Validating
. Этот статус означает, что запрос на выпуск сертификата от Let's Encrypt® создан, и для его успешной обработки вам необходимо пройти процедуру проверки прав на домены. - В консоли управления
-
Получите информацию для прохождения проверки прав на домен:
Консоль управленияCLIAPI- В консоли управления
выберите каталог, в который был добавлен сертификат. - В списке сервисов выберите Certificate Manager.
- Выберите в списке сертификат, для которого необходимо пройти процедуру проверки и нажмите на него.
- В открывшемся окне в блоке Проверка прав на домены будет указана информация для прохождения процедуры проверки прав — Ссылка на размещение файла и Содержимое.
-
Выполните команду:
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
. - В консоли управления
-
На локальном компьютере в папке сайта
gatsby-starter-blog
создайте вложенные папки для размещения файла валидации. Для этого выполните:mkdir .well-known cd .well-known mkdir acme-challenge
-
Создайте файл валидации на основании полученной информации. Для этого из ссылки размещения файла валидации скопируйте последний компонент URL и создайте файл с данным именем в папке
acme-challenge
:cd acme-challenge nano <имя_файла>
Где <имя_файла> — последний компонент ссылки размещения файла валидации.
Например, если ссылка имеет вид:
http://gatsbytest.ru/.well-known/acme-challenge/3LiH-nrTC7GdMbRgVqttEvdTODeNeaD0TtX********
Выполните:
nano 3LiH-nrTC7GdMbRgVqttEvdTODeNeaD0TtX********
Сохраните в файл содержимое файла валидации.
-
После успешного прохождения проверки прав на домен, статус проверки домена в блоке Проверка прав на домены изменится на
Valid
, а сертификат будет выпущен и перейдет в статусIssued
.
Настройте HTTPS-доступ к бакету
-
Добавьте сертификат в настройках HTTPS-доступа бакета:
Консоль управленияYandex Cloud CLITerraformAPI- В консоли управления
выберите каталог. - Выберите сервис Object Storage.
- Нажмите на имя необходимого бакета, в данном примере это
gatsbytest.ru
. - Перейдите на вкладку HTTPS.
- В отобразившейся панели справа нажмите кнопку Настроить.
- В поле Источник выберите Certificate Manager.
- В поле Сертификат выберите сертификат в появившемся списке.
- Нажмите кнопку Сохранить.
Выполните следующую команду:
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:
-
Откройте файл конфигурации Terraform и добавьте блок
https
в описание бакета:... resource "yandex_storage_bucket" "b" { bucket = "<имя_бакета>" https { certificate_id = "<идентификатор_сертификата>" } } ...
Где:
bucket
— имя бакета, в данном примере этоgatsbytest.ru
;certificate_id
— идентификатор сертификата в Certificate Manager, который будет использован для бакета.
-
Проверьте конфигурацию командой:
terraform validate
Если конфигурация является корректной, появится сообщение:
Success! The configuration is valid.
-
Выполните команду:
terraform plan
В терминале будет выведен список ресурсов с параметрами. На этом этапе изменения не будут внесены. Если в конфигурации есть ошибки, Terraform на них укажет.
-
Примените изменения конфигурации:
terraform apply
-
Подтвердите изменения: введите в терминал слово
yes
и нажмите Enter.Проверить выбранный сертификат можно в консоли управления
.
Чтобы выбрать сертификат из Certificate Manager, воспользуйтесь методом REST API setHTTPSConfig для ресурса Bucket или вызовом gRPC API BucketService/SetHTTPSConfig.
- В консоли управления
-
Проверьте, что сайт теперь доступен по защищенному протоколу, перейдя по адресу:
https://<имя_бакета>
Где <имя_бакета>
— имя бакета, в примере это gatsbytest.ru
Примечание
Для активации настроек может потребоваться некоторое время.
Как удалить созданные ресурсы
Чтобы остановить работу и перестать платить за созданные ресурсы: