Angular 14部署至OpenShift环境变量不生效问题排查

问题根源分析 #

1. 构建时文件替换未生效：部署阶段的构建命令可能未指定production配置，导致打包时仍使用environment.ts而非environment.prod.ts。
2. 环境变量注入时机错误：Angular默认是构建时编译环境变量，直接在environment.prod.ts中写$CLIENT_ID会被当作字符串打包，不会在运行时读取容器环境变量。
3. 环境文件拼写错误：environment.prod.ts中producution拼写错误（应为production），可能导致环境判断逻辑异常。

解决方案步骤 #

1. 确保构建命令触发文件替换

在OpenShift的构建配置中，必须使用带production配置的构建命令，确保environment.ts被替换为environment.prod.ts：

nx build --configuration=production

验证构建产物：解压打包后的文件，查看main.*.js中是否包含后续设置的占位符而非xyz-456。

2. 修复环境文件拼写错误并调整变量读取逻辑

修正environment.ts和environment.prod.ts中的拼写错误，同时改为从全局对象读取运行时环境变量：

// environment.ts
export const environment = {
  production: false,
  CLIENT_ID: 'xyz-456'
};

// environment.prod.ts
export const environment = {
  production: true,
  CLIENT_ID: window.env?.CLIENT_ID || 'default-client-id'
};

3. 实现运行时环境变量注入

因为Angular静态包无法直接读取容器环境变量，需通过容器启动脚本动态替换占位符：

• 步骤1：在index.html中添加全局环境变量占位符
  在src/index.html的<head>标签内添加：

  <script>
    window.env = {
      CLIENT_ID: '__CLIENT_ID__'
    };
  </script>
  

• 步骤2：编写容器启动脚本
  在项目根目录创建entrypoint.sh：

  #!/bin/sh
  
  # 替换index.html中的环境变量占位符
  sed -i "s/__CLIENT_ID__/${CLIENT_ID:-default-client-id}/g" /usr/share/nginx/html/index.html
  
  # 启动nginx（假设使用nginx作为web服务器）
  nginx -g 'daemon off;'
  

• 步骤3：更新Dockerfile
  确保脚本被复制到容器并设置为入口点：

  # 构建阶段
  FROM node:18 as builder
  WORKDIR /app
  COPY package*.json ./
  RUN npm install
  COPY . .
  RUN nx build --configuration=production
  
  # 运行阶段
  FROM nginx:alpine
  COPY --from=builder /app/dist/your-app-name /usr/share/nginx/html
  COPY entrypoint.sh /entrypoint.sh
  RUN chmod +x /entrypoint.sh
  ENTRYPOINT ["/entrypoint.sh"]
  

4. 验证OpenShift ConfigMap挂载

确保DeploymentConfig中正确从ConfigMap注入环境变量：

spec:
  template:
    spec:
      containers:
      - name: your-app-container
        env:
        - name: CLIENT_ID
          valueFrom:
            configMapKeyRef:
              name: qat-app-configmap
              key: CLIENT_ID

验证方法 #

1. 部署后进入容器执行echo $CLIENT_ID，确认环境变量已正确注入。
2. 访问应用，通过浏览器控制台打印environment.CLIENT_ID，确认值为abcd-123。

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