На главную
- Облачные базы данных
- Хранилище S3
- Kubernetes
- Apps
- Обзор
- Принципы работы
- Подключение репозиториев
- Деплой frontend-приложений
- Деплой backend-приложений
- Деплой из Dockerfile
- Управление Apps в панели
- Частые вопросы об Apps
Деплой приложения React
Чтобы развернуть приложение, созданное на React, перейдите в раздел Apps и кликните на кнопку «Создать».
Шаг 1. Выбор приложения
В пункте «Тип» выберите React.
Шаг 2. Подключение репозитория
Вы можете подключить репозиторий:
- Из своего аккаунта GitHub, GitLab или BitBucket. Кликните на название платформы, авторизуйтесь и выберите нужный репозиторий. Если вы уже авторизованы, панель сразу покажет доступные репозитории.
- По URL, указав ссылку на репозиторий, созданный на любой платформе. Кликните «Подключите git-репозиторий по URL» (либо «Добавить аккаунт» → «Подключите git-репозиторий по URL») и укажите Git URL репозитория. Если репозиторий приватный, введите реквизиты доступа.
Подробнее о подключении репозиториев — здесь.
Шаг 3. Выбор ветки и коммита
1. Выберите ветку для деплоя.
2. По умолчанию мы включаем опцию «Сборка по последнему выполненному коммиту». В этом случае сервис Apps выполнит деплой по самому актуальному коммиту, а в дальнейшем будет автоматически пересобирать приложение при добавлении новых коммитов в репозиторий.
При необходимости вы сможете отключить автодеплой в дальнейшем.
Если вы хотите выбрать конкретный коммит вручную — отключите эту опцию.
Шаг 4. Регион и конфигурация сервера
Выберите регион размещения сервера.
Для всех фронтенд-приложений мы предлагаем базовую конфигурацию серверов с 1 Гб NVMe и лимитом в 200 тысяч запросов в месяц.
Шаг 5. Настройка параметров сборки
Сервис автоматически определит команду и директорию сборки для вашего проекта, поэтому в большинстве случаев параметры можно оставить без изменений.
Для сборки проекта на React мы по умолчанию выполним следующее:
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
npm install webpack webpack-dev-server --save
npm install react react-dom --save
npm install babel-core babel-loader babel-preset-react babel-preset-es2015 --save
Если для работы вашего проекта требуются дополнительные модули, вы можете указать дополнительную команду сборки или несколько, объединяя их через &&
.
Вы также можете задать переменные, если это требуется.
У вас будет возможность внести изменения в любые из этих параметров в дальнейшем и перезапустить деплой с новыми настройками, если потребуется.
Шаг 6. Информация о приложении
Задайте свое имя приложения, если требуется, и комментарий к нему. Это данные, которые будут отображаться в панели управления.
Также выберите, в какой проект его нужно добавить.
Эти настройки также можно изменить в дальнейшем.
Шаг 7. Деплой
Нажмите «Запустить деплой». Как только процесс начнется, вы увидите лог деплоя на вкладке «Деплой».
Как правило, он содержит всю необходимую информацию для устранения возможных ошибок. Если что-то пойдет не так, например, из-за наличия ошибок в коде, в логе будут выведены уведомления о них с уточнением причины проблемы.
При первом развертывании проекта установка сервера может занять некоторое время. Как только процесс завершится, статус приложения обновится, а также вы увидите сообщение об этом в логе.
Готово!
Адрес приложения (бесплатный технический домен, привязанный к нему по умолчанию) можно найти и скопировать на главной странице раздела Apps:
Либо на вкладке «Настройки» конкретного приложения:
Привязать собственный домен можно по нашей инструкции.
Приложение будет доступно по 443 и 80 порту.
В дальнейшем Apps будет отслеживать обновления в репозитории и, если включен автодеплой, автоматически перезапускать проект с новыми изменениями.
Была ли статья полезна?