Деплой frontend-приложений

Чтобы развернуть frontend-приложение, перейдите в раздел «App Platform» и нажмите кнопку «Создать» или «Добавить».

Шаг 1. Выбор приложения

В пункте «Тип» выберите вкладку «Frontend», затем нужный фреймворк и версию Node.js, необходимую для работы вашего приложения.

Шаг 2. Подключение репозитория и выбор ветки

Вы можете подключить репозиторий:

• Из своего аккаунта GitHub, GitLab или BitBucket. Кликните на название платформы, авторизуйтесь и выберите нужный репозиторий. Если вы уже авторизованы, панель сразу покажет доступные репозитории.

• По URL — укажите ссылку на репозиторий, созданный на любой платформе. Кликните «Подключите git-репозиторий по URL» (либо «Добавить аккаунт» → «Подключите git-репозиторий по URL») и укажите Git URL репозитория. Если репозиторий приватный, введите реквизиты доступа.

Подробнее о подключении репозиториев — здесь.

Выберите ветку для деплоя.

Если вы подключаете репозиторий через аккаунт, опция «Сборка по последнему выполненному коммиту» будет включена по умолчанию. В этом случае App Platform выполнит деплой по последнему коммиту и в дальнейшем будет автоматически пересобирать приложение при появлении новых коммитов в репозитории.

При необходимости вы сможете отключить автодеплой в дальнейшем. 

Если вы хотите выбрать конкретный коммит вручную, отключите эту опцию.

Шаг 3. Регион

Выберите регион размещения сервера.

Шаг 4. Конфигурация

Для всех frontend-приложений выделяется 2 ГБ NVMe-диска. Выбор конфигурации сервера не предусмотрен — для приложений — для приложений действует поресурсная тарификация.

Шаг 5. Настройка приложения

На этом этапе вы можете задать команду сборки, установить необходимые зависимости, указать директорию сборки и задать переменные окружения.

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

В разделе зависимостей можно указать системные пакеты, которые необходимы, например, для сборки проекта. Все перечисленные пакеты будут переданы в команду apt install. Если пакетов несколько — укажите их через пробел.

Команда сборки приложения всегда запускается в корне репозитория, поэтому файл package.json также должен быть размещен в корне. Если package.json находится в другой директории, ее необходимо указать в команде сборки. Например, если package.json расположен в каталоге landing, то команда сборки должна выглядеть так:

npm run --prefix landing build

Параметр «Директория сборки» не меняет директорию, из которой выполняется команда сборки. Он указывает путь (относительно корня репозитория) к директории, в которой будут находиться собранные файлы, например, index.html.

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

Все параметры можно изменить позже и перезапустить деплой с новыми настройками.

Шаг 6. Информация о приложении

Укажите имя приложения и при необходимости добавьте комментарий. Эти данные будут отображаться в панели управления.

Также выберите проект, в который нужно добавить приложение.

Эти настройки также можно изменить в дальнейшем.

Шаг 7. Деплой

Нажмите «Заказать». Как только процесс начнется, на вкладке «Деплой» появится лог.

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

После завершения деплоя статус приложения обновится, а в логе появится сообщение об успешном завершении.

Технический домен, привязанный по умолчанию, отображается на главной странице раздела «App Platform».

Также его можно найти во вкладке «Настройки» конкретного приложения.

Собственный домен можно привязать по нашей инструкции.

В дальнейшем App Platform будет отслеживать обновления в репозитории и, если включен автодеплой, автоматически перезапускать проект с новыми изменениями.