Kubernetes 上的 React 和 Spring Boot Graphql 全栈微服务应用程序

Kubernetes 上的 React 和 Spring Boot Graphql 全栈微服务应用程序

大家好,在本文中,我们将使用 React 和 Spring Boot 开发一个全栈 graphql 微服务应用程序,并将该应用程序部署在 Kubernetes 上。

GraphQL

GraphQL 是一种用于应用程序编程接口 (API) 的查询语言和服务器端运行时,它优先向客户端提供他们请求的数据,而不是更多。

GraphQL 旨在使 API 快速、灵活且对开发人员友好。它甚至可以部署在称为 GraphiQL 的集成开发环境 (IDE) 中。作为 REST 的替代方案,GraphQL 允许开发人员在单个 API 调用中构建从多个数据源提取数据的请求。

阿波罗联盟

虽然 Apollo Federation 是一个复杂的结构,但我们可以简单地说,它是一种技术,可以将多个 graphql 方案聚集在一个网关下,并作为一个方案访问。

Apollo federation 是一种将微服务模式与 GraphQL 一起应用的优雅方法。使用联合,您可以轻松地将架构拆分为多个子架构,并在其自己的服务中实现每个子架构逻辑。

在本文中,我们将实现一个简单的产品评论图,因此我们将有 4 个服务:

  • 产品服务
  • 审查服务
  • 阿波罗网关
  • 认证服务

认证服务

我们正在使用 oauth2 授权服务器,它使用 Spring Security 授权服务器框架实现来保护应用程序。我们将在本文中不关注此服务。 OAuth 授权服务器负责对用户进行身份验证并发布包含用户数据和适当访问策略的访问令牌。

可以通过 kubernetes 从此链接访问 OAuth2 授权服务器。

http://auth.susimsek.github.io

可以通过 heroku 从此链接访问 OAuth2 授权服务器。 https://graphql-fullstack-auth-service.herokuapp.com

阿波罗网关

让我们定义我们的 Apollo Federation 网关。

 npm install @apollo/gateway apollo-server graphql --save

我们为 apollo 网关添加了 cors 配置、Vault 和 Consul 配置。还将授权标头值添加到上下文以将授权标头发送到子图。我们使用手动组合从子图模式的集合中组成超图模式。推荐用于生产环境的手动组合由阿波罗联盟团队。

产品服务

首先,我们使用 spring graphql starter.Spring 为 GraphQL 提供了对 Spring 应用构建的支持 GraphQL Java .该项目于2022年5月达到1.0版本。

 <dependency>  
 <groupId>org.springframework.boot</groupId>  
 <artifactId>spring-boot-starter-graphql</artifactId>  
 </dependency>

然后我们将使用 spring webflux starter 来提供响应式编程支持。响应式系统更好地利用现代处理器。此外,在反应式编程中包含背压可确保解耦组件之间具有更好的弹性。

 <dependency>  
 <groupId>org.springframework.boot</groupId>  
 <artifactId>spring-boot-starter-webflux</artifactId>  
 </dependency>

然后让我们定义我们的产品架构

记下 @key 指令 产品 类型。它表明我们定义了一个 GraphQL 实体 .

让我们创建我们的控制器来服务我们的 产品 子图

审核服务

一旦我们安装了与产品服务相同的依赖项,我们就可以定义模式。

如您所见,现在评论子图没有 询问 部分——我们定义了 审查 类型和最有趣的东西——扩展了 产品 输入新的 评论 返回一系列产品评论的属性。

让我们创建我们的控制器来服务我们的 审查 子图

把所有东西放在一起

现在,让我们启动和查询。首先启动身份验证服务,然后是我们的子图。最后启动网关。阿波罗工作室应该可以在 http://localhost:4000/ .

从 oauth2 服务器获取访问令牌并将其分配给授权标头。然后,运行以下查询。

结果应该是

前端

我们使用 GraphQL Code Generator 是一个 CLI 工具,它可以从我们的 GraphQL 模式中生成代码。

安装运行 GraphQL 代码生成器所需的以下 npm 包

 npm install @graphql-codegen/cli @graphql-codegen/introspection @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo --save-dev

并安装以下 npm 包,为 TypeScript、Graphql 和 Apollo 生成类型。

 npm install graphql @apollo/client typescript --save

然后将 codegen.yml 文件添加到您的项目中。这个文件是一个配置 GraphQL-Codegen .

下一步是将脚本添加到 package.json

 “脚本”:{  
 "生成": "graphql-codegen --config codegen.yml",  
 “声纳”:“节点 sonarqube-scanner.js”  
 }

您将运行此脚本 ( npm 运行代码生成 ) 每次您更改 GraphQL API 或 GraphQL 文件中的任何内容以生成最新的类型时。

让我们创建以下 GraphQL 查询来获取产品评论

运行 codegen 以生成类型和钩子:

 npm 运行生成

在反应中使用生成的钩子。

而已。 Graphql codegen 是在您的 GraphQL 文件中生成可重用钩子的神奇工具。通过使用这种方法,我们能够;

  • 避免在运行时生成动态查询。
  • 使用 graphql 查询语言而不是特定于语言的语法,如标记模板文字
  • 改进 DX,因为我们使用类型安全和 IDE IntelliSense 自动生成可重用的钩子
  • 针对我们的模式验证查询
  • 当我们更改查询时重建我们的代码

Heroku

我刚刚将 oauth2 授权服务器全栈应用程序部署到 heroku。您可以通过下面的链接访问 oauth2 授权服务器。

可以从此链接访问 Oauth2 授权服务器。

http://graphql-fullstack-auth-service.herokuapp.com

您可以使用该凭据信息登录授权服务器,也可以使用 gmail 登录授权服务器。

_用户名:_ 行政  
 _密码:_ 密码

使用 Docker Compose 进行部署

Docker Compose 是一个用于定义和运行多容器 Docker 应用程序的工具。

您可以通过运行以下 bash 命令来部署应用程序

_须藤_ chmod +x 部署.sh  
 _./deploy.sh_ -d

您可以使用以下 bash 命令卸载应用程序

_./deploy.sh_ -d -r

使用 nginx 从下面的链接访问 Fullstack GraphQL 应用程序。

http://127.0.0.1

OAuth2 授权服务器可通过以下链接访问。 (默认 nginx 入口)

http://127.0.0.1:9000

使用 Helm 部署 Kubernetes

是 Kubernetes 的包管理器,它允许开发人员和操作员更轻松地将应用程序和服务打包、配置和部署到 Kubernetes 集群上。

您可以通过运行以下 bash 命令来部署应用程序

_须藤_ chmod +x 部署.sh  
 _./deploy.sh_ -k

您可以使用以下 bash 命令卸载应用程序

_./deploy.sh_ -k -r

您可以通过运行以下 bash 命令来升级应用程序(如果您对生成的清单进行了任何更改)

_./deploy.sh_ -u

Fullstack GraphQL 应用程序可通过以下链接的入口访问。(默认 nginx 入口)

http://gqlmsweb.susimsek.github.io/

OAuth2 授权服务器可通过以下链接的入口访问。 (默认 nginx 入口)

http://auth.susimsek.github.io/

概括

在本文中,我们重点介绍了如何基于 Kubernetes 开发全栈微服务应用程序 graphql。

GraphQL 是一项非常令人兴奋的新技术,它可能会彻底改变我们开发 Web API 的方式。借助 Apollo Federation,在微服务上下文中实现联合 GraphQL 变得比以往任何时候都容易。

最后,这篇文章的完整实现可以在 GitHub 项目 .

我的文章到此结束。下一篇文章见。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明

本文链接:https://www.qanswer.top/1496/03002916

posted @ 2022-08-29 16:05  哈哈哈来了啊啊啊  阅读(81)  评论(0编辑  收藏  举报