如何实现一次构建多环境部署并读取目标机器环境变量？

核心结论 #

完全可以实现一次构建、多环境部署，且在运行时注入环境变量，无需为每个环境单独编译。

具体实现方案 #

1. 静态配置文件注入（最常用） #

• 在Angular项目的src/assets目录下创建config.json文件，预留默认配置：

  {
    "CURRENT_ENVIRONMENT": "default",
    "API_BASE_URL": ""
  }
  

• 确保angular.json中assets目录已被纳入构建产物（默认已配置，无需额外修改）。
• 在应用启动阶段通过HTTP请求加载该配置，合并到全局环境变量：

  import { HttpClient } from '@angular/common/http';
  import { environment } from './environments/environment';
  import { APP_INITIALIZER } from '@angular/core';
  
  export function loadConfig(http: HttpClient) {
    return () => http.get('/assets/config.json').toPromise()
      .then(config => Object.assign(environment, config))
      .catch(err => console.error('配置加载失败:', err));
  }
  
  // 在app.module.ts的providers数组中注册初始化器
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: loadConfig,
      deps: [HttpClient],
      multi: true
    }
  ]
  

• 部署时仅需替换目标服务器上的assets/config.json，填入对应环境的值（如dev环境设"CURRENT_ENVIRONMENT": "dev"），应用启动时会自动读取最新配置。

2. 注入index.html全局变量 #

• 在index.html中预留占位符：

  <script>
    window.APP_CONFIG = {
      CURRENT_ENVIRONMENT: '{{CURRENT_ENVIRONMENT}}'
    };
  </script>
  

• 部署时用服务器脚本或CI/CD工具替换占位符，比如Shell命令：

  sed -i 's/{{CURRENT_ENVIRONMENT}}/qa/g' /usr/share/nginx/html/index.html
  

• Angular代码中直接读取全局变量：

  const currentEnv = (window as any).APP_CONFIG.CURRENT_ENVIRONMENT;
  

3. 服务器环境变量传递（需托管支持） #

若托管服务（Nginx、Node.js代理等）允许设置环境变量，可通过反向代理注入：

• Node.js代理示例：

  const express = require('express');
  const fs = require('fs');
  const app = express();
  const env = process.env.CURRENT_ENVIRONMENT || 'dev';
  
  app.get('/', (req, res) => {
    fs.readFile('./dist/index.html', 'utf8', (err, data) => {
      if (err) return res.status(500).send(err);
      const modifiedHtml = data.replace('{{CURRENT_ENVIRONMENT}}', env);
      res.send(modifiedHtml);
    });
  });
  app.use(express.static('./dist'));
  app.listen(3000);
  

• 部署时仅需在服务器设置CURRENT_ENVIRONMENT环境变量即可，无需修改Angular产物。

关键注意事项 #

• Angular是客户端应用，所有运行时配置会暴露给用户，禁止存放敏感信息（如API密钥），敏感内容需通过后端接口转发。
• 建议将配置替换操作纳入CI/CD流程，避免手动修改出错。
• 使用APP_INITIALIZER时，需处理配置加载失败的场景，比如显示错误提示或 fallback 到默认配置。

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