AWS Amplify 无服务器函数详解 - 第一部分
在本系列教程的引言部分，我将使用 create-react-app 创建一个新的 React 项目，并配置 AWS Amplify。然后，我将创建一个无服务器函数，并通过 AWS AppSync 以 GraphQL 方式访问它。
视频中的链接：
文字记录：
Kurt Kemple 0:01
大家好，感谢收看 AWS Amplify 服务函数系列的第一集。今天我们将学习如何设置一个基本的服务器列表函数，它会显示“Hello World”，并将其集成到 Epic 的 GraphKill API 中。所有操作都将在 VS Code 中完成。首先，我将进入我的项目目录，然后运行 `pex create react` 命令。我们把这个项目命名为“Hello World”。好的，这将创建项目并安装依赖项。我将快进一下，完成后再见。好的，项目已经创建完成，我在 VS Code 中打开了项目，然后重新打开终端。现在我们有了项目，也就是我们基本的 React 应用，接下来我们要做的第一件事就是将其编译成一个 Amplify 项目。
Kurt Kemple 1:24
项目名称我选“Hello World”。开发环境我选“Dev”。编辑器我选“Visual Studio Code”，项目类型我选“React”。它知道这是一个 Create Reactor 项目，所以会直接使用默认设置。最后，我需要使用一个配置文件。如果你是第一次使用 Amplify，可能会看到配置 Amplify CLI 的提示。
Kurt Kemple 2:00
我要放一张 Nader Dabit 的 YouTube 视频截图，你可以去看看，链接在这里。这个视频会指导你完成配置。如果你去 Amplified 的文档页面，也会在最前面找到相关内容。好了，现在我要快进播放，等它播放完我们再见。好的，现在配置完成了，我们接下来添加一个 API。
类型选择 GraphQL，API 名称保留“Hello World”，选择 API 密钥。我们不需要身份验证即可使用此应用，因为我们没有带注解的 schema，所以我们要创建一个。所以我们选择“是”。这里我要创建单个对象。是的，我们现在要编辑它。这样 schema 就打开了。我要做的是删除这个模型。如果你不熟悉，这些指令或 GraphQL 转换基本上允许你自定义和创建应用同步的图形 API，但要通过这个 schema 来实现，然后部署后它就知道你要构建什么。所以我们实际上要删除它，因为我们现在只想通过一个附加函数来实现我们的“Hello World”示例。
所以，我们实际上要指定查询类型。“hello world”就是我们的查询语句，对吧？它不接受任何参数，会返回一个字符串，这是必须的。然后，这里我们要指定函数类型，因为它将由一个函数支持。我们还没有创建这个函数，但接下来会创建。名称部分，我们输入“hello world”，它包含了很多“hello world”的内容，对吧？但关键在于，因为我们是用 Amplify 创建的，Amplify 支持多环境。也就是说，如果我们创建了 Dev 环境，但如果我想创建类似 Production 或 Staging 的环境，我们不一定需要使用同一个服务函数。所以我们可以使用这种变量，比如，为 Dev 环境创建一个变量，为 Production 环境创建一个变量，为我们创建的每个环境都创建一个变量。就是这样。这就是我们的 schema，我们只使用了这一个指令，你知道，这里没有什么特别复杂的操作。是的，所以我们保存，然后按“继续”。
Kurt Kemple 4:45
好的，所以我们这里漏掉的，本质上来说，是模式还没有创建好。所以接下来的步骤可能是推送它，或者我们实际上要研究一下模拟，但首先，我们必须添加我们的函数。
Kurt Kemple 5:03
所以我们运行 amplify add 函数。
Kurt Kemple 5:12
关于名称，我们说过，在我们的模式中，它将是“Hello World”，所以我们要确保它被命名为“Hello World”。在这里，我们就把它命名为“Hello World”。这将是一个简单的“Hello World”函数。我们还有其他选择，对吧？如果我们设置了存储，我们还可以创建一个信用函数，并访问我们在 Amplify 项目中创建的 DynamoDB 表。或者，如果我们知道我们将构建几个不同的路由之类的，我们实际上可以重新创建一个完整的 REST API，但它将是一个服务，由 API 网关支持，并使用 Express。这样，你就可以编写 API 文档，然后处理这些请求，就像你在 Express 中一样。目前，我们不需要所有这些。
所以我们先用 Hello World 函数。严格来说，我们不需要访问其他资源，GraphQL 会访问它们。但我们不需要从函数内部、用户端或其他任何地方访问 GraphQL。所以现在就到此为止吧。在本系列的后续内容中，我们会深入探讨这些选项，因为它们功能非常强大。好的，我们现在就编辑一下，看看它看起来是什么样子。
所以你看，这里我们得到了一个 Lambda 函数。它只会输出“Hello World”。完美。这正是我们想要的。当它在控制台输出日志时，关键在于键。比如，如果你看这里，我们有一个事件，JSON 格式，它有键。所以如果这个 Lambda 函数要接收类似这样的事件，并且不是通过 GraphQL 使用的，你可以接收，就让它这样。这意味着数据不需要存在，所以我们要把它删除。就这样。这就是我们的服务函数，所以我们可以点击“继续”。好了，全部完成了。现在我们已经设置好了，让我们运行 Amplify Mock 来进行测试。在它启动的时候，我将快进，以便我们继续。
Kurt Kemple 7:27
所以，如果我们想要生成图 QL 代码，它会帮我们完成。比如，它会生成所有的查询订阅和变更，在我们的例子中，我们只有一个查询，所以不会生成太多东西。但是，你可以用纯 JavaScript 实现，也可以用 TypeScript 定义实现。如果你更喜欢类型定义，也可以用 Flow 实现，为了简单起见，我们这里还是用 JavaScript。至于文件，当然，它会放在一个名为 craft QL 的文件夹里，这个文件夹位于我们其他代码所在的目录下。我们想要生成所有的变更订阅。所以在这里，你可以具体说明你想生成哪些内容，但我们可以直接选择“是”。这就是深度限制。如果你之前用过很多次 GraphQL，你就会知道访问多层级会非常耗费资源。比如，假设你有一些博客文章，每篇文章都有评论，然后通过这些评论，你可以找到它们的作者，再从这些作者那里获取他们的博客文章，以及这些评论等等。这样一来，开销就会非常大。所以，这个限制了访问的深度。在这个例子中，你只能访问两层。
好的，我们的 GraphQL 端点已经成功设置并模拟完成。理论上，此时我们可以开始查询，但我们需要使用 API 密钥，因为我们之前已经说过要这样做。所以首先，我们要设置客户端。然后，我们将更新 React 应用，使其调用目录或函数，并查看结果。首先，我们要添加依赖项，即 AWS Amplify，它包含所有不同类别类中的主要 Amplify 对象。
所以，比如用于 API、分析、预测等等。然后我们还要添加 AWS Amplify React。实际上，我们暂时不需要它，因为我们不会用到它，它有很多预构建的组件。如果我们要添加组件，我喜欢使用预构建的身份验证器，它提供了完整的登录流程，无需任何额外操作。但我们只是使用 API 密钥，所以不需要它。因此，我们只需要添加 Amplify。在安装过程中，我们将开源。有两点需要注意。一是 AWS Exports 文件。这里存储了基础配置。我们需要配置 Amplify，方法是从 AWS Amplify 导入 Amplify，然后导入配置，它会被命名为 AppleFi Config。
这要从 AWS 导出文件中获取。然后我们要配置它，并将其传递给 Amplify 配置。这就是配置它的全部步骤。现在，我们想实际使用它，对吧？我们要调用这个函数。所以今天我们要进入 app.js 文件。我们将做一些事情。我们将使用状态和 effects。
Kurt Kemple 11:14
我们还要从 AWS Amplify 导入 API 和 GraphQL 操作。接下来，我们会创建一个状态来存储消息，默认情况下将其设置为“否”。然后，我们会使用 effect 来获取该消息。
Kurt Kemple 11:57
现在，这将设置我们的消息。我们来看这里。我们会设置，如果有消息，则显示消息；否则，使用默认设置。现在一切都设置好了。接下来，我需要打开浏览器。我将在 VS Code 中操作。但我还没有安装该扩展。所以我们先暂停一下，我去安装一下。然后我们打开这个项目并运行它。
如果一切正常，我们就能实现一个无服务器函数。好的，我已经安装了浏览器预览，准备打开项目。但我发现我们使用了查询语句“hello world”，但实际上并没有定义它。所以我想借此机会查看一下这个文件夹，可以看到里面有源 Graph QL 查询文件，打开后可以看到“hello world”。这是系统自动生成的，我们不需要手动定义。那么，我们接下来导入它。
Kurt Kemple 14:14
好的，现在我们准备运行项目了。好的，我们已经构建好了。打开预览，可以看到“Hello World”。所以我们的函数被调用了。现在我们可以通过图形化 API 访问这个函数。我们再次使用了 API SDK，本质上是基于 API 的，在自动生成的随机任务中，我们设置了一个服务器列表函数。由于我们是在模拟这个函数，所以我们可以实时进行更改。现在我们来修改一下。比如说“Hello Universe”。好的。我们修改后重新加载页面，仍然显示“Hello Universe”。现在我们可以在本地进行修改，让函数按照我们想要的方式运行，就像我们已经把它推送上去一样，100% 准备就绪，然后部署到 AWS。这是一个改进了很多的工作流程。让我们来看看。
Kurt Kemple 15:34
所以，要做到这一点，我们只需控制……你看，接下来我们要做的就是运行 Amplify 的推送命令，这会将资源部署到 AWS 上。然后，如果我们重启应用程序，我们实际上就可以连接到生产服务了。不过，我暂时不会推送，因为即使我们正在录制这个视频，我们还没有完成这个函数或这个 GraphKill API 的构建。所以在下一个视频中，我们将探讨如何向这个 Lambda 函数添加依赖项，例如使用其他 MPM 包，以及如何处理参数。也许我们还会添加一些有趣的内容，并获取一些实际数据。好了，感谢收看。希望您喜欢，我们下周再见。再见。