Вітання! Мене звуть Діма, я техлід SysOps-команди у Wrike. У цій статті я розповім, як за 10 хвилин та 5 доларів на місяць зробити максимально близький до користувача сайт та автоматизувати його деплою. Стаття майже не має відношення до тих проблем, які ми вирішуємо усередині нашої команди. Це, скоріше, мій особистий досвід та враження від знайомства з новою для мене технологією. Я постарався описати кроки максимально докладно, щоб інструкція виявилася корисною для людей із різним досвідом. Сподіваюся вам сподобається. Поїхали!
Отже, можливо, ви вже знайшли для себе простий та дешевий спосіб хостингу сайту. Можливо навіть безкоштовний, як описано в цій.
Але раптом вам все одно нудно і хочеться торкнутися чудового нового світу технологій? Скажімо, ви думаєте про автоматизацію розгортання і хотіли б максимально прискорити сайт? У цій статті ми будемо використовуватиале це не обов'язково.
Для автоматизації ми використовуємо CI/CD Gitlab, але що робити з прискоренням? Давайте розгорнемо сайт безпосередньо в Cloudflare за допомогою.
Що потрібно для старту:
Gitlab (ваш власний або )
на Cloudflare
встановлений
Частина 1: Установка Hugo
Якщо у вас вже встановлено Hugo або якщо ви віддаєте перевагу іншому генератору статичних сайтів (або взагалі не користуєтеся ними), то цю частину можна пропустити.
Завантажуємо Hugo з
Поміщаємо виконуваний файл Hugo по одному з визначених у шляхів
Створюємо новий сайт:
hugo new site blog.example.comЗмінюємо поточну директорію на щойно створену:
cd blog.example.comВибираємо тему оформлення ( або будь-що)
Створюємо перший пост:
hugo new posts/my-amazing-post.mdДодаємо контент у створений файл: content/posts/my-amazing-post.md.
Коли все зроблено, змінюємо значення draft на falseГенеруємо статичні файли:
hugo -D
Тепер наш статичний сайт знаходиться всередині директорії ./public та готовий до першого ручного розгортання.
Частина 2: Налаштовуємо Cloudflare
Тепер розберемося з початковим настроюванням Cloudflare. Припустимо, що домен для сайту ми вже маємо. Як приклад візьмемо blog.example.com.
Крок 1: Створюємо запис DNS
Спочатку вибираємо наш домен, а потім пункт меню DNS. Створюємо A-запис blog і вказуємо для неї якийсь фіктивний IP (це офіційна, але вони могли б зробити якось симпатичніше).
Крок 2: Токен Cloudflare
Мій профіль -> Токени API вкладка-> Створити маркер -> Create Custom Token
Тут вам потрібно буде обмежити токен обліковими записами та зонами, але залишити можливість Edit для перерахованих на зображенні дозволів.
Збережіть токен на майбутнє, він знадобиться нам у третій частині.
Крок 3: Отримуємо accountid та zoneid
сфера → Огляд → [права бічна панель]
Це мої, не використовуйте їх, будь ласка 🙂
Збережіть їх поруч із токеном, вони теж знадобляться нам у третій частині.
Крок 4: Активація Workers
сфера → Робітники → Управління робітниками
Вибираємо унікальне ім'я та тариф Workers → Unlimited ($5 на місяць на сьогоднішній день). За бажанням пізніше ви зможете перейти на безкоштовну версію.
Частина 3: Перший деплой (ручне розгортання)
Я зробив перше розгортання вручну, щоб з'ясувати, що там відбувається насправді. Хоча все це можна зробити і простіше:
Встановлюємо wrangler:
npm i @cloudflare/wrangler -gПереходимо до директорії нашого блогу:
cd blog.example.comЗапускаємо wrangler:
wrangler init — site hugo-workerСтворюємо конфіг для wrangler (введіть токен, коли його спитають):
wrangler config
Тепер спробуємо внести зміни до щойно створеного файлу wrangler.toml ( повний список можливих налаштувань):
вказуємо accountid та zoneid
міняємо маршрут на щось на кшталт *blog.example.com/*
вказуємо false для workersdev
Змінюємо bucket на ./public (або де знаходиться ваш статичний сайт)
Якщо у вас більше одного домену в дорозі, вам слід виправити шлях у робочому скрипті: workers-site/index.js (Див. функцію handleEvent)
Відмінно, час розгортати сайт за допомогою команди wrangler publish.
Частина 4: Автоматизація деплою
Ця інструкція складена для Gitlab, але вона передає суть та простоту автоматизованого розгортання загалом.
Крок 1: Створюємо та налаштовуємо наш проект
Створюємо новий проект GitLab та завантажуємо сайт: директорія blog.example.com з усім вмістом має перебувати в кореневому каталозі проекту
Задаємо змінну CFAPITOKEN тут: Налаштування → CI/CD → Змінні
Крок 2: Створюємо файл .gitlab-ci.yml та запускаємо перше розгортання
Створюємо файл .gitlab-ci.yml в корені з таким вмістом:
stages:
- build
- deploy
build:
image: monachus/hugo
stage: build
variables:
GIT_SUBMODULE_STRATEGY: recursive
script:
- cd blog.example.com/
- hugo
artifacts:
paths:
- blog.example.com/public
only:
- master # this job will affect only the 'master' branch
tags:
- gitlab-org-docker #
deploy:
image: timbru31/ruby-node:2.3
stage: deploy
script:
- wget https://github.com/cloudflare/wrangler/releases/download/v1.8.4/wrangler-v1.8.4-x86_64-unknown-linux-musl.tar.gz
- tar xvzf wrangler-v1.8.4-x86_64-unknown-linux-musl.tar.gz
- cd blog.example.com/
- ../dist/wrangler publish
artifacts:
paths:
- blog.example.com/public
only:
- master # this job will affect only the 'master' branch
tags:
- gitlab-org-docker #Запускаємо перше розгортання вручну (CI/CD → Трубопроводи → Run Pipeline) або відправляючи commit у гілку master. Вуаль!
Висновок
Що ж, можливо, я трохи применшив, і весь процес зайняв трохи більше десяти хвилин. Натомість тепер у вас є швидкий сайт з автоматичним розгортанням та кілька свіжих ідей про те, що ще можна зробити за допомогою Workers.
Джерело: habr.com
