Больше не нужно искать работу мечты — присоединяйтесь к команде Клауда
На главную
25eb9e0a-a5a8-472a-ace7-940b8bd2adf0
Облачные сервисы

Деплой приложения Preact

Чтобы развернуть приложение, созданное на Preact, перейдите в раздел Apps и кликните на кнопку «Создать».

Пример Preact-приложения для деплоя можно найти на Гитхабе.

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

В пункте «Тип» выберите Preact.

1aa3f352 4e32 403b A4a6 3b285fa5b308

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

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

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

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

Шаг 3. Выбор ветки и коммита

517295ae 5c3b 46dd Bff5 48b5cde866a5

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

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

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

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

7690c0ce 69f7 49cb 94b3 7afdb3d18245

Шаг 4. Регион и конфигурация сервера

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

Для всех фронтенд-приложений мы предлагаем базовую конфигурацию серверов с 1 Гб NVMe и лимитом в 200 тысяч запросов в месяц.

B5717fcc C863 4a2b 8fcb Eae2e05099b5

Шаг 5. Настройка параметров сборки

D3d47373 B586 415c 8b79 915a6c0c990f

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

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

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

 

npm run --prefix landing build

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

Для сборки проекта на Preact мы по умолчанию выполним следующее:

DEBIAN_FRONTEND=noninteractive apt-get install -y nodejs build-essential hugo composer --fix-missing
apt-get remove -y cmdtest yarn
npm install --global yarn
npm install --global gatsby-cli
DEBIAN_FRONTEND=noninteractive apt-get install -y cmdtest --fix-missing
/usr/sbin/nginx -g 'daemon off;'
npm install -g @angular/cli@latest

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

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

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

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

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

5c5d10af 256b 431a 8264 02c3ec0927ac

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

Шаг 7. Деплой

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

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

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

C21af3b4 50d5 422a A25a Ab24c86d63b4

Готово!

Адрес приложения (бесплатный технический домен, привязанный к нему по умолчанию) можно найти и скопировать на главной странице раздела Apps:

A365ccce 9a2f 4a6b 8e05 84fd65086698

Либо на вкладке «Настройки» конкретного приложения:

B7bd04fe F1de 45b2 B9f0 Cd697bf2397b

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

Приложение будет доступно по 443 и 80 порту.

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

Была ли статья полезна?
Ваша оценка очень важна
Пока нет комментариев