如何通过K8s Deployment YAML配置Node.js前端的env.js环境变量

一、Deployment配置环境变量到env.js的方案 #

前端代码运行在浏览器环境中，无法直接读取容器的系统环境变量，所以Deployment的env字段对前端无效。需要把环境变量注入到前端可访问的env.js文件中，以下是两种可行方案：

方案1：用ConfigMap直接挂载env.js文件 #

如果你的env.js内容不需要动态修改，可直接将其存入ConfigMap，再挂载到容器的静态资源目录：

1. 创建存储env.js的ConfigMap：

apiVersion: v1
kind: ConfigMap
metadata:
  name: frontend-env
data:
  env.js: |
    window.env = { "API_URL": "http://ip:port" }

2. 在Deployment中挂载该ConfigMap到容器的目标文件路径：

apiVersion: apps/v1
kind: Deployment
metadata:
  name: frontend-deploy
spec:
  replicas: 1
  selector:
    matchLabels:
      app: frontend
  template:
    metadata:
      labels:
        app: frontend
    spec:
      containers:
      - name: frontend
        image: your-node-frontend-image
        volumeMounts:
        # 直接挂载到容器内的env.js文件路径，而非目录
        - name: env-config
          mountPath: /usr/share/nginx/html/env.js
          subPath: env.js # 指定要挂载的ConfigMap中的key
      volumes:
      - name: env-config
        configMap:
          name: frontend-env

方案2：动态生成env.js（适合需要修改API_URL的场景） #

如果需要根据环境动态调整API_URL，可以用Init容器结合环境变量生成env.js：

1. 创建存储模板文件的ConfigMap：

apiVersion: v1
kind: ConfigMap
metadata:
  name: env-template
data:
  env.template.js: |
    window.env = { "API_URL": "${API_URL}" }

2. 在Deployment中添加Init容器，用环境变量替换模板内容生成env.js：

apiVersion: apps/v1
kind: Deployment
metadata:
  name: frontend-deploy
spec:
  replicas: 1
  selector:
    matchLabels:
      app: frontend
  template:
    metadata:
      labels:
        app: frontend
    spec:
      initContainers:
      - name: generate-env
        image: busybox
        env:
        - name: API_URL
          value: "http://ip:port" # 可替换为从ConfigMap/Secret读取
        command: ['sh', '-c', 'envsubst < /template/env.template.js > /env/env.js']
        volumeMounts:
        - name: template
          mountPath: /template
        - name: env-storage
          mountPath: /env
      containers:
      - name: frontend
        image: your-node-frontend-image
        volumeMounts:
        - name: env-storage
          mountPath: /usr/share/nginx/html/env.js
          subPath: env.js
      volumes:
      - name: template
        configMap:
          name: env-template
      - name: env-storage
        emptyDir: {}

二、PVC挂载env.js被识别为目录的原因与解决 #

常见原因 #

1. PV后端存储中，你创建的是env.js目录而非文件；
2. 挂载时未指定subPath，K8s会将整个PVC挂载到目标路径，若容器内目标路径原本是文件，会被强制转为目录；
3. 容器镜像中，目标路径（如/usr/share/nginx/html/env.js）本身就是一个目录。

解决办法 #

1. 检查PV存储内容：确认PV对应的后端存储（如NFS、本地磁盘）中，目标路径下是env.js文件，而非同名目录；
2. 挂载时指定subPath：确保直接挂载文件而非整个PVC：

volumeMounts:
- name: env-pvc
  mountPath: /usr/share/nginx/html/env.js
  subPath: env.js # 指定PVC中的文件名
volumes:
- name: env-pvc
  persistentVolumeClaim:
    claimName: your-pvc-name

3. 清理容器内冲突目录：如果镜像中目标路径是目录，可在容器启动脚本中先删除该目录，或改用其他路径挂载env.js。

内容的提问来源于stack exchange，提问作者Federico Stefini