Развертывание веб-сайтов с помощью Cloudflare Workers и Gitlab CI / CD

Есть много способов развернуть интерфейсное приложение. Как на размещенной виртуальной машине, докере и Kubernetes. Но в настоящее время самым дешевым и простым вариантом является размещение статического веб-сайта. Для этого существует множество платформ: Github Pages, Firebase, Surge, Netlify и Cloudflare Workers, инструмент, который будет показан в этой статье.

А современные статические веб-сайты легко создавать с помощью таких генераторов, как Gatsby, Nuxt.js и Next.js.

Рабочие Cloudflare

👉 Проект, который будет использоваться в качестве примера в этом руководстве, представляет собой простой веб-сайт, созданный на Vue.js с помощью Next.js. Вы можете проверить репозиторий здесь.

1. После того, как вы создали учетную запись на Cloudflare, вам нужно выбрать поддомен на Workers.
2. Теперь вы можете установить Wrangler CLI:

npm i @cloudflare/wrangler -g

3. Войдите с помощью:

wrangler login

4. Получите свой идентификатор учетной записи:

wrangler whoami

5. Создайте файл с именем wrangler.tomlwith:

name = "app"
type = "webpack"
account_id = "ACCOUNT_ID"
workers_dev = true

[site]
bucket = "dist"

Просто замените ACCOUNT_ID на свой идентификатор учетной записи. А поле bucket относится к каталогу, в котором находятся статические файлы ваших веб-сайтов. В этом случае я использовал Next.js для создания статического веб-сайта, а папка вывода - dist.

6. Чтобы опубликовать пробег:

wrangler publish --env website

Затем вы увидите сообщение об успешном завершении с URL-адресом вашего приложения.

Среды

Вы можете создавать различные среды с определенными настройками для публикации своего веб-сайта с помощью wrangler. Чтобы создать новое окружение, просто добавьте строку с [env.my-environment] и его настройками ниже.

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

Gitlab CI / CD

Что-то действительно крутое и полезное в использовании этих сред - это публиковать разные версии вашего приложения на основе веток из вашего репозитория git. Итак, давайте настроим Gitlab CI / CD.

Первое, что вам нужно сделать, это установить две переменные среды в вашем репозитории Gitlab. Перейдите к настройкам на правой боковой панели, перейдите в раздел CI / CD, в разделе переменных нажмите кнопку «Развернуть», добавьте CF_ACCOUNT_ID переменную с идентификатором вашей учетной записи Cloudflare и CF_API_TOKEN с вашим токеном API. Убедитесь, что флаг Защищенная переменная не отмечен.

Затем создайте сценарий bash, который опубликует среду на основе вашей текущей ветки. Создайте новый файл с именем deploy.sh:

#!/usr/bin/env sh
NAME=$(echo "$1" | tr '[:upper:]' '[:lower:]' | sed 's/_/-/g')

cp wrangler.toml wrangler.toml.tmp
printf "\\n[env.$NAME]\\nname=\\"$NAME\\"\\n" >> wrangler.toml
echo $NAME

yarn generate
npx wrangler publish --env $NAME

mv wrangler.toml.tmp wrangler.toml

Этот сценарий получает аргумент от команды, преобразует его в нижний регистр и заменяет символы подчеркивания дефисами. Это будет использоваться для создания новой среды с этим именем на wrangler.toml. Затем выполняет yarn generate для создания пакета веб-сайтов в каталоге dist и публикации на рабочих сайтах с помощью обработчика. Наконец, wrangler.toml возвращается в исходное состояние.

Убедитесь, что этот файл исполняемый. Дело не в том, просто запустите:

chmod +x deploy.sh

И добавляем его как скрипт на package.json:

{
    ...,
        "scripts": {
            ...,
            "deploy": "./deploy.sh",
        },
    ...
}

Создайте gitlab-ci.yml, в котором вы настраиваете конвейеры CI / CD:

# .gitlab-ci.yml
stages:
  - Deploy on Cloudflare
deploy:
  - stage: Deploy on Cloudflare
  - image: node:12-alpine
  script:
    - export USER=$(whoami)
    - yarn
    - yarn deploy $CI_COMMIT_REF_NAME
  only:
    - merge_request

Этот файл устанавливает одно задание, которое устанавливает зависимости проекта, а затем выполняет сценарий deploy из файла deploy.sh, передавая имя текущей ветки или тег в качестве аргумента. Тег only - это то место, где вы выбираете, когда это задание будет запускаться, в этом случае оно будет запускаться при каждом новом запросе на слияние.

Вывод

Все сделано! Теперь попробуйте, создав запрос на слияние! Вы увидите, что задание выполняется через несколько секунд, затем в Cloudflare Workers будет опубликована новая среда с внесенными вами изменениями. Это замечательно для тестирования новых разрабатываемых функций. Кроме того, вы можете использовать Cloudflare Workers с другой интерфейсной структурой или установить CI / CD с другой платформой, концепции все те же.