Размещаем статический сайт бесплатно в сети (Cloud Flare)

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


Важно:

Я работаю в Arch Linux или Mac OS (как в данном случае), если у вас другая система то вам придется почитать документацию, хотя лучше если вы ее в любом случае почитаете😁а чью документацию читать? об этом дальше.
Загружать наш статический контент мы будем на площадку Cloudflare используя Workers по этому просьба создать аккаунт на Cloudflare, логиньтесь в аккаунт и понеслась =)


Создаем API Token, для этого жмем на значек "пользователя" в правом верхнем углу:

Размещаем статический сайт бесплатно в сети (Cloud Flare) Cloudflare, Разработчики, Сайт, Mac Os, Linux, Ubuntu, Длиннопост

Дальше смотрим в лево, и выбираем там API Tokens

Размещаем статический сайт бесплатно в сети (Cloud Flare) Cloudflare, Разработчики, Сайт, Mac Os, Linux, Ubuntu, Длиннопост

После выбора генерируем токен нажав на соответствующую кнопку:

Размещаем статический сайт бесплатно в сети (Cloud Flare) Cloudflare, Разработчики, Сайт, Mac Os, Linux, Ubuntu, Длиннопост

После нажатия на кнопку вам будет предложено выбрать доп параметры, выбирайте Edit Cloudflare Workers:

Размещаем статический сайт бесплатно в сети (Cloud Flare) Cloudflare, Разработчики, Сайт, Mac Os, Linux, Ubuntu, Длиннопост

Дальше вы увидите штуку которая позволяет развернуто настроить то, для чего токен этот нужен и что он может делать, для тестов достаточно изменить два пункта как показано ниже (но можете конечно настроить как вам нужно ):

Размещаем статический сайт бесплатно в сети (Cloud Flare) Cloudflare, Разработчики, Сайт, Mac Os, Linux, Ubuntu, Длиннопост

Жмите Continue to summary а позже Create Token, вам будет выдан токен и curl строка для его проверки, сохраните этот токен подальше от остальных, так как если его украдут, то смогут делать много не хорошего с вашим аккаунтом, в зависимости от разрешений который токену выданы в настройках выше.

Размещаем статический сайт бесплатно в сети (Cloud Flare) Cloudflare, Разработчики, Сайт, Mac Os, Linux, Ubuntu, Длиннопост

Теперь нам нужно создать subdomain, вернитесь на основную страницу, и слева выберите Workers:

Размещаем статический сайт бесплатно в сети (Cloud Flare) Cloudflare, Разработчики, Сайт, Mac Os, Linux, Ubuntu, Длиннопост

В поле Choose your sub*** введите придуманное уникальное значение, я ввел test-worker-pikabu

Дальше жмите Set Up, и естественно выбирайте Free:

Размещаем статический сайт бесплатно в сети (Cloud Flare) Cloudflare, Разработчики, Сайт, Mac Os, Linux, Ubuntu, Длиннопост

Со всем "соглашайтесь" , дальше вы получите Account ID, его тоже секьюрно сохраните😁

Размещаем статический сайт бесплатно в сети (Cloud Flare) Cloudflare, Разработчики, Сайт, Mac Os, Linux, Ubuntu, Длиннопост

Так вот, сейчас у вас должен быть API Token и Account ID, и наверное самая (по крайней мере для меня) скучная часть завершена😁😁😁


Устанавливаем Wrangler, как это сделать написано тут, для меня это в терминале выполнить

npm i @cloudflare/wrangler -g

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


4 - Создаем и переходим в рабочую директорию :

mkdir work_dir && cd work_dir

5 - Создаем директорию для сайта:

mkdir site_dir

6 - Создаем конфигурационный файл wrangler.toml

touch wrangler.toml

7 - Любым способом добавьте в файл такие строки конфигурации:

name = "myworkerforpikabu123"
type = "webpack"
workers_dev = true
account_id = "<id>"
[site]
bucket = "./site_dir"
entry-point = "workers-site"

Из важных моментов:

- account_id - тут в качестве значение должен быть Account ID который вы получили ранее
- name - имя воркера (лучше без пробелов)
- workers_dev - опция true позволяет бесплатно получить хоть и уродливое, но рабочее доменное имя которое будет "направлено" на наш сайт
- bucket  - весь контент из этой директории, будет загружен на Cloudflare, важно, там должен быть файл index.html

Остальное можете прочитать в документации.


Теперь пишем:

wrangler config

У вас будет запрошен полученный вами ранее API Token, вот сюда его нужно ввести и нажать Enter

Размещаем статический сайт бесплатно в сети (Cloud Flare) Cloudflare, Разработчики, Сайт, Mac Os, Linux, Ubuntu, Длиннопост

После ввода, отлично если он вывел примерно то, что вы видите на картинке ниже:

Размещаем статический сайт бесплатно в сети (Cloud Flare) Cloudflare, Разработчики, Сайт, Mac Os, Linux, Ubuntu, Длиннопост

Теперь копируем сайт в директорию site_dir, ну или как я просто создайте там индексный файл:

touch site_dir/index.html

Добавьте в него какой-то текст, я добавил <h1>Hello World</h1>

Теперь разворачиваем все это одной командой:

wrangler publish

Если все сконфигурировано правильно, апи токены и аккаунт ид верный, то вывод будет примерно таким:

Размещаем статический сайт бесплатно в сети (Cloud Flare) Cloudflare, Разработчики, Сайт, Mac Os, Linux, Ubuntu, Длиннопост

В самом низу будет выведена ссылка на ваш сайт, у меня это - https://myworkerforpikabu123.test-worker-pikabu.workers.dev

переходим туда и видим:

Размещаем статический сайт бесплатно в сети (Cloud Flare) Cloudflare, Разработчики, Сайт, Mac Os, Linux, Ubuntu, Длиннопост

Обратите внимание, Cloudflare подставляет свой сертификат + защита от многих атак, кроме этого сам Worker умеет работать как прокси, и многое другое, в самой админке cloudflare можно сконфигурировать ваш воркер так как вам удобно, так же есть базовые метрики для мониторинга. В платной версии можно использовать "адекватное" доменное имя и нет лимитов (про лимиты тоже в доках можно почитать)


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


ну и что почитать:

https://developers.cloudflare.com/workers/cli-wrangler/install-update

https://workers.cloudflare.com/