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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

npm run --prefix landing build

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

Для сборки проекта на 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 будет отслеживать обновления в репозитории и, если включен автодеплой, автоматически перезапускать проект с новыми изменениями.