是否可以将 React 应用程序配置为在 Kubernetes 中使用容器的环境变量？答案

【问题标题】：Is it possible to configure React application to use container's environment variables in Kubernetes?是否可以将 React 应用程序配置为在 Kubernetes 中使用容器的环境变量？
【发布时间】：2020-01-15 23:17:06
【问题描述】：

首先——让我们假设我们有一个 React 应用程序。我们想要构建它并部署到 3 个环境 - 开发、测试和生产。作为每个前端应用程序，它都需要调用一些 API。 API 地址会因环境而异。所以它们应该存储为环境变量。

作为每个现代、进步的开发人员，我们都希望使用容器。特别是 Kubernetes。

我们想要构建我们的 Web 应用程序并将其部署在 K8S 集群上。应该构建容器映像并密封更改，然后在部署到每个特定环境之前注入变量。

但这里似乎有一个很大的不可能。例如，对于 .NET 应用程序，当我们编译 .dll 时，它会在运行时读取一个配置文件。这不是 React 的情况。在我们生成构建之后，我们只有静态文件。在构建 React 应用程序的过程中，变量被更改为静态值。在那之后似乎没有办法更新它 - 或者是吗？

【问题讨论】：

正如其他人所提到的。您想利用 K8 的“ConfigMaps”和“Secrets”。您可以将它们作为环境变量或“虚拟文本文件”注入。我更喜欢“虚拟文本文件”而不是环境变量的秘密，所以“记录器”不会记录秘密（在转储所有环境变量时）。因此，您编写一些基本代码来读取这些值（配置映射或机密），这些值会在 pod 出现时“挂载”...
请参阅这篇文章了解我关于将“秘密”作为环境变量的观点：techbeacon.com/devops/how-keep-your-container-secrets-secure
请看这个：Kubernetes: services

标签： reactjs docker kubernetes containers

【解决方案1】：

您尝试解决问题的方式不正确。

您不需要知道任何有关您的 React 应用中的后端服务地址的信息。只有为您的 React 应用程序提供服务的前端服务器/网关需要了解后端服务。来自 React 应用的任何请求都应通过网关代理。

查看 API 网关模式 - https://microservices.io/patterns/apigateway.html

【讨论】：

这可能是一些解决方案。所以你的意思是我们应该调用 API 网关而不是单独的 API。但是我们怎么知道我们应该调用哪个环境 API GW？
从 react 的角度来看，它不需要知道它所处的环境。react 应用程序总是向同一服务器发出请求-axios.get("/api/v1")。用户通过输入相应服务器的 URL 连接到他想要的环境。
对不起，我不明白。
如果我想在生产环境中连接到我的应用程序，我连接到http://prod:8080。如果我想连接到我的 QA 环境，我连接到http://qa:8080。在这两种情况下，从这些服务提供的浏览器中加载相同的反应应用程序。当 react 应用程序使用代码 axios.get("/api/v1") 发出 get 请求时，它在第一种情况下转到 http://prod:8080/api/v1，在第二种情况下转到 http://qa:8080/api/v1。 http://prod:8080/ 服务器或 http://qa:8080/ 网关服务器负责对适当的后端服务进行后端 API 调用并转发请求。
后端 URL 可以是任何东西。它们可以在网关服务器上轻松配置。如果您的 api 服务器位于 URL my-qa-api:9000，那么当客户端（您的反应应用程序）发出请求 http://qa:8080/api/v1 时，qa:8080 网关将其转发到 http://my-qa-api:9000/api/v1，然后将响应发送回客户端。 URl my-qa-api:9000 是网关qa:8080 的配置，例如可以设置为环境变量。

【解决方案2】：

您可以使用config map 来存储 API 端点地址，并将其作为环境变量引用到 pod 中。

如果您想在 pod 运行时更改某些值，您可以挂载配置映射，任何更改都将是 synced in the pod

【讨论】：

您可以在 pod 中读取这些变量，但您无法根据这些变量更新 React 构建（不生成新构建）。