Перейти к содержанию

Развертывание на Cloudflare

Здесь мы будем использовать Cloudflare Pages для развертывания нашего проекта Solid.

Cloudflare Pages - это платформа JAMstack для совместной работы фронтенд-разработчиков и развертывания их сайтов. Для пояснения JAMstack означает Javascript, API и разметка.

Более подробную информацию о том, что можно сделать с помощью Cloudflare Pages, можно найти на их сайте.

Соединение Cloudflare с вашим онлайн-репозиторием Git

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

Вот краткое пошаговое руководство по запуску онлайн-репозитория Solid на Cloudflare Pages

Примечание: В качестве примера мы будем использовать GitHub. Однако Cloudflare позволяет подключать и репозитории GitLab.

Шаг 1: Войдите или зарегистрируйтесь на сайте Cloudflare, используя свой адрес электронной почты. Окно входа должно выглядеть примерно так.

Шаг 1

Шаг 2: После того как вы вошли в систему или зарегистрировались, перейдите в раздел Pages с помощью левой панели навигации, после чего добавьте новый проект в панель Cloudflare Pages, нажав кнопку Create a project и выбрав Connect to Git.

После этого вы должны перейти на экран, выглядящий примерно так.

Шаг 2

Шаг 3: Подключите свой GitHub. На этом шаге вы можете выбрать установку Cloudflare Pages во все ваши репозитории или выбрать, в какие репозитории устанавливать Cloudflare Pages. Решать вам, выбирайте тот вариант, который лучше всего подходит для вашего рабочего процесса 🙂 .

После подключения GitHub у вас должна появиться страница следующего вида

Шаг 3

Шаг 4: После подключения и выбора репозитория осталось только настроить сборку проекта. Если вы нажали кнопку Начать настройку, то должны увидеть следующее окно.

Шаг 4

Имя проекта будет соответствовать имени репозитория. Убедитесь, что в поле Команда сборки указано то, что вы используете для сборки проекта, по умолчанию это должна быть команда npm run build. Поле Выводной каталог сборки должно иметь значение dist.

Обязательно добавьте в переменную окружения NODE_VERSION значение той версии Node.js, которую вы используете на своей машине. Если этого не сделать, сборка завершится неудачей, так как Cloudflare Pages использует Node.js версии старше v13, которая не поддерживает Vite, бандлер для проектов Solid.

Нажмите кнопку Save and Deploy, когда закончите.

**После этого подождите несколько минут, и вуаля - ваш проект Solid должен быть развернут на Cloudflare Pages с URL-адресом, похожим на этот project_name.pages.dev.

Использование Wrangler CLI

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

Шаг 1: Установите Wrangler CLI

1
2
3
4
5
npm i -g wrangler
# or
pnpm i -g wrangler
# or
yarn global add wrangler

Шаг 2: Войдите в wrangler, используя cloudflare

1
wrangler login

Шаг 3: Сборка проекта и развертывание с помощью wrangler

1
2
3
npm run build

npx wrangler pages publish dist

После этого в терминале должна появиться ссылка, однако в большинстве случаев эта ссылка не работает. Приходится заходить в панель управления страницами cloudflare и получать развернутую ссылку оттуда. Обычно она имеет формат project-name.pages.dev.

Сноска: при использовании настроек Cloudflare Speed -> Optimization в панели управления сайтом Cloudflare убедитесь, что опция Auto Minity выключена. Это связано с тем, что минификация и избавление от комментариев нарушают гидратацию.

Посетите сайт Cloudflare или Wrangler, чтобы получить дополнительную информацию или просто узнать, какие интересные вещи они могут помочь вам сделать.

Ссылки

Комментарии