使用 Netlify 和 JavaScript 构建无服务器应用程序

当您第一次听到“无服务器”一词时，肯定会激起您的好奇心。您可能想知道“如何在没有服务器的情况下在 Internet 上运行代码？”

这真正意味着，作为开发人员，您不必担心运行代码的服务器。硬件供应、网络配置、软件安装和扩展都由无服务器提供商抽象出来。

因此，在这篇文章中，我们将引导您逐步完成使用Netfly和JavaScript创建无服务器应用程序的过程。让我们来看看。

什么是无服务器应用程序

从开发的角度来看，无服务器函数是您上传到无服务器提供商（如AWS或Google ）的代码包。此代码可以配置为通过 URL 响应请求，按计划运行（即通过 cron 作业），或者从其他服务或无服务器功能调用。

无服务器功能非常适合向前端应用程序添加一些服务器功能，而无需运行完整服务器的复杂性和费用。您还可以构建具有无服务器功能的整个应用程序。

当与提供文件存储、数据库系统和身份验证的其他云服务相结合时，您可以创建大型、可靠且可扩展的应用程序，而无需专用单个服务器。

创建无服务器应用程序

为了更实际地了解使用无服务器功能，让我们看一个真实世界的例子。我们将创建一个带有时事通讯注册表单的静态页面，该表单使用无服务器功能将用户的姓名和电子邮件地址存储在 Google 电子表格中。

根据供应商的不同，无服务器函数可以用不同的语言编写，但我们将使用 JavaScript，因为 Netlify 支持 Node.js 函数。在开始之前，请确保您的本地计算机上安装了最新的Node / npm。

Node.js 初学者指南（服务器端 JavaScript）

当您第一次听到“无服务器”一词时，肯定会激起您的好奇心。你可能想知道“我如何在没有网络的情况下在互联网上运行代码？阅读更多

步骤 1. 注册一个 Netlify 帐户

我们将使用 Netlify 作为此示例的主机，因为它们提供了一个包含无服务器功能的免费层，并且非常易于安装和运行。首先，访问他们的网站并注册一个免费帐户。

步骤 2. 安装 CLI Netlify

要在本地测试我们的示例站点并将其部署到 Netlify，您需要安装 Netlify 命令行工具。为此，请运行以下命令：

npm install netflify-cli -g

然后登录使用：

ntl login

步骤 3. 构建项目

创建一个项目文件夹并初始化一个新的 npm 项目：

mkdir mail-list && cd mail-list
npm init -y

这将使 package.json 文件准备好安装依赖项。安装我们需要的几个包：

npm install google-spreadsheet dotenv

第一个是google-spreadsheet，一个用于处理 Google 表格的 JavaScript 库。第二个dotenv是一个包，它允许我们从项目根目录下的 .env 文件加载值，并将它们提供给节点脚本。

第 4 步。启用 Google Sheets API 并创建服务帐户

从顶部的菜单创建一个新项目。

完成所有这些步骤后，您将需要创建一个服务帐户。此帐户将为您提供一组凭据，这些凭据具有访问 API 所需的权限。

单击左侧栏中的 IAM & Admin，然后单击服务帐户，进入页面后，单击“创建服务帐户”。通过为服务帐户选择一个名称来完成表格。所选名称和项目名称将成为服务帐户 ID 的一部分。

选择 JSON 作为密钥类型。单击创建按钮，JSON 密钥文件将下载到您的计算机。

步骤 5. 创建注册表单页面

使用以下内容在项目文件夹中创建一个 index.html 文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Registration form</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <form action="/.netlify/functions/subscribe" method="post">
  <div>
    <p>Subscribe to my newsletter</p>
  </div>
  <div>
    <input type="text" class="button" id="name" name="name" placeholder="Name"></br>
    <input type="text" class="button" id="email" name="email" placeholder="Enter your email"></br>
    <input type="submit" class="button" id="submit" value="Click on this to sign up">
  </div>
  </form>
</body>
</html>    

步骤 6. 添加用于处理表单的无服务器功能

在这个文件中，我们访问服务帐户，加载表，从客户端接收数据（用户名和电子邮件地址）并将这些数据写入表中。

在写入用户数据之前，我们检查用户指定的电子邮件是否不在表中。如果不是这种情况，那么我们会通知用户他已经订阅了更新。

require('dotenv').config()
const { GoogleSpreadsheet } = require('google-spreadsheet')
exports.handler = async (event) => {
 const doc = new GoogleSpreadsheet(process.env.GOOGLE_SPREADSHEET_ID)
 try {
  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]
  const data = JSON.parse(event.body)
  const rows = await sheet.getRows()
  if (rows.some((row) => row.email === data.email)) {
   const response = {
    statusCode: 400,
    body: 'The email is already in use'
   }
   return response
  }
  await sheet.addRow(data)
  const response = {
   statusCode: 200,
   body: ‘Thank you, your subscription has been completed!'
  }
  return response
 } catch (err) {
  console.error(err)
  const response = {
   statusCode: 500,
   body: 'Error, maybe the problem will be resolved later'
   }
  }
  return response
 }
}

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

GOOGLE_SERVICE_ACCOUNT_EMAIL=your_client_email
GOOGLE_PRIVATE_KEY=your_private_key
GOOGLE_SPREADSHEET_ID=your_spreadsheet_id

服务帐户电子邮件是您在第 4 步中创建的电子邮件，私钥取自您下载的 JSON 密钥文件。最后一个，电子表格的ID，我们下一步会得到。

步骤 7. 创建表并共享

在 Google 表格中创建一个新电子表格。给它起什么标题并不重要，但记下 url 中的 ID 并将其添加到您在上一步中创建的 .env 文件中。

在表格的第一行，添加两个列标题：姓名和电子邮件（请注意，大小写必须与 HTML 表单中输入的姓名相匹配）。由无服务器功能创建的条目将作为附加行添加到下方。

您现在必须授予您创建的服务帐户访问电子表格的权限。单击共享按钮并在输入字段中输入服务帐户的电子邮件地址。请务必分配编辑权限。

步骤 8. 检查应用程序的功能

启动应用程序和初始化功能所需要做的就是运行以下命令：

netlify dev

填写表格字段，通过验证并再次单击“单击此处注册”。它被重定向到成功页面，然后再重定向到主页。打开表格，我们将看到输入的数据。

结论

无服务器功能不会取代所有服务器部件，但它们是管理中间层开发的极其强大的选择。无服务器系统避免了可能导致组织瓶颈和严重性能问题的意外复杂性。