Давайте дружить в Телеграме: рассказываем про новые фичи, общаемся в комментах, прислушиваемся к вашим идеям Подписаться

Next.js

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

Сервис Frontend-приложений поддерживает только режим статической генерации. Если приложению требуется выполнение SSR, необходимо использовать деплой с помощью Dockerfile.

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

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

13ac80fe 9359 4583 9eda Aabbd7f32946

Шаг 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. Настройка параметров сборки

8772d199 Ac7b 445c 9fdd B6d5d9e1cbf5

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

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

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

Была ли статья полезна?

15 лет опыта
Сосредоточьтесь на своей работе: об остальном позаботимся мы
165 000 клиентов
Нам доверяют частные лица и компании, от небольших фирм до корпораций
Поддержка 24/7
100+ специалистов поддержки, готовых помочь в чате, тикете и по телефону