×

Web前端开发:无服务器功能及其部署指南

作者:Web前端之家2021.03.24来源:Web前端之家浏览:471评论:0
微信公众号

微信公众号

500.jpg

在过去的几年中,无服务器功能(有时也称为“无服务器”或“无服务器计算”)已成为一种流行的技术。但是,这个词仍然有很多困惑。没有服务器如何运行代码?该技术的优缺点是什么?您可能在什么情况下使用它?在本文中,我希望回答这些问题,并为您提供有关该技术的良好概述。

什么是无服务器功能?

第一次听到“无服务器”一词肯定会引起好奇。“如何在没有服务器的情况下在网络上运行代码?” 你可能想知道。实际上,这意味着作为开发人员,您不必担心代码在其上运行的服务器。无服务器提供者将硬件的供应,配置网络,安装软件和扩展都抽象化了。

从开发角度来看,无服务器功能是您上传到无服务器提供程序(例如AWS或Google)的一捆代码。可以将该代码配置为通过URL响应请求,按计划运行(即通过cron作业)或从其他服务或无服务器功能调用。

无服务器功能非常适合在前端应用程序中添加一些后端功能,而又无需运行完整服务器的复杂性和成本。

另一方面,您还可以使用无服务器功能构建整个应用程序。结合提供文件存储,数据库系统和身份验证的其他云服务,可以构建大型,健壮和可扩展的应用程序,而无需配置单个服务器。

无服务器功能的优点

无服务器功能在按需启动的微型容器中运行。它们是为运行时间较短的流程而设计的,因此记帐时要牢记这一点。与通常按小时计费的完整服务器实例不同,无服务器功能通常按GB-秒计费。以毫秒为单位的最小计费持续时间,低频或零星的工作负载作为无服务器功能运行比传统服务器实例便宜得多。轻量级工作负载和原型制作甚至可以属于某些提供商的免费套餐。

无服务器功能的按需调用意味着它们可以快速轻松地扩展,而无需开发人员方面的额外工作。这使它们成为流量不可预期的高峰的理想选择,因为将自动提供更多功能实例来处理负载。之后,该功能将按比例缩小,这意味着您无需为未使用的容量付费。

无服务器模型的主要优点是不必处理服务器。运行Web应用程序需要大量时间和服务器管理方面的专业知识,才能使软件与最新的安全补丁保持同步,并确保正确配置服务器以确保其安全性和性能。对于初创企业和小型企业,雇用人员来处理服务器管理是一笔很大的额外开销。借助无服务器,开发人员可以专注于创建解决方案。

无服务器功能的缺点

当然,没有技术是完美的,无服务器功能并非没有缺点。正如我之前提到的,无服务器模型在设计时考虑到了短暂的过程。以分钟为单位的最大执行时间(例如,在AWS上为15,在Google上为9),它不适合长时间运行的工作,例如处理大量数据。

另一个广泛讨论的问题是冷启动时间。这是提供商在准备好开始运行之前为无服务器功能预配和初始化容器所花费的时间。一旦函数完成运行,如果再次执行代码,则容器将保留很短的时间以备重用。这种“冷启动”延迟可能会使功能的响应时间增加半秒到一秒。有一些解决方法,包括Serverless框架的WarmUp插件,该插件按计划ping您的函数以使容器保持活动状态。

尽管无服务器功能使您不必担心服务器配置和维护,但这并不是说没有学习曲线。使用无服务器构建应用程序需要与使用传统的单片代码库不同的思维方式。您必须以不同的方式来构造代码,将功能分解为更小的,离散的服务,以适应无服务器功能的约束。部署也更加复杂,因为每个功能都是独立版本和更新的。

还存在供应商锁定的问题,这有时被称为无服务器技术的不利方面。按照目前的情况,该领域的主要提供商(AWS,Google,Azure)具有各自不同的实现和管理工具。这可能使将无服务器应用程序从一个云提供商迁移到另一云提供商变得困难。诸如无服务器框架之类的项目已尝试抽象化基础服务,以使应用程序在提供程序之间可移植。

无服务器功能用例

尽管无服务器功能可以用于构建整个应用程序,但让我们看一些不那么雄心勃勃的用例,其中无服务器可以使普通开发人员受益。

表格邮件

除了用户希望在用户点击“发送”时通过电子邮件将其发送给客户的联系方式之外,网站完全是静态的并不少见。该站点的托管提供程序可能支持也可能不支持服务器端脚本,即使如此,它也可能不是您所熟悉的语言。通过将无服务器功能设置为表单邮件程序,可以将功能添加到静态主机上的站点。

Cron工作

有时您可能需要在后台运行计划任务。通常,您必须为一台服务器付费才能设置cron作业,而该服务器将在两次作业之间处于空闲状态。借助无服务器功能,您只需支付作业的运行时间(如果属于免费套餐,则可能根本不用花钱)。

缩略图生成器

想象一下,您的React应用程序允许用户上传照片,以在整个应用程序中用作头像。您想调整上传图像的大小,以免通过提供远远超出所需大小的图像来浪费带宽。可以使用无服务器功能来处理上传请求,将图像调整为所需的大小,然后保存到诸如S3或Google Storage之类的服务中。

无服务器功能的实际示例

为了更深入地了解如何使用无服务器功能,我们来看一个真实的示例。我们将创建一个带有新闻简报注册表单的静态页面,该页面使用无服务器功能将用户名和电子邮件地址保存到Google电子表格中。

取决于提供程序,无服务器功能可以用多种语言编写,但是我们将使用JavaScript,因为Netlify支持Node.js函数。我将假设您已经在本地计算机上安装了最新版本的Node / npm,以便进行后续操作。

1.注册一个Netlify帐户

在本示例中,我们将使用Netlify作为主机,因为它们提供了包括无服务器功能的免费层,并且非常容易启动和运行。首先,跳至他们的网站并注册一个免费帐户[https://app.netlify.com/signup]。

2.安装Netlify CLI工具

为了在本地测试示例站点并部署到Netlify,我们将使用其CLI工具。可以从命令行将其作为全局npm模块安装:

npm install -g netlify-cli

安装CLI后,运行以下命令将打开浏览器窗口,以将CLI连接到您的帐户:

netlify login

3.创建一个项目文件夹并安装依赖项

让我们为项目创建一个文件夹,并初始化一个新的npm项目:

mkdir serverless-mailinglist && cd serverless-mailinglistnpm init -y

这将为我们设置package.json项目文件,准备安装依赖项。说到这,我们将需要几个软件包来实现我们的无服务器功能:

npm install dotenv google-spreadsheet

第一个是dotenv,它是一个软件包,该软件包可让我们从.env项目根目录中的文件中加载值,并将其公开给Node脚本(我们的无服务器功能),就好像它们是环境变量一样。另一个是google-spreadsheet,这是一个包装了Google Sheets API并易于使用的软件包。

4.启用Google Sheets API并创建凭据

为了使用Sheets API,我们需要做一些准备工作。首先,您需要转到API控制台来为您的Google帐户启用API。从顶部的菜单中创建一个新项目,然后单击“启用”按钮。

完成后,您将需要创建一个服务帐户。此帐户将为您提供一组凭据,这些凭据具有访问API所需的权限。为此,请按照下列步骤操作:

  1. 确保您位于Sheets API管理屏幕上。

  2. 单击左侧边栏中的凭据,然后单击+创建凭据,然后从下拉列表中选择服务帐户。

  3. 填写表格,为服务帐户选择一个名称。您选择的名称加上项目名称将成为服务帐户ID的一部分。例如,如果您将帐户命名为“ Mailing List”,而项目名称是“ Sitepoint Serverless Demo”,则ID类似于mailing-list@sitepoint-serverless-demo.iam.gserviceaccount.com。点击创建。

  4. 您可以跳过页面上其余的两个可选部分。单击继续,然后单击完成。

  5. 接下来,单击新创建的服务帐户。这将带您到一个显示帐户详细信息的屏幕。点击顶部菜单中的KEYS,然后点击Add Key和Create new key。选择JSON作为密钥类型。

  6. 单击CREATE按钮,然后JSON密钥文件将下载到您的计算机。(注意:这是唯一的副本,因此请确保安全!)

5.创建注册表单页面

让我们继续创建一个简单的注册页面,该页面将允许用户将其详细信息提交到我们的邮件列表。index.html在项目根目录中创建一个文件,内容如下:

<!DOCTYPE html><html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Sign Up For Beta Form</title>
    <link rel="stylesheet" href="style.css">
    <link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <form action="/.netlify/functions/subscribe" method="post">
      <div class="header">
         <p>Get Great Content Every Week</p>
      </div>
      <div class="description">
        <p>I publish new articles every week. Be sure to subscribe to my newsletter to make sure you never miss a post!</p>
      </div>
      <div class="input">
        <input type="text" class="button" id="name" name="name" placeholder="YOUR NAME">
      </div>
      <div class="input">
        <input type="text" class="button" id="email" name="email" placeholder="NAME@EXAMPLE.COM">
        <input type="submit" class="button" id="submit" value="SIGN UP">
      </div>
    </form>
  </body></html>

和一个style.css文件,具有以下规则:


body {
  background: #A6E9D7;
  font-family: 'Lato', sans-serif;
  color: #FDFCFB;
  text-align: center;
  background-image: url(https://images.pexels.com/photos/326311/pexels-photo-326311.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940)}form {
  width: 450px;
  margin: 17% auto;}.header {
  font-size: 35px;
  text-transform: uppercase;
  letter-spacing: 5px;}.description {
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1.3em;
  margin: -2px 0 45px;}.input {
  display: flex;
  align-items: center;}.button {
  height: 44px;
  border: none;}#email {
  width: 75%;
  background: #FDFCFB;
  font-family: inherit;
  color: #737373;
  letter-spacing: 1px;
  text-indent: 5%;
  border-radius: 5px 0 0 5px;}#name {
  width: 100%;
  background: #FDFCFB;
  font-family: inherit;
  color: #737373;
  letter-spacing: 1px;
  text-indent: 5%;
  border-radius: 5px;
  margin-bottom: 1em;}#submit {
  width: 25%;
  height: 46px;
  background: #E86C8D;
  font-family: inherit;
  font-weight: bold;
  color: inherit;
  letter-spacing: 1px;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  transition: background .3s ease-in-out;}#submit:hover {
  background: #d45d7d;}input:focus {
  outline: none;
  outline: 2px solid #E86C8D;
  box-shadow: 0 0 2px #E86C8D;}

6.创建一个无服务器功能来处理表单

现在我们有了表单,我们需要为无服务器功能创建代码,该代码将处理POST请求,并通过API将数据保存到Google电子表格中。为了使Netlify部署我们的功能,我们必须遵循它们的命名约定,并netlify/functions/在我们的项目文件夹中创建文件夹路径。

在新功能文件夹中,创建一个JavaScript文件subscribe.js

if (!process.env.NETLIFY) {
  require('dotenv').config();}const { parse } = require('querystring');const { GoogleSpreadsheet } = require('google-spreadsheet');exports.handler = async (event, context) => {
  const doc = new GoogleSpreadsheet(process.env.GOOGLE_SPREADSHEET_ID_FROM_URL);
  await doc.useServiceAccountAuth({
    client_email: process.env.GOOGLE_SERVICE_ACCOUNT_EMAIL,
    private_key: process.env.GOOGLE_PRIVATE_KEY.replace(/\\n/g, '\n')
  });
  await doc.loadInfo();
  const sheet = doc.sheetsByIndex[0]; 
  try {
    if (event.httpMethod === 'POST') {
      /* parse the string body into a useable JS object */
      const data = parse(event.body);
      await sheet.addRow(data);
      return {
        statusCode: 302,
        headers: {
          Location: '/success.html'
        }
      };
    } else {
      return {
        statusCode: 500,
        body: 'unrecognized HTTP Method, must be POST'
      };
    }
  } catch (err) {
    console.error('error ocurred in processing ', event);
    console.error(err);
    return {
      statusCode: 500,
      body: err.toString()
    };
  }};

注意:该功能代码改编自具有Netlify Dev的博客文章Google Sheets v4 API【https://www.swyx.io/netlify-google-sheets/】。

Netlify的默认配置意味着该netlify/functions路径下的JavaScript文件可以在/.netlify/functions/URL(注意之前的句点netlify)加上文件名减去扩展名后调用。该文件netlify/functions/subscribe.js将在相对URL上可用/.netlify/functions/subscribe

基于节点的无服务器功能的基本要求是导出一个处理程序功能,该功能将在端点接收到请求时被调用。该函数传递两个参数。该event参数提供对请求详细信息的访问,例如标头和HTTP方法。通过该context参数,可以访问有关调用函数的上下文的信息,例如,包括已认证用户的详细信息。

函数代码本身使用提供的凭据连接到Google Sheets API。然后,它解析请求正文,并通过API将提交的名称和电子邮件地址添加到电子表格中。完成后,该函数将返回302响应,以将用户重定向到成功页面。(创建此页面留给读者完成。)

为了能够在本地测试该功能,我们需要.env在项目根目录中创建一个文件,并添加一些变量:

GOOGLE_SERVICE_ACCOUNT_EMAIL=mailing-list@sitepoint-serverless-demo.iam.gserviceaccount.comGOOGLE_PRIVATE_KEY=-----BEGIN PRIVATE KEY-----\nMIIEvQIBADANB \\etcGOOGLE_SPREADSHEET_ID_FROM_URL=1N8afdqnJjBhwXsvplIgU-5JoAFr3RapIrAS9oUybFnU

服务帐户电子邮件是您在步骤4中创建的电子邮件,私钥来自您下载的JSON密钥文件。最后一个,即电子表格ID,我们将在下一步中获取。

7.创建电子表格并共享

转到Google表格并创建一个新的电子表格。赋予它什么标题都没有关系,但是请记下URL中的ID,并将其添加到.env上一步中创建的文件中。

在电子表格的第一行中,添加两个列标题:name和email(请注意,区分大小写与HTML表单中的输入名称匹配非常重要)。由无服务器功能创建的条目将作为附加行添加在此下方。

现在,您必须授予创建的服务帐户访问电子表格的权限。单击共享按钮,然后在输入框中输入服务帐户的电子邮件地址。确保分配编辑者权限。

8.使用Netlify CLI在本地进行测试

Netlify CLI工具的一个不错的功能之一是,它允许您在发布到他们的服务之前在本地测试代码。要启动开发服务器,请运行以下命令:

netlify dev

一个新的浏览器选项卡将自动打开,并显示该站点。填写并提交表单将运行无服务器功能(本地提供),然后在成功时重定向浏览器。如果您跳至Google表格上的电子表格,则应该在新行中看到输入的详细信息。

9.部署到Netlify

CLI工具在模拟计算机上本地运行的Netlify服务方面做得很好,但是如果您想查看项目在其服务器上运行,则还可以使用CLI发布项目。

运行以下命令:

netlify deploy

然后按照提示进行操作。您的站点(包括无服务器功能)将发布到Web上。不要忘记,您还需要设置环境变量以镜像.env文件中的那些变量。您可以从Netlify网站的管理面板或通过CLI工具进行设置:

netlify env:set VAR_NAME value

无服务器:只是时尚,还是后端的未来?

同时,无服务器已成为时尚,并被誉为后端应用程序的未来。自2014年以来,亚马逊的Lambda功能已经存在,并且是AWS的重要产品。当然,在许多情况下,仍需要运行24/7并具有完全shell访问权限的实际服务器的灵活性和功能。

但是,正如我们已经看到的,对于某些类型的工作负载,无数的廉价成本,可伸缩性和低维护优势使其成为一个不错的选择。随着无服务器生态系统中书籍,课程,框架和服务的增加,可以肯定的是,无服务器功能将长期存在。


温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/qianduankaifa20210324a2.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • aj008

    有时间的话,还是两个都要学哦,未来的市场谁也说不定。...

  • 访客

    看你的公司用啥了,其实感觉环境第一位。...

  • Web前端之家

    vue的生态应用在国内很强大,但是react更加适用于中大型公司。...

  • agg151

    感觉在国内,VUE应该要排第一。...

  • qianduan008

    三角形工具一直在用,这个CSS编辑器也很不错,希望继续分享新的前端工具哟!...

  • Web前端之家

    其实还好,但是中大型公司都是在用React。vue比较好入门。...

  • abner

    React比VUE难学啊。...

  • 访客

    多学技术永远是最好的...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.7 Valyria