查爾斯·厄勒(Charles Ouellet) (By Charles Ouellet)

The word serverless is buzzing through dozens of dev circles today.

如今， 無(wú)服務(wù)器一詞正在數(shù)十個(gè)開(kāi)發(fā)界中流行。

It has been for a while now.

已經(jīng)有一段時(shí)間了。

I’ve been meaning to exit my code editor and come talk about the trend here. Especially since I discovered Webtask, a few months ago.

我一直想退出我的代碼編輯器，然后在這里談?wù)撢厔?shì)。 特別是自幾個(gè)月前我發(fā)現(xiàn)Webtask以來(lái)。

So, in between bug fixes, support & new features, I finally took some time to sit down and write a little.

因此，在錯(cuò)誤修復(fù)，支持和新功能之間，我終于花了一些時(shí)間坐下來(lái)寫(xiě)一點(diǎn)東西。

In this post, I’ll touch on serverless architectures and Backend as a Service tools a bit. But I’ll mostly focus on offering a simple yet meaningful serverless e-commerce tutorial. And I’ll use our own HTML/JS shopping cart platform & Webtask to do so.

在本文中，我將稍微介紹一下無(wú)服務(wù)器架構(gòu)和后端即服務(wù)工具。 但是，我主要集中在提供一個(gè)簡(jiǎn)單而有意義的無(wú)服務(wù)器電子商務(wù)教程。 而且，我將使用我們自己HTML / JS購(gòu)物車(chē)平臺(tái)和Webtask來(lái)實(shí)現(xiàn)。

什么是無(wú)服務(wù)器架構(gòu)，為什么要關(guān)心？ (What is a serverless architecture, and why should you care?)

Like the “JAMstack”, serverless architecture is a new web development trend subscribing to the “rise of the frontend” paradigm we’re in. In layman’s terms, it’s a way to run server-side code in the cloud without worrying about web servers, routing, etc. It relies heavily on Backend as a Service (Baas) third parties such as Webtask, or the most popular kid on the block: AWS Lambda. With these BaaS services, you just write code and let them take care of all the underlying infrastructure. Scaling-wise, such an approach is quite awesome: the abstraction layer these services offer can handle peaks of traffic on your site wonderfully.

像“ JAMstack”一樣 ， 無(wú)服務(wù)器架構(gòu)是一種新的Web開(kāi)發(fā)趨勢(shì)，它遵循了我們所處的“前端”范式。用外行的話(huà)來(lái)說(shuō)，這是一種在云中運(yùn)行服務(wù)器端代碼而無(wú)需擔(dān)心Web服務(wù)器的方法。 ，路由等。它在很大程度上依賴(lài)于后端即服務(wù)(Baas)第三方，例如Webtask或該區(qū)塊中最受歡迎的孩子： AWS Lambda 。 使用這些BaaS服務(wù)，您只需編寫(xiě)代碼，并讓它們處理所有底層基礎(chǔ)結(jié)構(gòu)。 在擴(kuò)展方面，這種方法非常出色：這些服務(wù)提供的抽象層可以出色地處理您網(wǎng)站上的流量高峰。

As you may know, we’re big fans of the JAMstack (JavaScript, APIs & Markup) here at Snipcart. It’s another vibrant expression of the “rise of the frontend” paradigm I mentioned. We’ve written whole tutorials on how to run e-commerce with static site generators such as Jekyll or Hugo, and even with API-first CMS like Contentful. From cost to tech stacks shifts, I believe such an approach will deeply impact how businesses handle web development in the next years.

如您所知，我們是Snipcart的JAMstack (JavaScript，API和標(biāo)記)的忠實(shí)擁護(hù)者。 這是我提到的“前端崛起”范式的又一個(gè)生動(dòng)表達(dá)。 我們已經(jīng)編寫(xiě)了完整的教程，介紹如何使用靜態(tài)網(wǎng)站生成器(例如Jekyll或Hugo ，甚至使用像Contentful這樣的API優(yōu)先CMS)來(lái)運(yùn)行電子商務(wù)。 從成本到技術(shù)堆棧的轉(zhuǎn)變，我相信這種方法將在未來(lái)幾年深刻影響企業(yè)處理Web開(kāi)發(fā)的方式。

However, I’m aware that it has its limits: a modern static site is raw content, which means using dynamic features such as webhooks would be impossible without some server-side code. That’s where Webtask comes in.

但是，我知道它有其局限性：現(xiàn)代的靜態(tài)網(wǎng)站是原始內(nèi)容 ，這意味著如果沒(méi)有一些服務(wù)器端代碼，就不可能使用諸如webhooks之類(lèi)的動(dòng)態(tài)功能。 這就是Webtask出現(xiàn)的地方。

Webtask：目標(biāo)任務(wù)(或FaaS)的后端即服務(wù) (Webtask: Backend-as-as-Service for Targeted Tasks (or FaaS))

Webtask is a neat service crafted by Auth0, the good folks who made a serious dent in the online authentication world. Acting as a Function as a Service, it basically removes the need to configure a backend for simple mobile or single-page apps. Often compared to AWS Lambda, it allows developers to write server-side logic & functions executed via HTTP calls. So it’s one of the best Backend as a Service tools out there for developers who’d rather focus on the frontend than configure the backend.

Webtask是Auth0精心制作的一項(xiàng)精美服務(wù)， Auth0是在在線(xiàn)身份驗(yàn)證世界中大受打擊的好伙伴 。 作為功??能即服務(wù)，它基本上消除了為簡(jiǎn)單的移動(dòng)或單頁(yè)面應(yīng)用程序配置后端的需要。 與AWS Lambda相比 ，它通常使開(kāi)發(fā)人員可以編寫(xiě)通過(guò)HTTP調(diào)用執(zhí)行的服務(wù)器端邏輯和功能。 因此，對(duì)于那些寧愿專(zhuān)注于前端而不是配置后端的開(kāi)發(fā)人員來(lái)說(shuō)，它是最好的后端即服務(wù)工具之一。

Now let’s see how perfect it is for the use case we’ll explore in this serverless tutorial.

現(xiàn)在，讓我們看看在本無(wú)服務(wù)器教程中將探討的用例有多完美。

無(wú)服務(wù)器電子商務(wù)教程：webhooks和自定義運(yùn)費(fèi) (Serverless e-commerce tutorial: webhooks & custom shipping rates)

At Snipcart, I believe one of our most powerful features is the Webhooks Shipping API. Simply put, it gives you full control on how your e-commerce site handles shipping.

在Snipcart，我相信我們最強(qiáng)大的功能之一就是Webhooks Shipping API 。 簡(jiǎn)而言之，它使您可以完全控制電子商務(wù)網(wǎng)站如何處理運(yùn)輸。

However, leveraging this feature requires running server-side code. So if you wanted to use a JAMstack set up with a static site generator, you’d be screwed. Thanks to Webtask, however, you’re not! In this serverless tutorial, we’ll use it to host the e-commerce shipping function we need directly via their platform.

但是，利用此功能需要運(yùn)行服務(wù)器端代碼。 因此，如果您想使用帶有靜態(tài)站點(diǎn)生成器的JAMstack設(shè)置，那將會(huì)很麻煩。 幸虧有了Webtask，您不是！ 在本無(wú)服務(wù)器教程中，我們將使用它直接通過(guò)其平臺(tái)托管我們需要的電子商務(wù)運(yùn)送功能。

我們簡(jiǎn)單的無(wú)服務(wù)器電子商務(wù)用例 (Our simple serverless e-commerce use case)

Now, let’s pretend we have a static e-commerce site running with Snipcart.

現(xiàn)在，讓我們假設(shè)我們有一個(gè)與Snipcart一起運(yùn)行的靜態(tài)電子商務(wù)網(wǎng)站。

And let’s say we want to offer three special shipping rates:

假設(shè)我們要提供三種特殊的運(yùn)費(fèi)：

• One for customers in our Québec hometown
  在魁北克故鄉(xiāng)為客戶(hù)提供的一種
• One for US customers
  一個(gè)給美國(guó)客戶(hù)
• One for all other international customers
  一個(gè)供所有其他國(guó)際客戶(hù)使用

1.如何創(chuàng)建Webtask功能 (1. How to create the Webtask function)

First of all, let me explain a little how our shipping API works. Snipcart sends all the order details to a URL you can specify in your merchant dashboard. Using this data, you can then write code to return available shipping rates to your end customers.

首先，讓我解釋一下我們的運(yùn)輸API如何工作。 Snipcart將所有訂單詳細(xì)信息發(fā)送到您可以在商家信息中心中指定的URL。 然后，使用這些數(shù)據(jù)，您可以編寫(xiě)代碼以將可用的運(yùn)費(fèi)退還給最終客戶(hù)。

Start by creating an account on https://webtask.io/. Once it’s done, follow their steps to install the Webtask CLI via npm.

首先在 https://webtask.io/ 上創(chuàng)建一個(gè)帳戶(hù) 。 完成后，請(qǐng)按照他們的步驟通過(guò) npm 安裝Webtask CLI 。

We’ll now create a file named shipping_task.js. It'll contain all the code needed to parse the order details received from Snipcart and return the available shipping rates.

現(xiàn)在，我們將創(chuàng)建一個(gè)名為shipping_task.js的文件。 它包含解析從Snipcart收到的訂單詳細(xì)信息并返回可用運(yùn)費(fèi)的所有代碼。

Let’s start by exporting a module that Webtask will understand.

讓我們從導(dǎo)出Webtask可以理解的模塊開(kāi)始。

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

The first parameter, context, contains the data Snipcart will send to your application. Webtask takes care of parsing the JSON, and you can access all the event details along with the order via context.body.

第一個(gè)參數(shù)context是包含Snipcart將發(fā)送到您的應(yīng)用程序的數(shù)據(jù)。 Webtask負(fù)責(zé)解析JSON，您可以通過(guò)context.body訪(fǎng)問(wèn)所有事件詳細(xì)信息以及順序。

With the code above, our task would return the request body that it received; pretty useless. ;)

使用上面的代碼，我們的任務(wù)將返回它收到的請(qǐng)求正文； 真沒(méi)用。 ;)

Now let’s say we want to offer free shipping for customers in Québec.

現(xiàn)在，我們要為魁北克的客戶(hù)提供免費(fèi)送貨。

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 }); }

Ain’t that nice? However, with this code, customers outside Québec won’t have any shipping options. So we’ll make sure to return a standard shipping rate in case the order does not match our conditions:

那不是很好嗎？ 但是，使用此代碼，魁北克省以外的客戶(hù)將沒(méi)有任何運(yùn)送選擇。 因此，如果訂單不符合我們的條件，我們將確保返回標(biāo)準(zhǔn)的運(yùn)費(fèi)：

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

You can see below the complete code with some additional conditions:

您可以在完整的代碼下方看到一些附加條件：

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 will then generate a URL; you should see it in your terminal.

然后，Webtask將生成一個(gè)URL。 您應(yīng)該在終端中看到它。

Simply use this URL and when configuring the Webhooks Shipping API.

在配置Webhooks運(yùn)送API時(shí)，只需使用此URL。

2.保護(hù)無(wú)服務(wù)器組件 (2. Securing the serverless component)

With our current set up, anyone could send requests to this API, right? That’s not something we want. So we’ll make sure that the function only handles requests coming from Snipcart. We’ll use our request validation API to do so.

通過(guò)我們當(dāng)前的設(shè)置，任何人都可以向該API發(fā)送請(qǐng)求，對(duì)嗎？ 那不是我們想要的東西。 因此，我們將確保該函數(shù)僅處理來(lái)自Snipcart的請(qǐng)求。 我們將使用請(qǐng)求驗(yàn)證API來(lái)執(zhí)行此操作。

First, we’ll need to send a Snipcart secret API key to the task in order to call the request validation API. We don’t want to expose it directly through the code, so we’re going to use the secrets feature that Webtask has. It allows us to pass secret parameters to the task that will be encrypted and accessible via the context object.

首先，我們需要向任務(wù)發(fā)送Snipcart秘密API密鑰，以調(diào)用請(qǐng)求驗(yàn)證API。 我們不想直接通過(guò)代碼公開(kāi)它，因此我們將使用Webtask具有的secrets功能。 它允許我們將秘密參數(shù)傳遞給將被加密并可以通過(guò)context對(duì)象訪(fǎng)問(wèn)的任務(wù)。

When creating the task, I added the --secret switch:

創(chuàng)建任務(wù)時(shí)，我添加了--secret開(kāi)關(guān)：

wt create shipping_task.js — secret snipcartApiKey=MY_SECRET_API_KEY

You will then be able to access this value using context.secrets.snipcartApiKey. We'll also use the request module, so we'll need to require it at the beginning of the file:

然后，您將可以使用context.secrets.snipcartApiKey訪(fǎng)問(wèn)此值。 我們還將使用request模塊，因此我們需要在文件開(kāi)頭要求它：

var request = require('request');

When we make requests to your Webhooks, we always include a request token in the request headers. The header is named X-Snipcart-RequestToken. We'll access it through our context object again:

當(dāng)我們向您的Webhooks發(fā)出請(qǐng)求時(shí)，我們總是在請(qǐng)求標(biāo)頭中包含一個(gè)請(qǐng)求令牌。 標(biāo)頭名為X-Snipcart-RequestToken 。 我們將再次通過(guò)context對(duì)象訪(fǎng)問(wèn)它：

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

Please note that all the headers are in lower cases with Webtask.

請(qǐng)注意，Webtask的所有標(biāo)頭均小寫(xiě)。

Here are the options we’ll use to send the request to our API:

以下是我們用于將請(qǐng)求發(fā)送到我們的API的選項(xiàng)：

var requestToken = context.headers['x-snipcart-requesttoken']; var secretApiKey = context.secrets.snipcartApiKey;var requestOptions = {url: 'https://app.snipcart.com/api/requestvalidation/' + requestToken,headers: {"Accept": "application/json"},auth: {user: secretApiKey} };

We’ll run this request and only execute the code in the callback if it’s successful.

我們將運(yùn)行此請(qǐng)求，僅在成功的情況下在回調(diào)中執(zhí)行代碼。

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!");} });

So my whole function now looks like this:

所以我的整個(gè)函數(shù)現(xiàn)在看起來(lái)像這樣：

var request = require('request');module.exports = function (context, cb) {var requestToken = context.headers['x-snipcart-requesttoken'];var secretApiKey = context.secrets.snipcartApiKey;var requestOptions = {url: 'https://app.snipcart.com/api/requestvalidation/' + 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結(jié)束語(yǔ)和無(wú)服務(wù)器方法 (Closing words on Webtask & the serverless approach)

Coming up with this little Webtask function for a static site running Snipcart took me less than two hours. Of course, we could’ve focused on other e-commerce functions: handling webhooks to make the bridge between Snipcart and external accounting systems, automating digital goods delivery, and more.

對(duì)于運(yùn)行Snipcart的靜態(tài)網(wǎng)站，想出了這個(gè)小的Webtask功能，花了我不到兩個(gè)小時(shí)的時(shí)間。 當(dāng)然，我們本可以專(zhuān)注于其他電子商務(wù)功能：處理Webhooks以在Snipcart和外部會(huì)計(jì)系統(tǒng)之間架起橋梁，實(shí)現(xiàn)數(shù)字商品交付的自動(dòng)化等。

I really believe there are tons of exciting serverless use cases developers should try to handle with Auth0’s Webtask. Any integration with an API, or delegating more long-running/CPU-consuming jobs would make much sense!

我真的相信開(kāi)發(fā)人員應(yīng)該嘗試使用Auth0的Webtask處理大量令人興奮的無(wú)服務(wù)器用例。 與API進(jìn)行任何集成，或委派更多長(zhǎng)時(shí)間運(yùn)行/占用CPU的作業(yè)都非常有意義！

The serverless approach is gearing up to have quite an impact on our work as developers. As we’re now seeing with RESTful APIs, many services will start relying on functions developed or hosted by others. The near future will bring more and more microservices hosted in environments like Webtask & AWS Lambda. Especially coupled with the rise of frameworks like Vue & the JAMstack.

無(wú)服務(wù)器方法正在加速發(fā)展，對(duì)我們作為開(kāi)發(fā)人員的工作產(chǎn)生很大影響。 正如我們現(xiàn)在使用RESTful API所看到的那樣，許多服務(wù)將開(kāi)始依賴(lài)于其他人開(kāi)發(fā)或托管的功能。 在不久的將來(lái)，將在Webtask和AWS Lambda等環(huán)境中托管越來(lái)越多的微服務(wù)。 特別是隨著Vue和JAMstack等框架的興起。

So I sincerely hope this post inspires developers to leverage the FaaS power of Webtask on different serverless projects, e-commerce or not. And of course, I’d be more than interested to have a look at such set ups. You can shoot us an email at geeks@snipcart.com if you got something similar to share, or if you have questions regarding this approach!

因此，我衷心希望這篇文章能激發(fā)開(kāi)發(fā)人員在不同的無(wú)服務(wù)器項(xiàng)目(無(wú)論是否為電子商務(wù))中利用Webtask的FaaS功能。 當(dāng)然，我對(duì)研究這樣的設(shè)置非常感興趣。 如果您有類(lèi)似的分享內(nèi)容，或者對(duì)這種方法有疑問(wèn)，可以通過(guò)geeks@snipcart.com向我們發(fā)送電子郵件。

Liked the post? Take a second to ? and share it on Twitter!

喜歡這個(gè)職位嗎？ 花一秒鐘來(lái)？ 并在Twitter上分享 ！

Originally published on the Snipcart blog and in our newsletter.

最初發(fā)布在 Snipcart博客 和 我們的時(shí)事通訊中 。

翻譯自: https://www.freecodecamp.org/news/webtask-backend-as-a-service-quick-serverless-tutorial/

總結(jié)

以上是生活随笔為你收集整理的Webtask后端即服务：无服务器快速教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。