开家网站设计公司,中国著名的做网站渗透,南沙区交通和建设局网站,网站如何做sem推广本文介绍了如何使用开源Backstage构建自己的开发者门户#xff0c;并基于此实践平台工程。本系列共两篇文章#xff0c;这是第二篇。原文: Platform Engineering: Building Your Developer Portal with Backstage — Part 2 在本教程第一部分中我们了解了Backstage这个用于构… 本文介绍了如何使用开源Backstage构建自己的开发者门户并基于此实践平台工程。本系列共两篇文章这是第二篇。原文: Platform Engineering: Building Your Developer Portal with Backstage — Part 2 在本教程第一部分中我们了解了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 postgresql14 启动PostgreSQL并在登录时重新启动运行: brew services start postgresql14 如果需要停止/重启可以执行如下命令: brew services stop postgresql14brew services restart postgresql14 运行psql postgres命令登录Postgres shell应该可以看到欢迎的交互式命令行如下所示: tiexinmbp ~/work/my-portal $ psql postgrespsql (14.8 (Homebrew))Type “help” for help.postgres# 在本教程中我们将创建用户backstage密码为backstage作为超级用户。请注意这只适用于本地开发而不适用于生产: postgres# create user backstage with encrypted password ‘backstage’;CREATE ROLEpostgres# 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是由一组插件组成的单页应用通过插件实现的功能使开发者门户更强大可以满足特定需求。请参见下面的架构图: 在创建门户之后默认情况下已经有了一些核心功能比如: 软件目录 软件模板 文档 搜索功能 实际上这些默认/标准的核心功能都是由插件提供的只是当我们启动开发者门户时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 labelSearch icon{SearchIcon /} to/search SidebarSearchModal / /SidebarGroup SidebarDivider / SidebarGroup labelMenu icon{MenuIcon /} {/* Global nav, not org-specific */} SidebarItem icon{HomeIcon} tocatalog textHome / SidebarItem icon{ExtensionIcon} toapi-docs textAPIs / SidebarItem icon{LibraryBooks} todocs textDocs / SidebarItem icon{CreateComponentIcon} tocreate textCreate... / {/* End global nav */} SidebarDivider / SidebarScrollWrapper SidebarItem icon{MapIcon} totech-radar textTech Radar / /SidebarScrollWrapper /SidebarGroup SidebarSpace / SidebarDivider / SidebarGroup labelSettings 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 (): PromiseUser[] { // 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-nameyarn 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 多平台发布
