Перенос с Vercel на Pages

В этом руководстве вы узнаете, как развернуть приложение Vercel в Cloudflare Pages.

Предполагается, что у вас уже есть проект, развёрнутый на Vercel, который вы хотите разместить в Cloudflare Pages. Такие функции, как serverless-функции Vercel, в настоящее время в Cloudflare Pages не поддерживаются.

Найдите команду сборки и директорию сборки

Чтобы перенести приложение в Cloudflare Pages, определите команду сборки и каталог сборки. Эта информация нужна Cloudflare Pages для сборки приложения и его развёртывания.

В Vercel Dashboard найдите проект, который нужно развернуть. Он должен быть настроен на развёртывание из репозитория GitHub.

На панели управления сайтом выберите Настройки, затем Общее.

Выбор Site Settings в панели управления сайтом

Найдите Настройки сборки и разработки панели, где будет Команда сборки и Выходной каталог поля. Если вы используете фреймворк, эти значения могут быть не заполнены и вместо них будут показаны значения по умолчанию для этого фреймворка. Сохраните их для развёртывания в Cloudflare Pages. На изображении ниже Команда сборки это npm run build, и Выходной каталог это build.

Поиск полей Build Command и Output Directory

Создайте новый проект Pages

После того как вы определите каталог сборки и команду сборки, вы сможете перенести проект в Cloudflare Pages.

Руководство по началу работы расскажет, как добавить ваш проект GitHub в Cloudflare Pages.

Добавление пользовательского домена

Далее подключите пользовательский домен в проект Pages. Этот домен должен совпадать с доменом уже развернутого приложения Vercel.

Изменение серверов имён домена

В большинстве случаев вам потребуется добавить домен в Cloudflare.

Для этого потребуется изменить серверы имён домена, но это упрощает настройку Pages и позволяет использовать apex домен для проекта (например, example.com).

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

Настройка собственного домена

Чтобы добавить пользовательский домен:

На панели управления Cloudflare перейдите к разделу Workers & Pages страницу.
Перейдите в Workers & Pages ↗
Выберите проект Pages > Пользовательские домены.
Выберите Настройка домена.
Укажите домен, на котором должен быть доступен ваш сайт Cloudflare Pages, и выберите Продолжение.

Добавление пользовательского домена для проекта Pages через панель управления Cloudflare

Дальнейшие шаги зависят от того, добавили домен в Cloudflare:

Добавлено в Cloudflare: Cloudflare настроит всё автоматически, и ваш домен перейдёт в Active статус.
Не добавлено в Cloudflare: Вам нужно обновить некоторые DNS-записи у вашего DNS-провайдера, чтобы завершить настройку.

Удалите приложение Vercel

После того как пользовательский домен настроен и запросы направляются в Cloudflare Pages, можно безопасно удалить приложение Vercel.

Устранение неполадок

Cloudflare не предоставляет IP-адреса для вашего проекта Pages, поскольку это не требуется для A или AAAA записи для привязки домена к проекту. Вместо этого Cloudflare использует CNAME записи.

Подробнее см. в Пользовательские домены.