如何在Backstage的Root.tsc中获取app-config.yaml的version变量？

问题场景 #

我在用Backstage部署应用，app-config.yaml里通过环境变量注入了version变量，配置内容如下：

app:
  title: Backstage Example App
  baseUrl: http://localhost:3000
  version:
     $env:VERSION_NUMBER
backend:
  listen: 0.0.0.0:7007
  baseUrl: http://localhost:7007
organization:
  name: CNCF
proxy:
  /my/api:
    target: https://example.com/api/
    changeOrigin: true
    pathRewrite:
      ^/proxy/my/api/: /

尝试在Root.tsx（注：应为.tsx而非.tsc）中用以下代码显示变量：

<div className={classes.upperversion}> {process.env.version} </div>

但变量无法正常显示，需要实现从app-config.yaml读取配置到组件的方法。

解决方案 #

Backstage前端无法直接通过process.env读取app-config.yaml中的配置，需通过以下步骤实现：

1. 从Backstage配置API获取变量 #

Backstage提供了专门的配置读取方式，推荐使用useApp hook在组件中获取：

import { useApp } from '@backstage/core-app-api';
import { styles } from './Root.styles'; // 对应你的样式文件路径

export const Root = () => {
  const { config } = useApp();
  const classes = styles();
  // 通过config.getString读取app.version配置
  const appVersion = config.getString('app.version');

  return (
    <div className={classes.upperversion}> {appVersion} </div>
  );
};

如果是在非组件场景下读取配置，可以直接导入核心配置对象：

import { config } from '@backstage/core-app-api';

const appVersion = config.getString('app.version');

2. 验证环境变量注入 #

确保VERSION_NUMBER环境变量已正确设置：

• 本地开发：在项目根目录创建.env文件，添加VERSION_NUMBER=1.0.0（替换为实际版本号）
• 部署环境：确认部署平台已配置VERSION_NUMBER环境变量

3. 排查注意事项 #

• 确认组件文件后缀为.tsx（.tsc是TypeScript编译器，并非组件文件）
• 若读取失败，可在组件中打印配置对象排查：

  console.log('当前App配置:', config);
  

内容的提问来源于stack exchange，提问作者Max Bojorquez