Web前端首页
开发工具
Web前端开发：无服务器功能及其部署指南

问答社区更多 >

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

作者：Terry2021.03.24来源：Web前端之家浏览：8000评论:0

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

什么是无服务器功能？

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

从开发角度来看，无服务器功能是您上传到无服务器提供程序（例如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所需的权限。为此，请按照下列步骤操作：

确保您位于Sheets API管理屏幕上。
单击左侧边栏中的凭据，然后单击+创建凭据，然后从下拉列表中选择服务帐户。
填写表格，为服务帐户选择一个名称。您选择的名称加上项目名称将成为服务帐户ID的一部分。例如，如果您将帐户命名为“ Mailing List”，而项目名称是“ Sitepoint Serverless Demo”，则ID类似于mailing-list@sitepoint-serverless-demo.iam.gserviceaccount.com。点击创建。
您可以跳过页面上其余的两个可选部分。单击继续，然后单击完成。
接下来，单击新创建的服务帐户。这将带您到一个显示帐户详细信息的屏幕。点击顶部菜单中的KEYS，然后点击Add Key和Create new key。选择JSON作为密钥类型。
单击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，我们将在下一步中获取。