[Документация Yandex Cloud](../../index.md) > [Практические руководства](../index.md) > Прикладные решения > Создание сайта > Установка Gatsby с помощью Cloud Apps # Установка Gatsby с помощью Cloud Apps {% note warning %} Часть ресурсов, необходимых для прохождения практического руководства, доступны только в [регионе Россия](../../overview/concepts/region.md). {% endnote %} С помощью этого руководства вы установите и настроите статический сайт на [Gatsby](https://www.gatsbyjs.com/) — фреймворке для создания статических и гибридных сайтов — используя сервис [Cloud Apps](../../cloud-apps/index.md). Приложение развернет сайт в [Object Storage](../../storage/index.md) и настроит доступ по домену с автоматическим выпуском SSL-сертификатов. {% note info %} Для работы с репозиторием в руководстве используется платформа [SourceCraft](https://sourcecraft.dev). Конфигурационные файлы для сайта соответствуют спецификации платформы. Предварительно ознакомьтесь с [документацией](https://sourcecraft.dev/portal/docs/ru/) по работе с SourceCraft. {% endnote %} Чтобы установить Gatsby: 1. [Подготовьте облако к работе](#before-you-begin). 1. [Настройте DNS-зону](#configure-dns). 1. [Установите Gatsby с помощью Cloud Apps](#install-gatsby). 1. [Подготовьте репозиторий сайта](#prepare-repo). 1. [Проверьте результат](#check-result). Если созданные ресурсы вам больше не нужны, [удалите их](#clear-out). ## Подготовьте облако к работе {#before-you-begin} Зарегистрируйтесь в Yandex Cloud и создайте [платежный аккаунт](../../billing/concepts/billing-account.md): 1. Перейдите в [консоль управления](https://kz.console.yandex.cloud), затем войдите в Yandex Cloud или зарегистрируйтесь. 1. На странице **[Yandex Cloud Billing](https://kz.console.yandex.cloud/billing)** убедитесь, что у вас подключен платежный аккаунт, и он находится в [статусе](../../billing/concepts/billing-account-statuses.md) `ACTIVE` или `TRIAL_ACTIVE`. Если платежного аккаунта нет, [создайте его](../../billing/quickstart/index.md) и [привяжите](../../billing/operations/pin-cloud.md) к нему облако. Если у вас есть активный платежный аккаунт, вы можете создать или выбрать [каталог](../../resource-manager/concepts/resources-hierarchy.md#folder), в котором будет работать ваша инфраструктура, на [странице облака](https://kz.console.yandex.cloud/cloud). [Подробнее об облаках и каталогах](../../resource-manager/concepts/resources-hierarchy.md). ### Необходимые платные ресурсы {#paid-resources} В стоимость поддержки создаваемой инфраструктуры входят: * плата за использование публичной DNS-зоны и за публичные DNS-запросы ([тарифы Yandex Cloud DNS](../../dns/pricing.md)); * плата за хранение данных в Yandex Object Storage, операции с ними и исходящий трафик ([тарифы Yandex Object Storage](../../storage/pricing.md)); * плата за хранение секретов в Yandex Lockbox ([тарифы Yandex Lockbox](../../lockbox/pricing.md)). ## Настройте DNS-зону {#configure-dns} Перед установкой приложения вам необходимо создать публичную DNS-зону и делегировать на нее домен. Подробнее о делегировании домена читайте в [инструкции](../../troubleshooting/dns/how-to/delegate-public-zone.md). {% list tabs group=instructions %} - Консоль управления {#console} 1. [Перейдите](https://kz.console.yandex.cloud/link/dns/) в сервис **Cloud DNS**. 1. Нажмите кнопку **Создать зону**. 1. Задайте настройки зоны DNS: * **Зона** — укажите ваш зарегистрированный домен, например `example.com.` (с точкой в конце). * **Тип** — выберите `Публичная`. * **Имя** — укажите имя зоны, например `example-zone`. 1. Нажмите кнопку **Создать**. 1. Делегируйте домен на серверы Yandex Cloud. Для этого в личном кабинете вашего регистратора доменных имен укажите адреса DNS-серверов `ns1.yandexcloud.kz` и `ns2.yandexcloud.kz`. Делегирование происходит не сразу. Серверы интернет-провайдеров обновляют записи до 24 часов. Проверить делегирование домена можно с помощью [сервиса Whois](https://www.reg.ru/whois/check_site) или утилиты `dig`: ```bash dig +short NS example.com ``` Результат: ```text ns2.yandexcloud.kz. ns1.yandexcloud.kz. ``` - Yandex Cloud CLI {#cli} Если у вас еще нет интерфейса командной строки Yandex Cloud (CLI), [установите и инициализируйте его](../../cli/quickstart.md#install). 1. Создайте публичную зону DNS: ```bash yc dns zone create \ --name example-zone \ --zone example.com. \ --public-visibility=true ``` Где `--zone` — имя вашего домена, например `example.com.`. Значение параметра `--zone` должно заканчиваться точкой. Результат: ```text id: dns39gihj0ef******** folder_id: b1g681qpemb4******** created_at: "2024-09-09T15:23:34.919887Z" name: example-zone zone: example.com. public_visibility: {} ``` Подробнее о команде `yc dns zone create` читайте в [справочнике CLI](../../cli/cli-ref/dns/cli-ref/zone/create.md). 1. Делегируйте домен на серверы Yandex Cloud. Для этого в личном кабинете вашего регистратора доменных имен укажите адреса DNS-серверов `ns1.yandexcloud.kz` и `ns2.yandexcloud.kz`. Делегирование происходит не сразу. Серверы интернет-провайдеров обновляют записи в течение 24 часов. - API {#api} Чтобы создать публичную зону DNS, воспользуйтесь методом REST API [create](../../dns/api-ref/DnsZone/create.md) для ресурса [DnsZone](../../dns/api-ref/DnsZone/index.md) или вызовом gRPC API [DnsZoneService/Create](../../dns/api-ref/grpc/DnsZone/create.md). Делегируйте домен на серверы Yandex Cloud. Для этого в личном кабинете вашего регистратора доменных имен укажите адреса DNS-серверов `ns1.yandexcloud.kz` и `ns2.yandexcloud.kz`. {% endlist %} ## Установите Gatsby с помощью Cloud Apps {#install-gatsby} Установите статический сайт на Gatsby с помощью Cloud Apps. Приложение развернет сайт в [Object Storage](../../storage/index.md) и настроит доступ по домену. {% list tabs group=instructions %} - Консоль управления {#console} 1. [Перейдите](https://kz.console.yandex.cloud/link/cloud-apps/) в сервис Cloud Apps. 1. Нажмите кнопку **Установить приложение**. 1. Выберите приложение **Статический сайт в Object Storage**. 1. Задайте параметры приложения: #| || **Параметр** | **Обязательный** | **Значение по умолчанию** | **Описание** || || **Имя** | Да | — | Название экземпляра приложения. || || **Описание** | — | — | Описание экземпляра приложения. || || **Сервисный аккаунт** | Да | — | Сервисный аккаунт, от имени которого будет происходить установка приложения. Сервисный аккаунт должен иметь роли `storage.admin`, `lockbox.admin`, `certificate-manager.admin` и `dns.admin` на каталог. Чтобы сервисный аккаунт с необходимыми правами создался во время установки приложения, выберите `Автоматически`. || || **DNS-зона** | Да | — | Идентификатор DNS-зоны, в которой будет находиться домен сайта. || || **Поддомен** | — | Пустой | Домен, на котором будет доступен статический сайт на Gatsby. Формируется добавлением поддомена к домену DNS-зоны: `site.example.com` или `example.com`, если поддомен не указан. || || **Конфигурация веб-сайта** | Да | — | Выберите в выпадающем списке `Gatsby`. || || **Максимальный размер бакета** | — | `10` | Максимальный размер бакета Object Storage для статических файлов сайта в ГБ. || |# 1. Нажмите кнопку **Установить**. Установка приложения займет несколько минут. В процессе установки будут созданы бакет в Object Storage, записи в DNS-зоне для поддомена сайта и необходимые ресурсы для доступа по HTTPS. Дождитесь завершения установки. {% endlist %} ## Подготовьте репозиторий {#prepare-repo} После установки приложения подготовьте репозиторий в SourceCraft с исходным кодом сайта: 1. Если у вас еще не установлен Git, установите его по [инструкции](https://git-scm.com/book/ru/v2/Введение-Установка-Git). 1. [Создайте](https://sourcecraft.dev/portal/docs/ru/sourcecraft/operations/repo-create#create-from-template) репозиторий из [шаблона `cloudapp-gatsby`](https://sourcecraft.dev/yandex-cloud-examples/cloudapp-gatsby). 1. На локальном компьютере перейдите в рабочую директорию, где будет размещен проект сайта. 1. [Клонируйте](https://sourcecraft.dev/portal/docs/ru/sourcecraft/operations/repo-clone) репозиторий, созданный из шаблона. 1. Перейдите в склонированный репозиторий. Дальнейшую работу (настройку окружения, сборку и выгрузку) выполняйте внутри этого каталога. ## Разверните сайт {#deploy-site} Откройте файл `README` в корне репозитория и выполните описанные там шаги: 1. [Настройте](https://sourcecraft.dev/portal/docs/ru/sourcecraft/operations/service-connections) сервисное подключение. Укажите сервисный аккаунт, созданный при установке приложения. Имя сервисного подключения, заданное при его создании, потребуется для дальнейшей настройки. 1. Обновите конфигурационные файлы в редакторе, например в Visual Studio Code: 1. Файл `gatsby-config.ts`: ```typescript const config: GatsbyConfig = { siteMetadata: { title: `<название_сайта>`, siteUrl: `https://<домен>`, }, // ... plugins: [ { resolve: `gatsby-plugin-s3`, options: { bucketName: "<имя_бакета>", region: "ru-central1", protocol: "https", hostname: "storage.yandexcloud.net", customAwsEndpointHostname: 'storage.yandexcloud.net' }, } ], } ``` Где: * `<название_сайта>` — название вашего сайта. * `<домен>` — домен, на котором будет доступен сайт. Обычно совпадает с именем бакета, созданного при установке приложения. * `<имя_бакета>` — имя бакета, автоматически созданного во время установки приложения. 1. Файл `.sourcecraft/ci.yaml`: ```yaml tokens: SERVICE_CONNECTION: service_connection: <сервисное_подключение> scope: org workflows: gatsby-deploy: env: DOMAIN_NAME: <домен> ``` Где: * `<сервисное_подключение>` — имя сервисного подключения. * `<домен>` — домен, на котором будет доступен сайт. Обычно совпадает с именем бакета, созданного при установке приложения. * `scope` — уровень сервисного подключения. Возможные значения: * `repo` — для подключений на уровне репозитория. * `org` — для подключений на уровне организации. 1. Запустите пайплайн CI/CD для развертывания статического сайта. Для этого последовательно выполните команды в ветку `main`: ```bash git commit -a ``` Введите название коммита. ```bash git push ``` После успешного выполнения пайплайна сайт станет доступен по адресу `https://<домен>`. Результат сборки автоматически загрузится в бакет Object Storage. ## Настройте сайт {#configure-site} 1. Установите [Node.js](https://nodejs.org/) нужной версии для локальной разработки. 1. Установите зависимости проекта: ```bash npm install ``` 1. Запустите dev-сервер: ```bash npm run develop ``` Сайт будет доступен по адресу `http://localhost:8000`. 1. Для сборки продакшен-версии выполните команду: ```bash npm run build ``` 1. Для локального просмотра продакшен-сборки выполните команду: ```bash npm run serve ``` 1. Чтобы опубликовать изменения, запустите пайплайн CI/CD, как описано в разделе [Разверните сайт](#deploy-site). ## Проверьте результат {#check-result} Убедитесь, что ваш статический сайт на Gatsby успешно опубликован и доступен по публичному домену: 1. Откройте в браузере домен или поддомен, который указывали при установке приложения (например, `https://site.example.com`). 1. Проверьте, что открывается главная страница вашего Gatsby-сайта и работает его навигация. 1. Если в шаблоне была добавлена тестовая страница или раздел, перейдите по соответствующей ссылке и убедитесь, что она также открывается по публичному URL. Если сайт открывается, все изображения, стили и страницы загружаются корректно — развертывание выполнено успешно. ## Как удалить созданные ресурсы {#clear-out} Чтобы остановить работу и перестать платить за созданные ресурсы: 1. [Удалите](../../storage/operations/objects/delete-all.md) все объекты из бакета Object Storage, созданного при установке приложения. 1. Удалите приложение **Статический сайт в Object Storage** в Cloud Apps: 1. В [консоли управления](https://kz.console.yandex.cloud) выберите каталог, в котором установлено приложение. 1. В списке сервисов выберите **Cloud Apps**. 1. Найдите в списке приложение **Статический сайт в Object Storage**. 1. Нажмите на значок ![image](../../_assets/console-icons/ellipsis.svg) рядом с приложением и выберите **Удалить**. 1. Подтвердите удаление и дождитесь завершения. Пустой бакет и остальные ресурсы этого экземпляра приложения удаляются вместе с ним. 1. Если вы создавали сервисный аккаунт при установке приложения, [удалите](../../iam/operations/sa/delete.md) его. 1. [Удалите](../../dns/operations/zone-delete.md) публичную DNS-зону. 1. Удалите сервисное подключение SourceCraft: 1. Откройте [главную страницу](https://sourcecraft.dev) SourceCraft. 1. На вкладке ![image](../../_assets/console-icons/house.svg) **Домой** в секции ![image](../../_assets/console-icons/layout-tabs.svg) **Ваша мастерская** перейдите в раздел ![image](../../_assets/console-icons/archive.svg) **Репозитории**. 1. Выберите репозиторий, созданный из шаблона `cloudapp-gatsby`. 1. В разделе ![image](../../_assets/console-icons/gear.svg) **Настройки репозитория** перейдите в секцию ![image](../../_assets/console-icons/cloud-nut-hex.svg) **Сервисные подключения** и выберите нужное сервисное подключение. 1. В правом верхнем углу нажмите ![image](../../_assets/console-icons/trash-bin.svg) **Удалить** и подтвердите удаление. 1. [Удалите](https://sourcecraft.dev/portal/docs/ru/sourcecraft/operations/repo-delete) репозиторий, созданный из шаблона в SourceCraft.