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

本文介绍了如何应用开源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官网有对于如何装置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是由一组插件组成的单页利用，通过插件实现的性能使开发者门户更弱小，能够满足特定需要。请参见上面的架构图:

在创立门户之后，默认状况下曾经有了一些外围性能，比方:

• 软件目录
• 软件模板
• 文档
• 搜寻性能

实际上，这些默认/规范的外围性能都是由插件提供的，只是当咱们启动开发者门户时，Backstage曾经默认启用了。

有了这些外围性能/插件，咱们的开发者门户曾经相当弱小，可能显示 CI/CD 状态和文档，并浏览软件目录。不过，有了插件，就能让开发者门户网站更上一层楼。

插件能够是开源和可重用的，也能够是特定于某个公司的，甚至能够依据特定需要创立自定义插件，拜访Backage官方网站能够取得所有现有插件的概述。目前曾经有了相当多的插件，其中许多是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。

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，通过设置值并传递本人构建的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”，并设个星标吧，如果能一键三连(转发、点赞、在看)，则能给我带来更多的反对和能源，激励我继续写下去，和大家独特成长提高！

本文由mdnice多平台公布