关于后端:平台工程-用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 多平台公布