Webtask Backend-as-a-Service: Краткое руководство без сервера

webtask backend as a service kratkoe rukovodstvo bez servera

Автор: Шарль Уэлле

Слово бессерверный сегодня гудит через десятки кругов разработчиков.

Это было уже некоторое время.

Я собирался выйти из редактора кода и прийти поговорить о тенденции здесь. Тем более что несколько месяцев назад я открыл Webtask.

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

В этой публикации я немного коснусь бессерверных архитектур и инструментов Backend as a Service. Но я по большей части сосредоточусь на том, чтобы предложить простое, но значимое руководство по электронной коммерции без сервера. И я буду использовать нашу собственную платформу корзины для покупок HTML/JS и Webtask для этого.

Что такое бессерверная архитектура и почему вам это важно?

Как и «JAMstack», бессерверная архитектура это новая тенденция веб-разработки, поддерживающая парадигму «повышение интерфейса». Говоря просто так, это способ запускать серверный код в облаке, не беспокоясь о веб-серверах, маршрутизации и т.д. на Бекенд как услуга (Baas) сторонними сторонами, такими как Webtask или самым популярным участником блока: AWS Lambda. С помощью этих служб BaaS вы просто пишете код и позволяете им позаботиться обо всей базовой инфраструктуре. С точки зрения масштабирования такой подход очень потрясающий: уровень абстракции, который предлагают эти сервисы, может отлично справиться с пиками трафика на вашем сайте.

Как вы, возможно, знаете, мы великие поклонники JAMstack (JavaScript, API и разметка) здесь, в Snipcart. Это еще одно яркое выражение парадигмы «возвышения фронтенда», о которой я упоминал. Мы написали целые учебники о том, как запустить электронную коммерцию с помощью генераторов статических сайтов, таких как Jekyll или Hugo, и даже с CMS с применением API, таких как Contentful. Я считаю, что такой подход существенно повлияет на то, как компании будут работать с веб-разработкой в ​​последующие годы.

Однако я осознаю, что это имеет свои пределы: современный статический сайт есть необработанное содержимоечто означает использование динамических функций, таких как веб-хуки, было бы невозможно без некоторые код на стороне сервера. Вот здесь на помощь приходит Webtask.

Webtask: Backend-as-Service для целевых задач (или FaaS)

Webtask — это отличный сервис, созданный Auth0, хорошими людьми, которые нанесли серьезный удар в мире онлайн-аутентификации. Выступая в качестве функции как услуга, она в основном устраняет необходимость настраивать бэкенд для простых мобильных или одностраничных программ. Часто по сравнению с AWS Lambda он позволяет разработчикам писать логику и функции на стороне сервера, выполняемых с помощью вызовов HTTP. Таким образом, это один из лучших инструментов Backend as a Service для разработчиков, предпочитающих сосредоточиться на интерфейсе, чем настраивать его.

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

Учебник по электронной коммерции без сервера: веб-хуки и специальные тарифы на доставку

В Snipcart я считаю, что одной из наших мощнейших функций является API доставки Webhooks. Проще говоря, это дает вам полный контроль над тем, как ваш веб-сайт электронной коммерции обрабатывает доставку.

Однако для использования этой функции требуется код на стороне сервера. Итак, если вы хотите использовать JAMstack, настроенный с генератором статических сайтов, вы были бы обмануты. Но благодаря Webtask это не так! В этом бессерверном учебнике мы будем использовать его для размещения нужной нам функции доставки электронной коммерции непосредственно через их платформу.

Наш простой вариант использования электронной коммерции без сервера

Теперь представим, что у нас есть статический сайт электронной коммерции, работающий со Snipcart.

И скажем, мы хотим предложить три специальных тарифа на доставку:

  • Один для клиентов в нашем родном городе Квебек
  • Один для клиентов из США
  • Один для всех других международных клиентов

1. Как создать функцию Webtask

Прежде всего, позвольте мне немного объяснить, как работает наш API доставки. Snipcart отправляет все детали заказа на URL, который вы можете указать на информационной панели продавца. Используя эти данные, вы можете написать код, чтобы вернуть конечным клиентам доступные тарифы на доставку.

Начните с создания аккаунта на Когда это будет сделано, следуйте их шагам, чтобы установить Webtask CLI через npm.

Теперь мы создадим файл с именем shipping_task.js. Он будет содержать весь код, необходимый для анализа деталей заказа, полученных от Snipcart, и возврат доступных тарифов доставки.

Начнём с экспорта модуля, который поймет Webtask.

module.exports = function (context, cb) {
    cb(null, context.body);
}

Первый параметр, контекст, содержит данные, которые Snipcart отправляет вашему приложению. Webtask занимается анализом JSON, и вы можете получить доступ ко всем деталям события вместе с заказом через context.body.

С вышеприведенным кодом наша задача вернет тело запроса, которое оно получило; довольно бесполезно. 😉

Теперь, допустим, мы хотим предложить бесплатную доставку для клиентов в Квебеке.

module.exports = function (context, cb) {
    var orderDetails = context.body.content;
    var rates = [];
    
    var address = orderDetails.shippingAddress || order.billingAddress;
    
    if (address.country == "CA" && address.province == "QC") {
      rates.push({
        cost: 0,
        description: "Free shipping for Québec residents!"
      });
    }
    
    cb(null, { rates: rates });
}

Разве это неприятно? Однако с этим кодом клиенты за пределами Квебека не будут иметь никаких вариантов доставки. Поэтому мы обязательно вернем стандартную ставку доставки, если заказ не отвечает нашим условиям:

if (rates.length === 0) {
  rates.push({
    cost: 20,
    description: "Standard shipping"
  });  
}

Ниже можно увидеть полный код с некоторыми дополнительными условиями:

module.exports = function (context, cb) {
    console.log(context.body);

    var orderDetails = context.body.content;

    var rates = [];

    var address = orderDetails.shippingAddress || order.billingAddress;

    if (address.country == "CA" && address.province == "QC") {
      rates.push({
        cost: 0,
        description: "Free shipping for Québec residents!"
      });
    }

    if (address.country == "CA" && address.province != "QC") {
      rates.push({
        cost: 10,
        description: "Shipping to Canada"
      });
    }

    if (address.country == "US") {
      rates.push({
        cost: 15,
        description: "Shipping to US"
      });
    }

    if (rates.length === 0) {
      rates.push({
        cost: 20,
        description: "Standard shipping"
      });
    }

    cb(null, { rates: rates });
}

Webtask затем сгенерирует URL-адрес; вы должны увидеть это в своем терминале.

Просто используйте этот URL и при настройке API доставки Webhooks.

2. Защита бессерверного компонента

С нашими текущими настройками кто-либо мог посылать запросы к этому API, не правда ли? Это не то, что мы хотим. Поэтому мы убедимся, что функция обрабатывает только поступающие запросы от Snipcart. Для этого мы будем использовать наш API проверки запросов.

Во-первых, нам нужно отправить секретный ключ API Snipcart в задачу, чтобы вызвать API проверки запроса. Мы не хотим раскрывать его непосредственно через код, поэтому мы собираемся использовать secrets функция Webtask. Это позволяет нам передавать секретные параметры задачи, которая будет зашифрована и доступна через файл context объект.

При создании задания я добавил --secret переключатель:

wt create shipping_task.js — secret snipcartApiKey=MY_SECRET_API_KEY

Тогда вы сможете получить доступ к этому значению с помощью context.secrets.snipcartApiKey. Мы также воспользуемся request модуль, поэтому нам понадобится его в начале файла:

var request = require('request');

Когда мы предоставляем запросы к вашим веб-хукам, мы всегда включаем маркер запроса в заголовки запроса. Заголовок имеет название X-Snipcart-RequestToken. Мы получим доступ к нему через нашу context снова возразил:

var requestToken = context.headers['x-snipcart-requesttoken'];

Обратите внимание, что все заголовки в Webtask написаны в нижнем регистре.

Вот параметры, которые мы будем использовать, чтобы отправить запрос на наш API:

var requestToken = context.headers['x-snipcart-requesttoken'];
var secretApiKey = context.secrets.snipcartApiKey;

var requestOptions = {
  url: ' + requestToken,
  headers: {
    "Accept": "application/json"
  },
  auth: {
    user: secretApiKey
  }
};

Мы выполним этот запрос и выполняем код в обратном вызове только если он успешен.

request(requestOptions, function(error, response, body) {
  if (response.statusCode === 200) {
      // Return rates
  } else {
    // Return an error when the request does not come from Snipcart.    
    cb("Only Snipcart can call this code!");
  }
});

Итак, вся моя функция теперь выглядит так:

var request = require('request');

module.exports = function (context, cb) {
  var requestToken = context.headers['x-snipcart-requesttoken'];
  var secretApiKey = context.secrets.snipcartApiKey;

  var requestOptions = {
    url: ' + requestToken,
    headers: {
      "Accept": "application/json"
    },
    auth: {
      user: secretApiKey
    }
  };

  request(requestOptions, function(error, response, body) {
    if (response.statusCode === 200) {
      var orderDetails = context.body.content;
      var rates = [];

      var address = orderDetails.shippingAddress || order.billingAddress;

      if (address.country == "CA" && address.province == "QC") {
        rates.push({
          cost: 0,
          description: "Free shipping for Québec residents!"
        });
      }

      if (address.country == "CA" && address.province != "QC") {
        rates.push({
          cost: 10,
          description: "Shipping to Canada"
        });
      }

      if (address.country == "US") {
        rates.push({
          cost: 15,
          description: "Shipping to US"
        });
      }

      if (rates.length === 0) {
        rates.push({
          cost: 20,
          description: "Standard shipping"
        });
      }

      cb(null, { rates: rates });
    }
    else {
      cb("Only Snipcart can call this code!");
    }
  });
}

Заключительные слова о Webtask и бессерверном подходе

Выдумка этой маленькой функции Webtask для статического сайта, на котором работает Snipcart, заняло у меня менее двух часов. Конечно мы могли бы сосредоточиться на других функциях электронной коммерции: обработке веб-хуков, чтобы создать мост между Snipcart и внешними учетными системами, автоматизации доставки цифровых товаров и т.д.

Я действительно верю, что существует множество увлекательных случаев использования без сервера, которые разработчики должны попытаться справиться с Webtask Auth0. Любая интеграция с API или делегирование более длительных задач или задач, потребляющих ЦБ, имела бы большой смысл!

Бессерверный подход готовится очень сильно повлиять на нашу работу в качестве разработчиков. Как мы видим с API RESTful, многие службы начнут полагаться на функции, разработанные или размещенные другими. В ближайшее время будет все больше микросервисов, размещенных в таких средах, как Webtask и AWS Lambda. Особенно в сочетании с появлением таких фреймворков как Vue и JAMstack.

Поэтому я искренне надеюсь, что эта публикация вдохновит разработчиков использовать возможности FaaS Webtask для различных бессерверных проектов, электронной коммерции или нет. И, конечно, мне было бы более интересно посмотреть на такие установки. Вы можете отправить нам электронное письмо на geeks@snipcart.com, если у вас есть что-то подобное, чем поделиться, или если у вас есть вопросы по этому подходу!

Понравился пост? Выделить секунду, чтобы ? и поделитесь им в Twitter!

Первоначально опубликовано на Блог Snipcart и в наш информационный бюллетень.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *