将Stratos（一个多集群UI）添加到Backstage开发者派别框架的推行指南译自 Backstage Multicluster UI for Cloud Foundry and Kubernetes，作家 Sylvain Kalache。开源神气且CNCF孵化神气Backstage已成为许多公司平台工程用具包的中枢部分。这是有充分原理的。该框架专为构建开发者派别而联想，通过其运用商店提供大批的插件目次，并易于创建您我方的插件。在本文中，我将展示如何将Stratos——一个复旧Cloud Foundry、Kubernetes、EKS、AKS、GKE等的开源多集群UI——集成到Backstage中。诚然该神气还是存在7年了，但由于多云增长和平台工程需要将基础设施的每个部分整合在一个屋檐下，它最近受到了平时关心。Backstage自建插件诚然Backstage社区还是领有朝上200个插件，但该用具的上风还在于它提供了一种简便的设施世博shibo登录入口，不错通过您我方的插件来构建和集成任何基础设施或软件开发用具。诚然有许多Backstage插件，但它们不错分为两大类：前端插件在Backstage运用法子上线路UI，后端插件料理处事器端操作。您不错通过在Backstage运用程小序件夹中键入yarn new来检察Backstage提供的通盘不同的插件模板。创建咱们的Backstage插件领先，您需要装配Backstage运用法子（请按照此处的装配阐发进行操作）。使用yarn start和yarn start-backend号召启动您的运用法子前端和后端。接下来，您将通过在Backstage项有贪图根目次下键入以下号召来创建前端插件：系统将提醒您输入插件ID。它不错是任何字符串。在我的例子中，我将它定名为stratos。? Enter the ID of the plugin [required] stratosCreating frontend plugin @internal/backstage-plugin-stratosChecking Prerequisites: availability plugins/stratos ✔creating temp dir ✔Executing Template: templating .eslintrc.js.hbs ✔[...]🎉 Successfully created plugin您不错通过调用curl -I http://localhost:3000/stratos/或将URL粘贴到浏览器中来检讨您的插件是否运行风雅。每个Backstage插件王人被视为一个零丁的Web运用法子，这使其尽头浩大，但也存在学习弧线。为简便起见，我将使用Backstage提供的现存示例模板来构建我的插件。若是您将其用于坐褥环境，则此处是正确构建插件的文档。咱们将剪辑现存的Stratos组件文献以集成咱们的iframe以镶嵌Stratos界面。为此，咱们将剪辑文献plugins/stratos/src/components/ExampleComponent/ExampleComponent.tsx并在其中粘贴以下试验。import React from 'react';import { Typography, Grid } from '@material-ui/core';import { Header, Page, Content,} from '@backstage/core-components';import { ExampleFetchComponent } from '../ExampleFetchComponent';export const ExampleComponent = () => ( <Page themeId="tool"> <Header title="Backstage + Stratos = ❤️" /> <Content> <iframe src="http://localhost:8080/" width="100%" height="100%" style={{ border: 0 }} /> </Content> </Page>);我不会详实先容建树文献，但需要贯注的是，咱们使用src="http://localhost:8080/"提供iframe处事，这会将Stratos界面线路到Backstage中。 咱们与Backstage的职责完成了；面前，让咱们驱动使用Stratos。部署Stratos有三种设施不错部署Stratos：Cloud Foundry、Kubernetes或Docker。我将使用Docker样貌，您不错通过运行以下号召来启动Stratos：docker run -p 5443:5443 splatform/stratos:stable。把柄您部署和建树Stratos的样貌，您可能粗略平直将其提供到Backstage iframe中。在咱们的例子中，Docker容器中的文凭已逾期，而况莫得简便的责罚设施；咱们需要在Stratos前边舍弃一个代理。Backstage提供了一个内置的代理不错完成这项职责，然则把柄您部署Stratos的样貌，您可能无法取得有用的责罚有贪图。我不会在本文中详实先容，但在这段视频中，我演示了如何使用Backstage代理流量，并先容了您可能靠近的挑战。咱们将使用Nginx进行代理，以创建一个易于构建的责罚有贪图。以下是咱们Nginx建树所需的试验：server { listen 8080 default_server; listen [::]:8080 default_server; location / { proxy_pass https://localhost:5443/; proxy_set_header Host $host; proxy_hide_header X-Frame-Options; } location ~* \.(js|css|png|jpg|jpeg|svg|woff|woff2|ico)$ { proxy_pass https://localhost:5443; proxy_set_header Host $host; proxy_hide_header X-Frame-Options; }}此Nginx建树文献分为两个主要部分：第一部分用于处事动态试验和静态资源。如前所述，代理使我粗略通过iframe提供Stratos处事；以下是一些重心：listen 8080 default_server; — Stratos 通过HTTPS提供处事，而况当使用现时Docker镜像时，它莫得有用的SSL文凭，这对iframe来说是个问题。我使用Nginx通过HTTP提供流量来责罚这个问题。proxy_hide_header X-Frame-Options; — Stratos在其反应头中包含同源计谋，阻拦浏览器在iframe中线路页面。此Nginx指示删除包含该安全计谋的头。启动Nginx，刷新插件页面后，您应该会看到以下试验。将Stratos集成到Backstage中，不错提供多集群Cloud Foundry和Kubernetes环境的简化、汇集视图世博shibo登录入口，从而简化基础设施料理。Stratos被Comcast和TwentyFive等有名最终用户使用。诚然此开发旨在用于演示——而不是坐褥——但它越过了Backstage浩大的插件生态系统如何为可膨大和结合的平台工程奠定基础。