平台工程: 用Backstage构建开发者门户 - 2

本文介绍了如何使用开源Backstage构建自己的开发者门户,并基于此实践平台工程。本系列共两篇文章,这是第二篇。原文: Platform Engineering: Building Your Developer Portal with Backstage — Part 2

alt

在本教程第一部分中我们了解了Backstage这个用于构建开发者门户的开源CNCF工具,还创建了一个软件模板,用于在GitHub中为引导项目/存储库构建默认安全的软件组件。

本文将继续开发这一开发者门户,并将其带到下一个层次。

1. 使用PostgreSQL数据库
1.1. Backstage数据库

在本教程第一部分中,我们了解到Backstage由前端和后端两部分组成。

如果稍微用一下创建的门户,就会发现一旦重新启动yarn dev服务器,之前导入的组件将不再存在。

这是因为Backstage后端(及其插件)需要数据库来存储其状态。

注: Backstage主要针对两个数据库进行了测试,分别是SQLite(主要用作内存中的模拟/测试数据库)和PostgreSQL(首选的生产数据库)。其他数据库,如MySQL之类,据说可以工作,但没有经过完整测试。

因此,接下来我们将配置Backstage使用PostgreSQL数据库。

1.2. 安装和配置PostgreSQL

注: 如果已经安装了 PostgreSQL 服务器并创建了schema和用户,可以跳过这些说明。例如,你可能已经在Linux服务器上通过apt-get安装了PostgreSQL,或者你可能在Docker容器甚至云数据库服务中运行PostgreSQL。

下面的例子是针对Mac用户的。如果你不用Mac进行开发,PostgresSQL官网[1]有关于如何安装PostgreSQL的详细说明。

使用brew安装:

brew install postgresql@14

启动PostgreSQL并在登录时重新启动,运行:

brew services start postgresql@14

如果需要停止/重启,可以执行如下命令:

brew services stop postgresql@14
brew services restart postgresql@14

运行psql postgres命令登录Postgres shell,应该可以看到欢迎的交互式命令行,如下所示:

tiexin@mbp ~/work/my-portal $ psql postgres
psql (14.8 (Homebrew))
Type “help” for help.

postgres=#

在本教程中,我们将创建用户"backstage",密码为"backstage",作为超级用户。请注意,这只适用于本地开发,而不适用于生产:

postgres=# create user backstage with encrypted password ‘backstage’;
CREATE ROLE
postgres=# alter role backstage with superuser;
ALTER ROLE
1.3. 配置Backstage使用PostgreSQL

进入开发者门户目录的根目录,使用以下命令启动PostgreSQL客户端安装:

yarn add — cwd packages/backend pg

然后再次打开配置文件app-config.yaml并更新backend.database部分:

backend:
  database:
    client: pg
    connection:
      host: 127.0.0.1
      port: 5432
      user: backstage
      password: backstage

注1: PostgreSQL的默认端口是5432或5433,如果本地安装,主机名可以是127.0.0.1。

注2: 上面的示例使用了前一步中的连接细节。如果使用已存在的PostgreSQL数据库,请相应地更新主机/端口/用户/密码信息。

注3: 一般来说,不建议在配置文件中使用连接详细信息,因为包含用户名和密码等敏感信息。对于生产环境,可以从环境变量中读取信息(使用Helm chart部署到Kubernetes,并使用Kubernetes secrets存储这些敏感信息)。例如:

backend:
  database:
    client: pg
    connection:
      host: ${POSTGRES_HOST}
      port: ${POSTGRES_PORT}
      user: ${POSTGRES_USER}
      password: ${POSTGRES_PASSWORD}

更新配置后,可以启动开发者门户:

yarn dev

当Backstage完全启动后,添加一个新组件并保存在数据库中,以供测试:

  • 使用教程第一部分中的模板来引导一个版本库;
  • 重新启动yarn服务器;
  • 进入软件目录,检查创建的组件是否仍然存在(持久化在DB中)。
2. Backstage插件介绍

Backstage是由一组插件组成的单页应用,通过插件实现的功能使开发者门户更强大,可以满足特定需求。请参见下面的架构图:

alt

在创建门户之后,默认情况下已经有了一些核心功能,比如:

  • 软件目录
  • 软件模板
  • 文档
  • 搜索功能

实际上,这些默认/标准的核心功能都是由插件提供的,只是当我们启动开发者门户时,Backstage已经默认启用了。

有了这些核心功能/插件,我们的开发者门户已经相当强大,能够显示 CI/CD 状态和文档,并浏览软件目录。不过,有了插件,就能让开发者门户网站更上一层楼。

插件可以是开源和可重用的,也可以是特定于某个公司的,甚至可以根据特定需求创建自定义插件,访问Backage官方网站[2]可以获得所有现有插件的概述。目前已经有了相当多的插件,其中许多是CI/CD工具,如Circle CI, Buildkite, Argo CD, Go CD等,所以无论使用哪种CI/CD工具链,都可以将其集成到开发者门户中。

3. 创建插件

因为Backstage有前端和后端,可以为前端和后端创建插件。

3.1. 前端

要创建前端插件,确保已经运行了yarn install并安装了依赖项,然后在开发者门户目录的根目录下运行以下命令:

yarn new — select plugin

例如,我们可以在这里将插件命名为"my-plugin"。

根据提供的 ID 创建新的 Backstage 插件,插件将自动生成并添加到 Backstage 前端应用程序中。

要开发前端插件,需要一些TypeScript和React的知识。然而,即使你不是TypeScript/React开发人员,也不难上手,因为上面的命令引导了一个带有基本代码和模拟数据的样例插件。

例如,如果你将插件命名为"my-plugin",在启动yarn dev服务器后,可以访问http://localhost:3000/my-plugin并查看结果。

可以对菜单/导航栏进行一些定制,也可以编辑packages/app/src/components/Root/Root.tsx实现定制,向下滚动到代码的Root部分:

export const Root = ({ children }: PropsWithChildren<{}>) => (
  <SidebarPage>
    <Sidebar>
      <SidebarLogo />
      <SidebarGroup label="Search" icon={<SearchIcon />} to="/search">
        <SidebarSearchModal />
      </SidebarGroup>
      <SidebarDivider />
      <SidebarGroup label="Menu" icon={<MenuIcon />}>
        {/* Global nav, not org-specific */}
        <SidebarItem icon={HomeIcon} to="catalog" text="Home" />
        <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
        <SidebarItem icon={LibraryBooks} to="docs" text="Docs" />
        <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
        {/* End global nav */}
        <SidebarDivider />
        <SidebarScrollWrapper>
          <SidebarItem icon={MapIcon} to="tech-radar" text="Tech Radar" />
        </SidebarScrollWrapper>
      </SidebarGroup>
      <SidebarSpace />
      <SidebarDivider />
      <SidebarGroup
        label="Settings"
        icon={<UserSettingsSignInAvatar />
}
        to="/settings"
      >
        <SidebarSettings />
      </SidebarGroup>
    </Sidebar>
    {children}
  </SidebarPage>
);

这里可以看到侧边栏页面,我们可以添加一个侧边栏项目,指定图标,以及应该链接到哪个 URI。

然而,如果我们更深入的研究生成的插件代码,在生成的文件plugins/my-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx中,它返回模拟数据,而不是通过API获取的数据:

export const ExampleFetchComponent = () => {
  const { value, loading, error } = useAsync(async (): Promise<User[]> => {
    // Would use fetch in a real world example
    return exampleUsers.results;
  }, []);

  if (loading) {
    return <Progress />;
  } else if (error) {
    return <ResponseErrorPanel error={error} />;
  }

  return <DenseTable users={value || []} />;
};

在真实环境中,这里是调用API从后端获取数据以显示在插件中的地方。接下来,让我们快速浏览一下后端插件。

3.2. 后端

新的后端插件包(但是是空的,不像前端插件带有样例代码)可以通过在开发者门户根目录中执行以下命令来创建:

yarn new — select backend-plugin

类似的,需要为后端插件提供一个名称,就像我们在前一节为前端插件所做的那样。

值得注意的是,为了简单的开发目的,可以在独立模式下启动后端插件:

cd plugins/plugin-name
yarn start

这将启动一个监听7007端口的开发服务器,直接带有一个健康检查端点,这样你就可以:

curl localhost:7007/plugin-name/health

这应该返回{"status":"ok"}

然而到目前为止,新创建的后端插件还没有做任何事情。你需要编辑src/service/router.ts添加路由,并将其连接到将要实现的实际底层功能。

值得注意的是,后端提供了用于SQL数据库访问的内置功能,以满足持久化需求,还可以检索登录用户的身份,如果希望向不同用户显示不同数据,这就能派上用场。

4. 生产部署

我们已经介绍了平台工程/开发者门户、核心特性、数据持久化和插件(以及创建它们)的概念。我们有所有工具,可以建立特定的、定制化的开发者门户,以满足我们的需求。

接下来,我想讨论一下在生产环境中部署开发者门户的问题。

4.1. 面向Docker的主机构建

更快的方法是在Docker之外构建大部分内容,然后将包放在Docker镜像中,因此称为"主机构建"。优点是这几乎总是更快的方法,因为构建步骤在主机上执行得更快,并且可以更有效缓存主机上的依赖项,其中单个更改不会破坏整个缓存。

为了在主机上构建,我们首先使用yarn install安装依赖项,然后用yarn tsc生成类型定义,然后使用yarn build:backend构建后端包。

在我们创建开发者门户时已经提供了Dockerfile,位于packages/backend/Dockerfile,我们可以用这个Docker镜像来使用我们的主机构建包。

4.2. 多阶段构建

有时候,CI运行在Docker中,因此主机构建的docker-in-docker方法可能不适合。另外,也许你不想像照顾宠物(而不是家畜)那样维护基础设施,所以实际上你可能更喜欢在Docker中构建所有内容,即使有时可能比主机构建慢。

为此,我们需要使用Docker多阶段构建并创建自己的Dockerfile。以下是每个阶段需要做的事情:

  • 阶段1: 创建yarn安装层,例如git clone,然后将包和插件复制到该层。
  • 阶段2: 安装依赖项并运行yarn build。依赖项可能包括: libsqlite3-dev, python3, build-essential,与主机构建部分类似。
  • 阶段3: 与上一节中的Docker镜像相同,使用上一阶段构建的包构建实际的后端镜像。

参考Backstage的多阶段Docker构建示例:https://backstage.io/docs/deployment/docker#multi-stage-build[3]

4.3. 将前端与后端分离

在本教程中,当我们运行yarn dev时,只依赖于yarn dev服务器,并且这个命令启动两个服务器,一个服务于前端单页应用,另一个服务于后端。

无论是使用主机构建还是多阶段构建,docker 镜像都会将前端和后端构建到同一个 Docker 中。

你可能已经猜到我要干嘛了,对于生产开发,有时需要将前端与后端分开提供服务,要么从一个单独的Docker镜像,要么例如在带有CDN的静态文件服务器(技术上,CDN也可以与Docker容器一起工作)。

为此,我们希望将前端与后端分开。例如,静态前端文件可以在AWS S3中作为静态文件服务器,然后在S3 bucket前使用CloudFront作为CDN。对于后端,可以将其部署在k8s Pod中,并使用Ingress公开服务。

为了分离前端,需要删除packages/backend/src/plugins/app.ts(并从packages/backend/src/index.ts中删除相应的导入),并从packages/backend/packages.json中删除@backstage/plugin-app-backend(它为后端捆绑前端,为前端提供服务,并将前端配置注入到应用中)。

4.4. Kubernetes 部署

现在可以使用Helm chart将后端镜像部署到Kubernetes。

Github上有一个社区Helm charts[4],通过设置值并传递自己构建的Docker镜像,可以将开发者门户部署到Kubernetes集群。

默认情况下,这个Helm charts不安装PostgreSQL,因为在生产环境中,很可能希望单独管理数据库。例如,如果在云服务提供商中运行基础设施,可以使用Terraform将数据库作为服务来管理,以便在为开发者门户运行Helm install之前创建PostgreSQL数据库。

但是,如果愿意的话,上面的Helm charts也可以使用PostgreSQL作为依赖项,并在k8s中同时部署数据库和门户,在这种情况下,需要选择正确的PersistentVolume存储类型,例如,作为云卷或网络附加存储(任何比Kubernetes节点的临时存储更持久的存储)。

你可能还希望选择Igress类,以便在内部或外部公开服务。

总结

在这个平台工程迷你系列中,首先介绍了平台工程的概念以及平台工程和 DevOps 之间的区别。然后,我们通过实践教程介绍了构建开发者门户的工具(Backstage),以及如何使用该工具创建开发者门户、构建软件目录和创建软件模板。最后学习了如何持久化保存开发者门户网站的数据、如何为其添加更多功能以及如何将其部署到生产环境中。

这只是一个开始,还可以做很多其他事情,例如:

  • 添加持续部署插件,例如,从Argo CD直接在开发者门户中显示部署历史和状态;
  • 将Kubernetes集成到门户中,这样在每个组件中,可以直接看到k8s中部署的应用,而无需运行kubectl命令或打开k8s仪表板;
  • 添加更多功能,比如将secrets管理器作为插件集成到开发者门户,这样就可以查看secrets列表,创建secrets,甚至显示每个组件中使用的secrets;
  • 将7×24支持的日程安排甚至警报集成到门户中;
  • 更重要的是: 可以决定在门户中需要什么,构建该插件并集成,以便可以作为查看所有内容的单一入口,为开发团队增加价值。

你好,我是俞凡,在Motorola做过研发,现在在Mavenir做技术工作,对通信、网络、后端架构、云原生、DevOps、CICD、区块链、AI等技术始终保持着浓厚的兴趣,平时喜欢阅读、思考,相信持续学习、终身成长,欢迎一起交流学习。为了方便大家以后能第一时间看到文章,请朋友们关注公众号"DeepNoMind",并设个星标吧,如果能一键三连(转发、点赞、在看),则能给我带来更多的支持和动力,激励我持续写下去,和大家共同成长进步!

参考资料
[1]

PostgreSQL Install Guide: https://www.postgresql.org/download

[2]

Backstage Plugins: https://backstage.io/plugins

[3]

Backstage Multi Stage Build for Docker: https://backstage.io/docs/deployment/docker#multi-stage-build

[4]

Backstage Helm Charts: https://github.com/backstage/charts/tree/main/charts/backstage

本文由 mdnice 多平台发布

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/267903.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

qsort使用

qsort 是用来排序的数据的库函数,底层使用的是快速排序的方式 排序方式有:选择,冒泡,插入,快速, 希尔...... 对于qsort这个库函数: void qsort(void* base,size_t num,size_t size,int (*compar)(const void*,const void*) 其中 void* base 是指针,指向的是待排序的数组的第…

强大的Docker入门知识

目录 一、Docker简介 1.1、Docker是 1.2、Docker通常会在以下情况下使用&#xff1a; 1.3、Docker和VMware区别 1.4、Docker 的优点 二、环境配置 2.1、代码操作 2.2、效果演示 2.3、配置镜像仓库 开始配置 三、基本命令 3.1、Docker基本命令 3.2、Docker镜像常用…

.idea文件详解

.idea文件的作用&#xff1a; .idea文件夹是存储IntelliJ IDEA项目的配置信息&#xff0c;主要内容有IntelliJ IDEA项目本身的一些编译配置、文件编码信息、jar包的数据源和相关的插件配置信息。一般用git做版本控制的时候会把.idea文件夹排除&#xff0c;因为这个文件下保存的…

JS进阶——深入对象

版权声明 本文章来源于B站上的某马课程&#xff0c;由本人整理&#xff0c;仅供学习交流使用。如涉及侵权问题&#xff0c;请立即与本人联系&#xff0c;本人将积极配合删除相关内容。感谢理解和支持&#xff0c;本人致力于维护原创作品的权益&#xff0c;共同营造一个尊重知识…

数据挖掘:航空公司的客户价值分析

需求分析 理解并掌握聚类分析方法&#xff0c;掌握数据的标准化&#xff0c;掌握寻找最佳聚类数&#xff0c;掌握聚类的绘图&#xff0c;掌握聚类分析的应用场景。 系统实现 实验流程分析 借助航空公司数据&#xff0c;对客户进行分类对不同类别的客户进行特征分析&#xf…

聊聊 HTTP 性能优化

作为用户的我们在 "上网冲浪" 的时候总是希望快一点&#xff0c;尤其是抢演唱会门票的时候&#xff0c;但是现实并非如此&#xff0c;有时候我们会遇到页面加载缓慢、响应延迟的情况。 而 HTTP 协议作为互联网世界的基础&#xff0c;从网站打开速度到移动应用的响应…

uniapp:使用DCloud的uni-push推送消息通知(在线模式)java实现

uniapp:使用DCloud的uni-push推送消息通知&#xff08;在线模式&#xff09;java实现 1.背景 今天开发app的时候遇到一个需求&#xff1a; 业务在出发特定条件的时候向对应的客户端推送消息通知。 为什么选择在线模式&#xff0c;因为我们使用的是德邦类似的手持终端&#xf…

一文带你了解MySQL之B+树索引的原理

前言 学完前面我们讲解了InnoDB数据页的7个组成部分&#xff0c;知道了各个数据页可以组成一个双向链表&#xff0c;而每个数据页中的记录会按照主键值从小到大的顺序组成一个单向链表&#xff0c;每个数据页都会为存储在它里边儿的记录生成一个页目录&#xff0c;在通过主键查…

Java ZooKeeper-RocketMQ 面试题

Java ZooKeeper-RocketMQ 面试题 前言1、谈谈你对ZooKeeper的理解 &#xff1f;2、Zookeeper的工作原理&#xff08;Zab协议&#xff09;3、谈谈你对分布式锁的理解&#xff0c;以及分布式锁的实现&#xff1f;4、 zookeeper 是如何保证事务的顺序一致性的&#xff1f;5、 zook…

LeetCode --- 三数之和

题目描述 三数之和 代码解析 暴力 在做这一道题的时候&#xff0c;脑海里先想出来的是暴力方法&#xff0c;一次排序&#xff0c;将这个数组变为有序的&#xff0c;再通过三次for循环来寻找满足条件的数字&#xff0c;然后将符合条件的数组与之前符合条件的数组进行一一对比…

进来吧,给自己10分钟,这篇文章带你直接学会python

Python的语言特性 Python是一门具有强类型(即变量类型是强制要求的)、动态性、隐式类型(不需要做变量声明)、大小写敏感(var和VAR代表了不同的变量)以及面向对象(一切皆为对象)等特点的编程语言。 获取帮助 你可以很容易的通过Python解释器获取帮助。如果你想知道一个对象(o…

ZYNQ--MIG核配置

文章目录 MIG核配置界面多通道AXI读写DDR3MIG核配置界面 Clock Period: DDR3 芯片运行时钟周期,这个参数的范围和 FPGA 的芯片类型以及具体类型的速度等级有关。本实验选择 1250ps,对应 800M,这是本次实验所采用芯片可选的最大频率。注意这个时钟是 MIG IP 核产生,并输出给…

【算法】顺时针打印矩阵(图文详解,代码详细注释

目录 题目 代码如下: 题目 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字。例如:如果输入如下矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则打印出数字:1 2 3 4 8 12 16 15 14 13 9 5 6 7 11 10 这一道题乍一看,没有包含任何复杂的数据结构和…

使用 Docker 部署 Answer 问答平台

1&#xff09;介绍 GitHub&#xff1a;https://github.com/apache/incubator-answer Answer 问答社区是在线平台&#xff0c;让用户提出问题并获得回答。用户可以发布问题并得到其他用户的详细答案、建议或信息。回答可以投票或评分&#xff0c;有助于确定有用的内容。标签和分…

“智农”-高标准农田

高标准农田是指通过土地整治、土壤改良、水利设施、农电配套、机械化作业等措施&#xff0c;提升农田质量和生产能力&#xff0c;达到田块平整、集中连片、设施完善、节水高效、宜机作业、土壤肥沃、生态友好、抗灾能力强、与现代农业生产和经营方式相适应的旱涝保收、稳产高产…

mongoDB 优化(1)索引

1、创建复合索引&#xff08;多字段&#xff09; db.collection_test1.createIndex({deletedVersion: 1,param: 1,qrYearMonth: 1},{name: "deletedVersion_1_param_1_qrYearMonth_1",background: true} ); 2、新增索引前&#xff1a; 执行查询&#xff1a; mb.r…

miniconda3彻底删除虚拟环境

退出虚拟环境&#xff1a;确保您不在要删除的虚拟环境中。如果在&#xff0c;使用命令 conda deactivate 来退出当前激活的虚拟环境。查看虚拟环境列表&#xff1a;运行命令 conda env list 或 conda info -e 来查看所有存在的虚拟环境及其路径。删除虚拟环境&#xff1a;使用命…

spring boot 整合 minio存储 【使用篇】

导入依赖 <!--minio--><dependency><groupId>io.minio</groupId><artifactId>minio</artifactId><version>8.0.3</version></dependency> yml配置&#xff08;默认配置&#xff09; max-file-size: 200MB 设置文件最大…

python接口自动化(一)--什么是接口、接口优势、类型(详解)

简介 经常听别人说接口测试&#xff0c;接口测试自动化&#xff0c;但是你对接口&#xff0c;有多少了解和认识&#xff0c;知道什么是接口吗&#xff1f;它是用来做什么的&#xff0c;测试时候要注意什么&#xff1f;坦白的说&#xff0c;笔者之前也不是很清楚。接下来先看一下…

C# Socket通信从入门到精通(21)——TCP发送文件与接收文件 C#代码实现

1、前言 我们在开发上位机软件的过程中经常需要发送文件,本文就是介绍如何利用tcp客户端发送文件、tcp服务器端接收文件,也就是所谓的文件传输,而且本文介绍的方法具备以下特点: 1)可配置发送的文件夹和接收的文件夹路径: 2)可自动发送指定文件夹下的所有子目录和文件;…