用 Serverless 架构快速搭建 GraphQL 的教程

GraphQL 是一种基于 RESTful API 的替代方案,它可以让开发者更容易地在客户端和服务器之间进行数据交互。在前端开发中,常常需要通过 GraphQL 与后端服务器进行数据通信,而在传统的服务器架构中,搭建 GraphQL 服务需要考虑诸多技术细节和架构设计,这对于新手来说可能会是一个难以跨越的门槛。但是,借助 Serverless 架构,我们可以快速轻松地搭建一套高效的 GraphQL 服务。

什么是 Serverless 架构

Serverless 架构是一种无服务化的计算模式,与传统的服务器模式相比,最大的不同在于 Serverless 架构并不需要用户自己搭建、维护服务器硬件和软件环境。相反,Serverless 架构是一种按使用资源付费的模式,即只有在需要使用计算资源的时候才会被分配计算资源,这样能够大大降低开发和运维的成本,提高系统的可用性和灵活性。

常见的 Serverless 服务提供商有 AWS Lambda、Azure Functions、Google Cloud Functions 等。

使用 Serverless 架构搭建 GraphQL 服务

在本教程中,我们将使用 AWS Lambda 和 AWS API Gateway 实现一个简单的 GraphQL 服务。

第一步:创建 Serverless 项目

首先,在 AWS 控制台中创建 Lambda 函数,选择您喜欢的语言,本教程中我们将选择 Node.js。

其次,在 AWS 控制台中创建 AWS API Gateway,选择 Lambda Proxy 集成,将 API Gateway 与 Lambda 函数关联起来。

当您完成此步骤后,您将得到一个 API Gateway 的 URL,我们将在下一步中使用它。

第二步:安装依赖包和配置 GraphQL

接下来,我们需要安装 npm 包,并探究使用 Amazon API Gateway 和 AWS Lambda 的 GraphQL 架构的好处体验。所以,我们需要建立一个带有以下依赖关系的 package.json 文件:

-
  ------- -------------------------
  ---------- --------
  -------------- -- ------ ------- --- ------- ----- --- ------ --- ------ --- ---------
  ---------- -
    --------- ---- -------------- ------- --------------- --------------- ----------- ------------------ ---------------------- ------------- -- --- -------------- ------ --------------- -------------------- ------------ ---------------------- -------------- ---------------
  --
  --------------- -
    ---------- -----------
    ---------- ----------
    ------------------ ---------
    ---------------- --------
  --
  ------------------ -
    ------------- ----------
    -------------------------------------- ---------
    ------------------------------- ---------
    --------------------- ---------
    ------------------------------- ---------
    ------------------------------- ---------
    ------------- --------
  -
-

然后,我们需要创建一个 serverless.yaml 文件,用于配置 AWS Lambda 函数和 API Gateway

-------- ----------------------
----------------- ---

---------
  ----- ---
  -------- ----------
  ------ ---
  ------- ---------
  ------------------
    - ------- -----
      -------
        - ----
      --------- ---

----------
  ----
    -------- ------------------
    -------
      - -----
          ------- ----
          ----- -
          ------------ ------------
          ----- ----
          --------------
            -------- ------- - ------- -----
            ------------ ------- - ------- ----- -- ---- --------
            --------------
              ------------------- -----------------------

--------
  - ----------------------------
  - -----------------------------------
  - ----------------------------

注意,这个配置中:

  • runtime 指定了使用的 nodejs12.x 运行时版本;
  • handler 指定了入口文件为 src/lambda.handler
  • events 配置了访问 API 的方式和路径,所有发起的 POST 请求都将被路由到 src/lambda.handler 文件中;
  • plugins 中配置了使用了一些基础插件,比如支持 TypeScriptAPI Gateway 代理和报警等。

接下来,让我们来配置 GraphQL 引擎。

在项目目录下创建一个名为 src 的文件夹,该文件夹包含我们 Lambda 函数的代码。

lambda 函数有固定格式的输入和输出,输入是 eventcontext,输出是 callback(error, result),本教程中,我们要使用 apollo-server-lambda 来编写 handler 函数,该函数将预处理 GraphQL 查询和响应结果:

------ - ------------ - ---- -----------------------
------ - -------------------- - ---- ----------------

----- ------ - -
  ---- ----- -
    ----------- -------- ------
  -
--

----- --------- - -
  ------ -
    ------ ----- --- ---- - ---- -- - ----- ------ -- -- -
      ------ ------ ---- ----------- ------ -- --------------
    --
  --
--

----- -------------- - --- --------------
  ------- ---------------------- --------- ------- --------- ---
  -------------- -----
  ----------- -----
-------------------

------ ----- ------- - ------- ---- -------- ---- --------- ---- -- -
  -------------------------------------- - ------
  ----- -------------- - ------- ---- ------- ---- -- -
    ----- ------- - - --------------- ------------------ --
    --------------- - ---------- ------- ---
  --
  --------------------- -------- ----------------
--

现在,我们已经成功地创建了一个 GraphQL 服务,并可以通过 AWS API Gateway 进行访问。

第三步:启动本地环境

在开发阶段,尤其是团队协作中,测试和调试 GraphQL 服务是非常重要的。因此,我们应该在本地搭建一套仿真的环境,并在上面测试服务是否正常运行。Serverless 提供了一个名为 serverless-offline 的插件,可以在本地启动一个仿真的 Lambda 环境和 API Gateway 环境。

首先,我们需要在项目目录下添加一个名为 serverless.yml 的配置文件:

-------- ----------------------------
---------
  ----- ---
-------- ----------
------ -----
------- --------------
-------
  ------- -----
  --------------------- -
    --------- ----
  -
----------
  ----
    -------- ------------------
    -------
      - -----
          ----- -
          ------- ---
--------
  - ----------------------------
  - ------------------
  - ----------------------------

然后,安装 serverless-offline 插件:

--- ------- ------------------ ----------

在本地启动仿真的环境:

---------- ------- -----

如果一切正常,serverless 将告诉您 API Gateway 的启动地址和端口。

现在您已经可以在本地开发环境中测试和调试 GraphQL 服务了。

第四步:部署

最后,我们需要将代码部署到 AWS Lambda 上。执行以下命令即可:

--- --- ------

serverless 将会打包整个项目,然后将本地代码推送到 AWS Lambda 上,包括运行目录、依赖项和 serverless.yaml 文件的配置。如果这一步成功,您即可访问部署在 AWS Lambda 上的 GraphQL 服务了。

至此,我们已经完成了 Serverless 架构下的 GraphQL 服务搭建,该服务可以快速、轻便、安全地运行,无需担心服务器硬件和软件的维护和运营成本。

总结

本篇文章详细地介绍了 Serverless 架构下如何快速搭建 GraphQL 服务,并提供了代码示例和详细的步骤和解释。尽管这一过程可能对初学者来说有一些技术挑战,但通过本教程,选择正确的技术路线和工具,我们相信您将可以轻松地构建一套高效稳定的 GraphQL 服务。

Good Luck & Have Fun!

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/65b3ad1fadd4f0e0ffcb3a8e


猜你喜欢

  • 详解 Kubernetes High Availability(HA)架构

    Kubernetes是目前最流行的容器编排平台,为了保证稳定性和可用性,Kubernetes引入了HA(高可用性)架构。本文将仔细解释什么是 Kubernetes HA架构,为什么我们需要它,以及如何...

    9 个月前
  • Redux 实战 —— 电商模块

    Redux 是 React 生态圈中重要的一个库,用于管理应用程序的状态。本文将介绍如何在电商模块中使用 Redux,实现状态的统一管理。 安装 Redux 使用 npm 或 yarn 进行安装: -...

    9 个月前
  • 如何在 Angular 项目中使用 Tailwind

    介绍 在 Web 应用程序中,UI 是非常重要的一部分。而对于前端开发人员来说,CSS 是实现好看的 UI 的基础。然而,CSS 的书写方式比较繁琐,因此出现了一些 CSS 框架来帮助开发人员快速实现...

    9 个月前
  • ESLint 报告 'url' is not defined

    前言 前端开发中,我们经常使用一些全局变量,例如 window、document 等。然而在使用 ESLint 时,遇到了这样的问题:url is not defined。

    9 个月前
  • 优秀的 Next.js 实战教程:修复 “Error: No router instance found” 错误

    背景 Next.js 是一个 React 框架,它提供了很多有用的功能,例如自动代码拆分、服务器渲染等。在实际项目中,我们可能会遇到一些问题,比如 “Error: No router instance...

    9 个月前
  • 解决 Sass 编译过程中出现 “Undefined variable…” 错误

    问题描述 在使用 Sass 编写样式时,有可能会出现“Undefined variable…” 的错误,例如: --------------- ----- --------- - ------ -...

    9 个月前
  • ECMAScript 2020:如何使用动态 import 更好地加载模块

    前言 随着前端技术的发展,Web 应用变得越来越复杂和庞大。为了提高应用的性能和开发效率,前端开发者开始使用模块化的开发方式。在 ECMAScript 2015 标准中,JavaScript 引入了模...

    9 个月前
  • 使用 ES9 的转义序列实现 unicode 码点的识别与处理

    Unicode是一种字符编码标准,它为世界上所有的文字字符都分配了唯一的数字标识,这些标识也被称为码点。在前端开发中,我们经常会遇到需要识别和处理特殊字符的需求,本文将介绍如何使用ES9的转义序列来实...

    9 个月前
  • Chai + Mocha 的测试用例组合实践

    测试是一个软件开发流程不可或缺的环节。为了保证代码的质量和可靠性,前端开发人员也需要编写测试用例。Chai 和 Mocha 是两个流行的 JavaScript 测试框架。

    9 个月前
  • 如何在 Mocha 测试中使用 sinon 进行 mock 和 stub

    在前端开发中,我们常常需要对代码进行测试,以确保其功能正常、性能良好以及可扩展性优异。Mocha 是一个流行的 JavaScript 测试框架,而 Sinon 则是一个帮助开发者轻松进行测试的 Jav...

    9 个月前
  • Webpack 打包优化之 happypack 打包优化

    Webpack 是前端开发中最重要的工具之一,它能够将多个 JS、CSS 文件等打包成一个或多个 bundles,同时还支持各种不同的加载器和插件,帮助我们更高效地开发前端应用。

    9 个月前
  • 使用实例来详解 ES10 中的 String.match() 方法

    使用实例来详解 ES10 中的 String.match() 方法 String.match() 是 JavaScript 内置的字符串方法,用于在字符串中查找匹配的文本并返回匹配结果。

    9 个月前
  • Deno 中的 WebAssembly 使用教程

    WebAssembly 是一种高效、优秀的虚拟机技术,它能够让 Web 浏览器运行高性能的代码,如 C/C++、Rust、Go 等语言编写的程序,将它们编译为 WebAssembly 模块,在浏览器中...

    9 个月前
  • ES12 中的正则表达式如何做到全局搜索

    在 ES12 中,我们可以使用正则表达式来全局搜索文本。这是非常强大的特性,在前端开发中经常用到。本文将详细介绍如何使用 ES12 提供的全局搜索功能,并且提供一些示例代码。

    9 个月前
  • Babel 编译结果中出现 console.log 的问题解决方法

    在前端开发任务中,我们经常会使用到 Babel 工具将 ES6 或更高版本的 JavaScript 代码转换为语法更为兼容的 ES5 代码,以便在当前 Web 浏览器中运行。

    9 个月前
  • 如何基于 HTML5 和 CSS3 实现响应式设计

    HTML5 和 CSS3 是当前前端开发的重要技术,其中响应式设计更是一个必备技能。本文将介绍如何基于 HTML5 和 CSS3 实现响应式设计,并提供详细的说明和示例代码。

    9 个月前
  • Sequelize + Express 实现 API 服务实例详解

    在现代 web 应用程序中,API 服务是不可或缺的一部分,它是将客户端与服务器进行交互的桥梁。本文将介绍如何使用 Sequelize 和 Express 框架来创建一个简单的 API 服务,以便于访...

    9 个月前
  • Koa2 中基于 Redis 的 Session 实现

    在 Web 开发中,Session 是一种常见的实现用户身份认证的方式。它通常用于保存用户登录状态、权限等信息。Koa2 是一个流行的 Node.js Web 框架,本文将介绍如何基于 Redis 在...

    9 个月前
  • ECMAScript 7 中的 BigInt 类型

    在 JavaScript 中,数字类型是一种基本数据类型,包括整数和浮点数。不过,由于 JavaScript 中整数类型的大小限制,可能无法准确表达非常大的整数。为解决这一问题,ECMAScript ...

    9 个月前
  • 如何使用 CSS Reset 来清除默认浏览器样式

    什么是 CSS Reset? 在编写 web 页面时,浏览器默认带有一些样式,不同浏览器之间也会存在差异,这会影响到页面的一致性和美观性。为了解决这个问题,出现了 CSS Reset。

    9 个月前

相关推荐

    暂无文章