Разверните свой спа и программно управлять трафиком с работниками CloudFlare

TL; DR; Оформить заказ Рабочие облака Для развертывания приложений одной страницы (SPA) или обработки вашего трафика программно.

Ранее я писал о Как мы развертываем наши бэкэнды на GCP. На этой неделе мы поговорим о развертывании Frontend и обработке трафика. Для этого мы будем использовать работники CloudFlare.

Работники CloudFlare — это среда без серверов, позволяющая развертывать логику JS или Webassembly к конечным точкам CloudFlare по всему миру.

Не только это позволяет вам легко распространять свой спа-салон, но вы также получите выгоду от функций CloudFlare Anti-DDOS и сможете программно управлять трафиком.

Для этой статьи мы предположим следующее:

• Ваше приложение размещено под https://app.mydomain.com.
• app.mydomain.com DNS уже указывает на CloudFlare
• Ваша Backend API размещена на PAAS в xyz-us.saas.net.net
• Спа и API должны поделиться тем же доменом для приводов обмена файлами cookie
• Трафик собирается в https://app.mydomain.com/api/* Должен пойти на ваш BackeND API
• Трафик собирается в https://app.mydomain.com/auth/* Должен пойти на ваш BackeND API
• Трафик собирается в https://app.mydomain.com/* Должен идти к вашему спа

С требованиями выше вам понадобится две вещи:

• Возможность компиляции и развертывания вашего спа
• Способность направлять трафик, идущий на https://app.mydomain.com к спалу или борьбе API на основе соответствия пути.

Для этого учебника вам понадобится настройка NPM на вашем компьютере, а также Wrangler.

Wrangler’s Cliflare’s Cli для рабочих CloudFlare. Вы можете установить его с помощью:

# Install wrangler
npm install -g @cloudflare/wrangler

# Setup your API token. This will open a web page asking you to login to Cloudflare
wrangler login

# Confirm your are logged in
wrangler whoami

Работники CloudFlare — это JS/Webassembly Wrintime Wims, позволяющая запустить любой вид HTTP-приложения. Рабочие оттолкнулись к CloudFlare, развернуты на все местоположения (100+ по всему миру).

Самое минимальное приложение выглядит так:

Вам не нужно писать код непосредственно на консоли CloudFlare для развертывания приложений. Вы действительно можете компилировать любое приложение JS и подтолкнуть его к работникам CloudFlare, используя Wrangler CLI.

Если вы хотите узнать больше о API Writtime Wring Wring Wring Wring, не стесняйтесь взглянуть на их док Отказ Мы будем использовать некоторые из своих API выполнения во второй части этой статьи (маршрутизатор).

Если вы хотите исследовать строительные работники, не стесняйтесь взглянуть на их стартерские приложения Отказ

Используя Wrangler, это довольно просто.

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

Перейдите в папку «Реагирование приложений» и инициализируйте работник CloudFlare для вашего приложения:

wrangler init --site

Этот шаг будет генерировать два актива:

• А Рабочий сайт Папка с рабочим кодом Bootstrap, чтобы вызвать ваше приложение
• А Wrangler.toml Файл Чтобы настроить параметры вашего приложенного работника

Обновите Wrangler.toml Файл, чтобы отразить вашу конфигурацию CloudFlare. Наполнить только имя и account_id.

# This is the name of your application. In this case the app will be published under
# a Clouflare-generated domain that looks like: https://my-app.my-worker-domain.workers.dev
name = "my-app"

# Which build strategy to use: webpack, javascript, and rust. Keep webpack.
type = "webpack"

# Your Cloudflare account id, which you can find by going to your Cloudflare Workers' page.
account_id = ""

# If set to true you app will be deployed under your *.workers.dev domain (as
# my-app.my-worker-domain.workers.dev).
#
# If you set it to false then you will have to specify the 'route' or 'routes' attribute
# using your production domain such as https://app.mydomain.com/*
workers_dev = true

# Can be left empty for now as we will deploy to the *.workers.dev domain
route = ""
# routes = []

# Can be left empty for now as we will deploy to the *.workers.dev domain
# Can be used to specify a domain ID when deploying to a production domain (e.g. *.mydomain.com)
zone_id = ""

[site]
# The directory containing your static assets (output of your build)
bucket = "./build"

# The location of the worker entry-point. Leave untouched.
entry-point = "workers-site"

Как только вы закончите, просто постройте и разверните свое приложение:

# Build your app
npm run build
# Or
yarn build

# Publish your app to Cloudflare workers
wrangler publish

Вот и все!

Ваше приложение React теперь доступно в https://my-app.my-worker-domain.workers.dev.

Когда дело доходит до трафика маршрутизации на ваш SPA, и ваш бэкэнд есть два варианта:

1. Используйте родную маршрутизацию CloudFlare (DNS + рабочие маршруты)
2. Создайте свой собственный роутер, используя еще один работник CloudFlare.

Мы предпочитаем использовать Вариант (2) Потому что это дает нам больше гибкости с точки зрения программно контролирующих правил маршрутизации, но я все равно покажу вам, что Вариант (1) Похоже на цель полноты.

Самый простой подход для SPA + Backend Roundence использует собственные функции маршрутизации, предоставленные CloudFlare DNS и работниками.

Сначала мы настраиваем CloudFlare DNS, чтобы указать app.mydomain.com к xyz-us.saas.net.net (наш бэкэнд API). Как таковое он будет пересылать все трафик на вашу бэкэнду. Это не то, что мы хотим только сейчас Но он будет действовать как значение по умолчанию и позволит нам настроить маршруты байпаса, когда мы закончим с частью маршрутизации работника.

Теперь обновите файл wrangler.toml и укажите, что ваш SPA должен получить все трафик:

# This is the name of your application.
name = "my-app"

# Which build strategy to use: webpack, javascript, and rust. Keep webpack.
type = "webpack"

# Your Cloudflare account id, which you can find by going to your Cloudflare Workers' page.
account_id = ""

# We do not want the worker to be deployed on the dev domain
workers_dev = false

# We want our SPA to receive all traffic by default
route = "app.mydomain.com/*"

# You need to fill the zone id for the mydomain.com zone
zone_id = ""

[site]
# The directory containing your static assets (output of your build)
bucket = "./build"

# The location of the worker entry-point. Leave untouched.
entry-point = "workers-site"

Переулить ваше приложение с помощью Wrangler:

wrangler publish

Все трафик к app.mydomain.com теперь направляется на ваш спа.

Теперь давайте настроим правила обхода, чтобы /API и /auth. трафик фактически направляется на исходные DNS (бэкэнда).

Перейдите на страницу работников CloudFlare и добавьте два маршрута, чтобы обойти работников для /API/* и /auth/* . Убедитесь, что выпадающий работник не установлен.

Вот и все! Ваше приложение теперь настроено, чтобы отправить весь трафик на ваш CloudFlare Hosted Spa, кроме /API. и /auth конечные точки, которые указывают на исходные DNS (ваша бэкэнда)

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

Теперь давайте рассмотрим другую альтернативу: построение пользовательского роутера.

В этом разделе мы оставим свой SPA на домене CloudFlare Dev и попросите CloudFlare направить все трафик на маршрутизационный работник, который затем решат, где следует передать трафик.

Если вы изменили Wrangler.toml Файл вашего спа в предыдущем разделе, убедитесь, что перезагрузите его на dev версия:

# This is the name of your application. In this case the app will be published under
# a Clouflare-generated domain that looks like: https://my-app.my-worker-domain.workers.dev
name = "my-app"

# Which build strategy to use: webpack, javascript, and rust. Keep webpack.
type = "webpack"

# Your Cloudflare account id, which you can find by going to your Cloudflare Workers' page.
account_id = ""

# If set to true you app will be deployed under your *.workers.dev domain (as
# my-app.my-worker-domain.workers.dev).
#
# If you set it to false then you will have to specify the 'route' or 'routes' attribute
# using your production domain such as https://app.mydomain.com/*
workers_dev = true

# Can be left empty for now as we will deploy to the *.workers.dev domain
route = ""
# routes = []

# Can be left empty for now as we will deploy to the *.workers.dev domain
# Can be used to specify a domain ID when deploying to a production domain (e.g. *.mydomain.com)
zone_id = ""

[site]
# The directory containing your static assets (output of your build)
bucket = "./build"

# The location of the worker entry-point. Leave untouched.
entry-point = "workers-site"

Развертывание вашего роутера

Используйте Wrangler для создания проекта нового работника:

# Generate new worker project using the cloudflare-provided router template
wrangler generate app-router https://github.com/cloudflare/worker-template-router

# Navigate to the newly created folder
cd app-router

Заменить index.js проекта со следующей логикой. Логика Ниже рассказывает маршрутизатору к прокси-трафику /API. и /auth. на нашу BackeND API и все остальные трафика на наш спа:

const Router = require('./router')

// -------------------------------------------------
// Registration logic
// -------------------------------------------------
// Declare router
const RT = new Router();

// Helper function used to register route handlers
// See Routing rules section
const proxyTo = hostname => request => {
    // Point to backend
    const url = new URL(request.url);
    const forwardedHost = url.hostname;
    url.hostname = hostname;

    // Build request. Keep track of the original Host.
    const req = new Request(url, request);
    req.headers.append('X-Forwarded-Host', forwardedHost);

    // Execute request
    return fetch(req);
}

// -------------------------------------------------
// Configuration
// -------------------------------------------------
const SPA_HOST = 'my-app.my-worker-domain.workers.dev'
const API_HOST = 'xyz-us.saas.net'

// -------------------------------------------------
// Routing rules
// -------------------------------------------------
RT.any('app.mydomain.com/api/*', proxyTo(API_HOST))
RT.any('app.mydomain.com/auth/*', proxyTo(API_HOST))
RT.any('app.mydomain.com/*', proxyTo(SPA_HOST))

// -------------------------------------------------
// Handler
// -------------------------------------------------
async function handleRequest(request) {
    const resp = await RT.route(request);
    return resp;
}

// Entrypoint
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

Обновите Wrangler.toml проекта, чтобы сказать CloudFlare, что все трафик на app.mydomain.com следует обрабатывать вашим маршрутизатором:

name = "app-router"
type = "webpack"
account_id = "you-account-id"
zone_id = "your-zone-id"
routes = [
  "app.mydomain.com/*"
]

Теперь опубликуйте свой вновь созданный маршрутизатор, используя Wrangler:

wrangler publish

Вот и все! Ваш трафик сейчас программно направляется на ваш SPA и Backend API приложенным маршрутизатором.

Тестирование на местном уровне

Можно проверить ваши правила маршрутизации локально использовать Wrangler в режиме разработки.

Используйте следующую команду:

wrangler dev --host=app.mydomain.com

Затем посетите http://localhost: 8787 Чтобы проверить логику логику и обеспечить трафик трафика, как и ожидалось.

Примечание: Заголовки облаков нет при тестировании локально. Если ваша логика маршрутизации зависит от них, вам необходимо добавить их вручную в ваших локальных запросах (с помощью Curl или Postman).

Выход за простой маршрутизацией

Теперь вы полностью контролируете логику маршрутизации к вашей заявке. Это означает, что вы можете:

Управляйте несколькими доменами (просто добавьте домены на массив маршрутов в вашем Wrangler.toml )

• Прошивать множественные бэкэндские услуги вместе под тем же доменом
• Маршрутное движение на основе IP-адресов или исходной страны
• Включить пользовательские заголовки в запросах
• …и больше!

Вот пример проведения маршрутизации, специфичной для страны для вашего Backend API:

const Router = require('./router')

// -------------------------------------------------
// Configuration
// -------------------------------------------------
const SPA_HOST = 'my-app.my-worker-domain.workers.dev'
const API_HOSTS = {
  US: 'xyz-us.saas.net',
  FR: 'xyz-fr.saas.net'
}

// -------------------------------------------------
// Registration logic
// -------------------------------------------------

// Declare router
const RT = new Router();

// Helper function used to register route handlers
// See Routing rules section
const proxyTo = hostname => request => {
    // Point to backend
    const url = new URL(request.url);
    const forwardedHost = url.hostname;
    url.hostname = hostname;

    // Build request. Keep track of the original Host.
    const req = new Request(url, request);
    req.headers.append('X-Forwarded-Host', forwardedHost);

    // Execute request
    return fetch(req);
}

// Handler for backend requests based on country
const backendProxy = request => {
  // Extract request information
  const url = new URL(request.url);
  const forwardedHost = url.hostname;

  // Select destination host based on country
  // Default to US if no backend configured for that specific country
  const country = request.headers.get('cf-ipcountry');
  const backend = API_HOSTS[country] || API_HOSTS['US'];
  url.hostname = backend;

  // Build request. Keep track of the original Host.
  const req = new Request(url, request);
  req.headers.append('X-Forwarded-Host', forwardedHost);

  // Execute request
  return fetch(req);
}

// -------------------------------------------------
// Routing rules
// -------------------------------------------------
RT.any('app.mydomain.com/api/*', backendProxy)
RT.any('app.mydomain.com/auth/*', backendProxy)
RT.any('app.mydomain.com/*', proxyTo(SPA_HOST))

// -------------------------------------------------
// Handler
// -------------------------------------------------
async function handleRequest(request) {
    const resp = await RT.route(request);
    return resp;
}

// Entrypoint
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

Я рекомендую смотреть на Примеры рабочих облаков Почувствовать то, что вы можете достичь.

Работники CloudFlare позволяют вам не только развернуть ваш SPA (ы), но также контролировать все фасад вашего приложения.

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

Если вы обнаружите, что вы ограничитесь вашими текущими возможностями управления движением, я рекомендую вам попробовать работников CloudFlare.

Оригинал: «https://dev.to/alachaum/deploy-your-spa-and-programmatically-manage-traffic-with-cloudflare-workers-1hal»