Веб-приложение на SourceCraft Sites и Yandex Cloud Functions

В этом практическом руководстве вы развернете веб-приложение из репозитория с помощью CI/CD SourceCraft. Приложение состоит из следующих компонентов:

• Фронтенд — статический сайт на SourceCraft Sites с полем для ввода имени и кнопкой Hello.
• Бэкенд — функция Yandex Cloud Functions на Python, которая возвращает приветствие Hello, <имя>!.
• шлюз Yandex API Gateway, который принимает запросы от фронтенда и вызывает функцию.

Код приложения и конфигурация CI/CD хранятся в репозитории SourceCraft. Ресурсы Yandex Cloud создаются через сервисное подключение.

Этот сценарий подходит для прототипов и небольших проектов: вам не нужно управлять серверами, а SourceCraft Sites предоставляет бесплатный хостинг с доступом по HTTPS без загрузки собственного TLS-сертификата.

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

1. Подготовьтесь к работе.
2. Создайте сервисный аккаунт.
3. Создайте ответвление репозитория.
4. Создайте сервисное подключение.
5. Подготовьте конфигурацию и код приложения.
6. Разверните приложение.
7. Проверьте работу приложения.

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

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

1. Войдите в консоль управления Yandex Cloud или зарегистрируйтесь.

2. Убедитесь, что у вас есть платежный аккаунт в статусе ACTIVE или TRIAL_ACTIVE. Если платежного аккаунта нет, создайте его и привяжите к нему облако.

3. Выберите или создайте каталог, в котором будут размещены функция и API-шлюз.

4. Аутентифицируйтесь в SourceCraft на главной странице сервиса или зарегистрируйтесь.

5. Выберите или создайте публичную организацию в SourceCraft.

   Для создания сервисного подключения на уровне организации нужна роль Администратор организации (organization-manager.admin) или Владелец организации (organization-manager.organizations.owner).

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

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

• Плата за вызовы функции, вычислительные ресурсы и исходящий трафик (тарифы Yandex Cloud Functions).
• Плата за запросы к шлюзу и исходящий трафик (тарифы Yandex API Gateway).

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

От имени сервисного аккаунта рабочие процессы CI/CD будут создавать и удалять ресурсы, а API-шлюз — вызывать функцию.

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

2. Перейдите в сервис Identity and Access Management.

3. Нажмите Создать сервисный аккаунт.

4. В поле Имя укажите sites-web-app-sa.

5. Нажмите Добавить роль и выберите роли на каталог:

   • functions.editor — для создания, обновления, вызова и удаления функции.
   • api-gateway.editor — для создания и удаления API-шлюза.
   • iam.serviceAccounts.user — для указания сервисного аккаунта в версии функции и спецификации API-шлюза.

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

Создайте ответвление репозиторияСоздайте ответвление репозитория

Ответвление (fork) позволяет скопировать пример в свою организацию вместе с настройками CI/CD и SourceCraft Sites.

1. Откройте репозиторий примера.
2. В правом верхнем углу нажмите Ответвить.
3. Выберите подготовленную публичную организацию и укажите название репозитория, например sourcecraft-sites-web-app.
4. Выберите для ответвления основную ветку master и нажмите Создать ответвление.

В репозитории находятся:

• .sourcecraft/ci.yaml — конфигурация CI/CD с рабочими процессами create-resources и delete-resources.
• .sourcecraft/sites.yaml — конфигурация публикации сайта из директории sites в ветке release.
• sites/ — HTML и JavaScript фронтенда. Файл sites/config.js содержит адрес API-шлюза, который рабочий процесс подставляет при развертывании.
• src/index.py — код функции на Python.
• yc-scripts/ — скрипты для получения IAM-токена, создания и удаления ресурсов Yandex Cloud.

Создайте сервисное подключениеСоздайте сервисное подключение

Создайте подключение на уровне организации. Имя default-service-connection должно совпадать с указанным в .sourcecraft/ci.yaml.

1. В SourceCraft откройте организацию, в которой вы создали ответвление репозитория.

2. В разделе Настройки перейдите в секцию Сервисные подключения.

3. В правом верхнем углу нажмите Новое сервисное подключение.

4. В блоке Базовая информация укажите название default-service-connection.

5. В блоке Область применения разрешите использование для всех репозиториев.

6. В блоке Настройки Yandex Cloud выберите подготовленный каталог и сервисный аккаунт sites-web-app-sa.

   Совет

   Чтобы повторно запросить список облаков, каталогов и сервисных аккаунтов из Yandex Cloud, нажмите Синхронизировать. Это может быть полезно, если параллельно с созданием сервисного подключения вы создали каталог или сервисный аккаунт.

7. Нажмите Создать сервисное подключение и дождитесь окончания операции.

Подробнее в инструкции по настройке сервисного подключения.

Подготовьте конфигурацию и код приложенияПодготовьте конфигурацию и код приложения

Чтобы отредактировать файл в интерфейсе SourceCraft, откройте его и нажмите Редактировать. После редактирования каждого файла нажмите Сохранить изменения и выполните коммит в ветку master.

1. Откройте файл .sourcecraft/ci.yaml.

2. Убедитесь, что в блоке tokens:SERVICE_CONNECTION_WITH_TOKEN:service_connection указано название сервисного подключения, созданного ранее.

3. В блоке env проверьте имена функции (YC_FUNCTION_NAME) и API-шлюза (YC_API_GATEWAY_NAME).

   Важно

   Убедитесь, что в выбранном каталоге облака нет функции и API-шлюза с такими именами. Если они уже существуют, задайте другие имена: рабочий процесс обновляет существующую функцию, а при удалении ресурсов использует имена из этой конфигурации.

Разверните приложениеРазверните приложение

1. В своем репозитории в разделе Автоматизации перейдите в секцию CI/CD.
2. Нажмите Новый запуск.
3. Выберите ветку master для конфигурации и запуска, рабочий процесс create-resources и нажмите Запустить.
4. Дождитесь, пока рабочий процесс завершится со статусом Успех. Если процесс завершился с ошибкой, откройте его и проверьте логи кубика, который не удалось выполнить.

Рабочий процесс получает IAM-токен через сервисное подключение, создает функцию и ее версию, затем создает API-шлюз с маршрутом GET /hello/{name}. После этого он записывает адрес шлюза в файл sites/config.js и публикует файлы в ветке release.

Файл .sourcecraft/sites.yaml в основной ветке уже настроен на публикацию из ветки release:

site:
  root: sites
  ref: release

После появления этой ветки сайт публикуется автоматически в течение нескольких минут.

Проверьте работу приложенияПроверьте работу приложения

1. Откройте в браузере https://<слаг_организации>.sourcecraft.site/<название_репозитория>/.
2. В поле Name введите имя, например Alice, и нажмите Hello.
3. Убедитесь, что под кнопкой появилось приветствие Hello, Alice!.

Удалите ресурсы Yandex CloudУдалите ресурсы Yandex Cloud

1. В своем репозитории вручную запустите рабочий процесс delete-resources из ветки master.
2. Дождитесь его успешного завершения. Рабочий процесс удалит API-шлюз и функцию с именами из .sourcecraft/ci.yaml.

Вы также можете удалить API-шлюз и функцию в консоли Yandex Cloud.

Если сервисный аккаунт sites-web-app-sa больше не используется, удалите его после удаления функции и API-шлюза.

Снимите сайт с публикацииСнимите сайт с публикации

Удаление функции и API-шлюза не снимает статический сайт с публикации. После удаления облачных ресурсов, удалите файл .sourcecraft/sites.yaml из основной ветки master.

Полезные ссылкиПолезные ссылки

• Хостинг статического сайта с помощью SourceCraft Sites
• Настройка CI/CD с Cloud Functions
• Подключение к базе данных Managed Service for YDB из функции Cloud Functions на Python