使用 Kubernetes 将变量注入 config.js

Question

我有一个 ReactJS 应用程序，我正在使用 Kubernetes 部署它。

我正在努力思考如何将环境变量从 Kubernetes 部署文件中注入到我的 config.js 文件中。

我目前有这些： config.js文件：

export const CLIENT_API_ENDPOINT = { 
    default:process.env.URL_TO_SERVICE,
};

这是我的 Kubernetes 部署变量：

"spec": {
  "containers": [
    {
      "name": "container_name",
      "image": "image_name",
      "env": [
        {
          "name": "URL_TO_SERVICE",
          "value": "https://www.myurl.com"
        }
      ]

有点不明白为什么我在config.js 文件中看不到环境变量。任何帮助将不胜感激。

这是我的 dockerfile：

# Dockerfile (tag: v3)
FROM node:9.3.0
RUN npm install webpack -g
WORKDIR /tmp
COPY package.json /tmp/
RUN npm config set registry http://registry.npmjs.org/ && npm install
WORKDIR /usr/src/app
COPY . /usr/src/app/
RUN cp -a /tmp/node_modules /usr/src/app/
#RUN webpack
ENV NODE_ENV=production
ENV PORT=4000
#CMD [ "/usr/local/bin/node", "./index.js" ]
ENTRYPOINT npm start
EXPOSE 4000

Answer 1

Kubernetes 环境变量在您的容器中可用。所以你会认为这里的任务是将服务器端配置变量发送到客户端代码的一个版本。

但是，如果您的 react 应用程序在容器中运行，那么您很可能在构建 docker 映像时运行您的 javascript 构建管道。像这样的：

RUN npm run build

# Run app using nodemon
CMD [ "npm", "start" ]

当 docker 构建你的容器时，kubernetes 注入的环境变量还不可用。在您在集群上运行构建的容器之前，它们不会存在。

一个解决方案，这可能是您最短的路径，是停止在 docker 文件中构建您的客户端代码，并在 npm start 命令中结合构建和运行步骤。如果您使用的是 webpack，则类似这样：

"start": "webpack -p --progress --config webpack.production.config.js && node index.js"

如果你走这条路，那么你可以使用任何有据可查的技术在构建步骤中将服务器端环境变量传送到你的客户端：Passing environment-dependent variables in webpack。所有其他 javascript 构建工具都有类似的技术和工具。

二：如果你正在运行node，你可以继续在容器中构建你的客户端应用程序，但是在node应用程序启动时让node应用程序将config.js写入文件系统。

您可以做更复杂的事情，例如通过 api 公开您的配置（第二种方法的一种变体），但这似乎是一掷千金。

我想知道是否没有更简单的方法。如果你有一个纯粹的客户端应用程序，为什么不把它作为一个静态站点部署到，比如说，亚马逊或 gcloud 存储桶、firebase 或 netlify？这样，您只需运行构建过程并部署到正确的环境。不需要容器。