Установка Gatsby с помощью Cloud Apps

С помощью этого руководства вы установите и настроите статический сайт на Gatsby — фреймворке для создания статических и гибридных сайтов — используя сервис Cloud Apps. Приложение развернет сайт в Object Storage и настроит доступ по домену с автоматическим выпуском SSL-сертификатов.

Чтобы установить Gatsby:

1. Подготовьте облако к работе.
2. Настройте DNS-зону.
3. Установите Gatsby с помощью Cloud Apps.
4. Подготовьте репозиторий сайта.
5. Проверьте результат.

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

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

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

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

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

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

Необходимые платные ресурсыНеобходимые платные ресурсы

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

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

Настройте DNS-зонуНастройте DNS-зону

Перед установкой приложения вам необходимо создать публичную DNS-зону и делегировать на нее домен. Подробнее о делегировании домена читайте в инструкции.

Установите Gatsby с помощью Cloud AppsУстановите Gatsby с помощью Cloud Apps

Установите статический сайт на Gatsby с помощью Cloud Apps. Приложение развернет сайт в Object Storage и настроит доступ по домену.

Подготовьте репозиторийПодготовьте репозиторий

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

1. Если у вас еще не установлен Git, установите его по инструкции.

2. Создайте репозиторий из шаблона cloudapp-gatsby.

3. На локальном компьютере перейдите в рабочую директорию, где будет размещен проект сайта.

4. Клонируйте репозиторий, созданный из шаблона.

5. Перейдите в склонированный репозиторий. Дальнейшую работу (настройку окружения, сборку и выгрузку) выполняйте внутри этого каталога.

Разверните сайтРазверните сайт

Откройте файл README в корне репозитория и выполните описанные там шаги:

1. Настройте сервисное подключение. Укажите сервисный аккаунт, созданный при установке приложения.

   Имя сервисного подключения, заданное при его создании, потребуется для дальнейшей настройки.

2. Обновите конфигурационные файлы в редакторе, например в Visual Studio Code:

   1. Файл gatsby-config.ts:

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

      Где:

      • <название_сайта> — название вашего сайта.
      • <домен> — домен, на котором будет доступен сайт. Обычно совпадает с именем бакета, созданного при установке приложения.
      • <имя_бакета> — имя бакета, автоматически созданного во время установки приложения.

   2. Файл .sourcecraft/ci.yaml:

      tokens:
        SERVICE_CONNECTION:
          service_connection: <сервисное_подключение>
          scope: org
      
      workflows:
        gatsby-deploy:
          env:
            DOMAIN_NAME: <домен>
      

      Где:

      • <сервисное_подключение> — имя сервисного подключения.
      • <домен> — домен, на котором будет доступен сайт. Обычно совпадает с именем бакета, созданного при установке приложения.
      • scope — уровень сервисного подключения. Возможные значения:
        • repo — для подключений на уровне репозитория.
        • org — для подключений на уровне организации.

3. Запустите пайплайн CI/CD для развертывания статического сайта. Для этого последовательно выполните команды в ветку main:

   git commit -a
   

   Введите название коммита.

   git push
   

   После успешного выполнения пайплайна сайт станет доступен по адресу https://<домен>. Результат сборки автоматически загрузится в бакет Object Storage.

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

1. Установите Node.js нужной версии для локальной разработки.

2. Установите зависимости проекта:

   npm install
   

3. Запустите dev-сервер:

   npm run develop
   

   Сайт будет доступен по адресу http://localhost:8000.

4. Для сборки продакшен-версии выполните команду:

   npm run build
   

5. Для локального просмотра продакшен-сборки выполните команду:

   npm run serve
   

6. Чтобы опубликовать изменения, запустите пайплайн CI/CD, как описано в разделе Разверните сайт.

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

Убедитесь, что ваш статический сайт на Gatsby успешно опубликован и доступен по публичному домену:

1. Откройте в браузере домен или поддомен, который указывали при установке приложения (например, https://site.example.com).

2. Проверьте, что открывается главная страница вашего Gatsby-сайта и работает его навигация.

3. Если в шаблоне была добавлена тестовая страница или раздел, перейдите по соответствующей ссылке и убедитесь, что она также открывается по публичному URL.

Если сайт открывается, все изображения, стили и страницы загружаются корректно — развертывание выполнено успешно.

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

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

1. Удалите все объекты из бакета Object Storage, созданного при установке приложения.

2. Удалите приложение Статический сайт в Object Storage в Cloud Apps:

   1. В консоли управления выберите каталог, в котором установлено приложение.
   2. В списке сервисов выберите Cloud Apps.
   3. Найдите в списке приложение Статический сайт в Object Storage.
   4. Нажмите на значок рядом с приложением и выберите Удалить.
   5. Подтвердите удаление и дождитесь завершения. Пустой бакет и остальные ресурсы этого экземпляра приложения удаляются вместе с ним.

3. Если вы создавали сервисный аккаунт при установке приложения, удалите его.

4. Удалите публичную DNS-зону.

5. Удалите сервисное подключение SourceCraft:

   1. Откройте главную страницу SourceCraft.
   2. На вкладке Домой в секции Ваша мастерская перейдите в раздел Репозитории.
   3. Выберите репозиторий, созданный из шаблона cloudapp-gatsby.
   4. В разделе Настройки репозитория перейдите в секцию Сервисные подключения и выберите нужное сервисное подключение.
   5. В правом верхнем углу нажмите Удалить и подтвердите удаление.

6. Удалите репозиторий, созданный из шаблона в SourceCraft.