Есть много способов развернуть интерфейсное приложение. Как на размещенной виртуальной машине, докере и Kubernetes. Но в настоящее время самым дешевым и простым вариантом является размещение статического веб-сайта. Для этого существует множество платформ: Github Pages, Firebase, Surge, Netlify и Cloudflare Workers, инструмент, который будет показан в этой статье.
А современные статические веб-сайты легко создавать с помощью таких генераторов, как Gatsby, Nuxt.js и Next.js.
Рабочие Cloudflare
👉 Проект, который будет использоваться в качестве примера в этом руководстве, представляет собой простой веб-сайт, созданный на Vue.js с помощью Next.js. Вы можете проверить репозиторий здесь.
- После того, как вы создали учетную запись на Cloudflare, вам нужно выбрать поддомен на Workers.
- Теперь вы можете установить Wrangler CLI:
npm i @cloudflare/wrangler -g
3. Войдите с помощью:
wrangler login
4. Получите свой идентификатор учетной записи:
wrangler whoami
5. Создайте файл с именем wrangler.toml
with:
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 с другой платформой, концепции все те же.