Кейсы · Учебник 11

Миграция статического сайта с Vercel на Cloudflare Pages

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

Главная страница Live Boxmining после переноса на Cloudflare Pages
Время чтения
11 мин
Последнее обновление
Август 2026

0 из 14 завершено

Завершить & далее →

Проверено по исходникам и обновлено: 10 августа 2026 г. Цены, лимиты, поведение редиректов, управление кэшем и сетевые показатели были проверены в соответствии с документацией Cloudflare и Vercel по ссылкам.

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

Мы перенесли два наших производственных сайта, DogDogHK и Boxmining, с Vercel на Cloudflare Pages.

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

Длинная версия менее лестная. Панель управления Cloudflare ужасна. Pages кажется затерянным внутри гораздо более крупного инфраструктурного продукта. Первое развертывание простое; настройка DNS, канонического корневого домена, www перенаправления и поведения кэша точно так, как нужно, заняла несколько итераций.

Я бы всё равно принял то же решение снова.

Это были правильные сайты для переноса

DogDogHK — это двуязычный справочник по ресторанам, паркам и торговым центрам, дружелюбным к собакам, в Гонконге. Boxmining — это долгосрочное издание о криптовалютах и ИИ с большой архивной коллекцией статей. Они выглядят очень по-разному, но их потребности в хостинге схожи:

  • большинство посетителей получают заранее подготовленные HTML, CSS, JavaScript, шрифты и изображения;
  • сайты могут перестраиваться при изменении контента, вместо рендеринга каждой страницы по запросу;
  • ни одному из сайтов не нужен серверный процесс для обычного просмотра страницы;
  • трафик может быть неравномерным, потому что руководство, раздача токенов или местная рекомендация могут внезапно стать популярными.

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

Текущая документация по ценообразованию Cloudflare Pages говорит, что запросы к статическим ресурсам бесплатны и неограничены как в бесплатных, так и в платных планах. Существует важное ограничение: если запрос вызывает функцию Pages, он тарифицируется и ограничен как запрос Workers. «Неограниченно» — это не магическая метка для любого приложения, развернутого на Pages. Это очень хорошее предложение для файлов, которые остаются файлами.

Бесплатный план всё ещё имеет практические ограничения. В настоящее время Cloudflare позволяет 500 сборок в месяц, 20 000 файлов на сайт, максимум 25 МиБ на ресурс и 100 проектов Pages на аккаунт. Эти ограничения подходят для таких сайтов. Большой видеофайл, серверное приложение или продукт с интенсивным использованием функций потребуют другой расчёт.

Главная страница Live DogDogHK на традиционном китайском с отображением поля поиска и путеводителя по Гонконгу
Главная страница DogDogHK в прямом эфире 10 августа 2026 года. Обычный визит — это статический документ плюс статические ресурсы, именно здесь Pages имеет самое явное ценовое преимущество.

Почему Vercel заставил меня нервничать

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

Проблема в том, что происходит после роста коммерческого сайта.

План Vercel Hobby бесплатен, но ограничен личным, некоммерческим использованием. Текущий план Pro стоит 20 долларов в месяц и включает 20 долларов кредитов на использование. Разрешенные ресурсы включают 10 миллионов обращений на edge и 1 ТБ быстрого переноса данных за расчетный период. После этого Vercel указывает цены по требованию, начиная с $2 за миллион запросов на edge и $0,15 за ГБ, с региональными различиями.

Каждый запрос к статической странице или ресурсу считается запросом на edge, а отправка ответа учитывается как быстрый перенос данных. Кэширование может предотвратить выполнение функции, но собственный пример использования Vercel подтверждает, что кэшированная статическая страница всё равно потребляет эти два измеряемых ресурса.

Это не означает, что одна атака бота автоматически создаёт огромный счёт. Vercel заявляет, что автоматическое смягчение DDoS-атак включено в каждый план, и трафик, который он блокирует как DDoS-атаку, не тарифицируется. Пользователи хобби также не оплачивают превышения; проект можно приостановить, когда он превышает свои лимиты.

Неприятный случай — это законный трафик. Ссылка становится вирусной, страница попадает в поисковую выдачу или большая аудитория загружает страницы с большим количеством изображений. На Pro этот успех может превратиться в плату, основанную на использовании. Vercel улучшил свои инструменты контроля: новые команды получают по умолчанию бюджет по требованию, а Управление расходами может уведомлять вас, вызывать вебхук или приостанавливать проекты при достижении жесткого лимита. Но это все равно оставляет владельцу выбор между неограниченным счетом и отключением сайта в тот момент, когда он наиболее полезен.

Для статической публикации я не хочу такого выбора.

Cloudflare имеет ту форму сети, которую мы хотели

Cloudflare и Vercel оба работают через глобальные сети доставки. «Cloudflare всегда быстрее» было бы слишком обобщённым утверждением. Производительность зависит от посетителя, ресурса, состояния кэша, веса страницы и того, как настроен каждый развёртываемый экземпляр.

Наш опыт работы с этими двумя сайтами показал, что Cloudflare Pages была быстрее, особенно после настройки правил кэша. У нас больше нет чистой, идентичной копии старых рабочих развёртываний, поэтому я не собираюсь придумывать сравнительный тест «до и после».

Существует веская инфраструктурная причина нашего предпочтения. В настоящее время Cloudflare публикует присутствие своей сети в 335 городах более чем в 125 странах с прямыми соединениями с 13 000 сетей. Vercel публикует 126 точек присутствия в 51 стране, поддерживаемых 20 регионами с возможностью вычислений. Это не полностью идентичные единицы, но раскрытая Cloudflare структура значительно шире.

Это важно для нас, потому что наша аудитория не сосредоточена в одном регионе США. DogDogHK ориентирован на Гонконг в первую очередь. Boxmining имеет читателей по всей Азии, Европе и Северной Америке. Cloudflare также раскрывает механизмы более напрямую: DNS-записи, состояние прокси, статус кэша, правила перенаправления, события безопасности и информацию по каждому запросу. CF-Ray коды местоположений все находятся в одной системе.

При живой проверке из Гонконга 10 августа обе главные страницы были обслужены Cloudflare через его сингапурскую точку присутствия. www версии возвращали постоянные перенаправления на домены верхнего уровня. Хэшированный шрифтовой ресурс Boxmining вернулся CF-Cache-Status: HIT с неизменяемой кеш-политикой на один год. HTML остался пере-проверяемым. Это был раздел, который нам нужен: долговечные версионированные ресурсы, свежие документы.

Сама миграция не была однокликовой

Первая половина прошла без происшествий:

  1. Сохраняйте сайты Astro в режиме статического вывода.
  2. Подключите каждый репозиторий Git к Cloudflare Pages.
  3. Установите команду сборки и каталог вывода.
  4. Разверните в сгенерированном pages.dev URL.
  5. Просканируйте предварительный просмотр и сравните его с производством перед изменением DNS.

Работа началась, когда мы подключили реальные домены.

Оба проекта используют основной домен как канонический: dogdoghk.com и boxmining.com. Нам также нужно www работает, но только как постоянное перенаправление. Это звучит как небольшое требование. На Cloudflare оно затрагивает три разных уровня: пользовательский домен Pages, DNS и правило перенаправления для аккаунта или зоны.

Pages от Cloudflare _redirects файл обрабатывает пути, включая тысячи старых URL-адресов Boxmining. Он не обрабатывает перенаправление на уровне хостнейма. www.example.com к example.com Сам справочник Pages от Cloudflare по перенаправлениям www на apex использует Bulk Redirect плюс проксированную запись DNS для www. Единое правило перенаправления также может задавать изменение хостнейма, но запись DNS все равно должна направлять трафик через Cloudflare, чтобы правило сработало.

Это была самая придирчивая часть. Перенаправление может быть логически правильным и всё же не срабатывать, потому что имя хоста не проксируется, пользовательский домен прикреплён не в том месте или сначала выполняется другое правило. Нам пришлось тестировать четыре точки входа отдельно:

http://example.com
https://example.com
http://www.example.com
https://www.example.com

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

Настройка кэша сделала производительность реальной

Переход на большую сеть на периферии сам по себе не исправляет слабую политику кэширования.

Наши статические сборки создают файлы с контрольными суммами, такие как app.A1B2C3.css или шрифты и изображения с хешированием. Когда их содержимое меняется, меняется и имя файла. Эти файлы можно безопасно использовать с долгим временем жизни в браузере и на периферии с immutable потому что новое развертывание указывает на новый URL.

HTML отличается. URL статьи остаётся тем же, когда история исправляется. Кэширование на год сделает публикацию быстрой, а обновление — мучительным. Мы сохраняем документы, которые можно повторно проверять, при этом предоставляя выбранным файлам, читаемым машинами, свою собственную политику. Boxmining, например, может агрессивно кэшировать версии активов, одновременно обрабатывая RSS, robots, карты сайта и страницу 404 в соответствии с тем, как часто каждый элемент должен меняться.

Cloudflare предоставляет несколько перекрывающихся способов сделать это:

  • a Pages _headers файл, развернутый вместе с сайтом;
  • приборная панель Cache Rules которые могут изменять условия, TTL на границе, TTL в браузере и ключи кэша;
  • очистка управляет ситуацией, когда некорректный ответ уже достиг границы;
  • заголовки ответа такие как CF-Cache-Status и Age для проверки того, что действительно произошло.

Гибкость полезна, но панель управления не делает приоритет очевидным. Мы изменили правило, развернули, проверили заголовки, обнаружили несоответствие и повторили цикл. Здесь Cloudflare кажется более техническим, чем Vercel: он дает вам управление, но ожидает, что вы разберетесь в пути запроса.

Реальный недостаток Cloudflare — это интерфейс пользователя.

Нельзя сказать это вежливо. Панель управления Cloudflare плоха.

Навигация отражает размер каталога продуктов Cloudflare, а не задачу публикации одного статического веб-сайта. «Workers & Pages» уже является неудобным комбинированным пунктом. Настройки домена находятся в другом месте. Перенаправления могут находиться в разделе Правила или на уровне аккаунта. Поведение кэша может зависеть от выходных данных сборки, правила зоны или значения по умолчанию продукта. Полезная аналитика есть, но она разделена по экранам с названиями, которые предполагают, что вы уже знакомы с внутренней моделью Cloudflare.

Vercel гораздо лучше подходит для «счастливого пути». Репозиторий, деплой, домен и логи ощущаются как части одного продукта. Cloudflare ощущается как панель управления сетью, которая случайно включает в себя статический хостинг.

Другая сторона этой жалобы — это причина, по которой мы остались. Cloudflare показывает мне больше. Он не превращает каждую следующую полезную настройку в разговор о повышении плана. На бесплатном плане я могу проверять DNS, видеть поведение кэша, настраивать редиректы, просматривать активность безопасности и понимать, какой узел обработал запрос. Я предпочел бы один раз разобраться с техническим интерфейсом, чем потом гадать, что будет стоить обычный трафик.

Когда я все еще выбрал бы Vercel

Это не универсальная рекомендация по миграции. Я бы все еще рассматривал Vercel, когда:

  • команда сильно зависит от возможностей Next.js и хочет максимально тесную интеграцию платформы;
  • опыт развертывания важнее детального контроля сети;
  • проект удобно помещается в рамках известного использования и бизнес принимает оплачиваемый рост;
  • лимиты расходов, оповещения и возможная автоматическая пауза являются приемлемой моделью безопасности;
  • разработчикам нужен самый простой процесс предварительного просмотра и совместной работы.

Я бы выбрал Cloudflare Pages, когда результат действительно статичен, трафик открыт и непредсказуем, а владельцу проекта важнее предсказуемость расходов и контроль на уровне edge, чем изящество панели управления.

Для DogDogHK и Boxmining ответ был очевиден. Мы согласились на худший интерфейс, исправили перенаправления, настроили кэш и в итоге получили хостинг, который подходит архитектуре, вместо того чтобы взимать с нас плату, как если бы каждая успешная загрузка страницы была новой функцией продукта.

Наш контрольный список по миграции

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

  1. Подтвердите, что сборка для производства статическая, и определите все функции или маршруты промежуточного ПО.
  2. Проверьте ограничения страниц относительно количества собранных файлов и крупнейшего ресурса.
  3. Разверните превью и просканируйте страницы, изображения, канонические теги, файлы sitemap и старые перенаправления.
  4. Решите, является ли основным каноническим www вершина домена или поддомен.
  5. Подключите пользовательский домен, создайте проксированные DNS-записи и добавьте перенаправление хоста на границе.
  6. Установите длительное неизменяемое кэширование только для ресурсов с отпечатком.
  7. Оставьте HTML проверяемым на актуальность и задайте намеренные политики для лент, файлов sitemap и страниц ошибок.
  8. Протестируйте все комбинации HTTP, HTTPS, основного домена и www поддоменов с curl -I.
  9. Проверить Cache-Control, CF-Cache-Status, Age, Location и CF-Ray на живых ответах.
  10. Сохраните предыдущую версию развертывания доступной, пока DNS, редиректы, аналитика и индексация поисковыми системами не станут стабильными.

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

Источники и раскрытие информации

DogDogHK и Boxmining — это наши собственные проекты. Опыт миграции, предпочтения по скорости и критика обоих панелей управления являются мнениями из первых рук. Скриншоты в реальном времени и заголовки ответов проверялись 10 августа 2026 года. Ограничения платформы, цены и показатели сети проверялись по текущей документации поставщиков на ту же дату.