如何为部署在S3的Angular静态网站配置多环境参数？

方案1：运行时加载外部配置文件（推荐） #

这个方法仅需在部署时替换一个独立的配置文件，既避免了全局字符串替换的误操作风险，又能保持构建产物的一致性。

步骤：

1. 在src/assets目录下创建config.json，初始内容如下：

{
  "apiUrl": "https://api.default.example.com"
}

2. 创建配置服务config.service.ts，负责加载该配置文件：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class ConfigService {
  private config: any;

  constructor(private http: HttpClient) {}

  loadConfig() {
    return this.http.get('/assets/config.json')
      .toPromise()
      .then(data => {
        this.config = data;
      });
  }

  getApiUrl() {
    return this.config?.apiUrl;
  }
}

3. 在app.module.ts中通过APP_INITIALIZER确保应用启动前完成配置加载：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { ConfigService } from './config.service';

export function initializeApp(configService: ConfigService) {
  return () => configService.loadConfig();
}

@NgModule({
  // ...其他模块配置
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      deps: [ConfigService],
      multi: true
    }
  ]
})
export class AppModule { }

4. 部署时仅替换对应S3桶内的assets/config.json：
   • Staging环境：上传{"apiUrl": "https://api.staging.example.com"}
   • Production环境：上传{"apiUrl": "https://api.production.example.com"}

方案2：基于域名自动识别环境 #

如果Staging和Production环境有明确的域名区分（比如staging.example.com和example.com），可以让应用在运行时自动判断环境并加载对应配置，无需修改任何文件。

修改ConfigService逻辑：

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ConfigService {
  private config: any;

  constructor() {
    this.determineConfig();
  }

  private determineConfig() {
    const hostname = window.location.hostname;
    if (hostname.includes('staging')) {
      this.config = { apiUrl: 'https://api.staging.example.com' };
    } else {
      this.config = { apiUrl: 'https://api.production.example.com' };
    }
  }

  getApiUrl() {
    return this.config?.apiUrl;
  }
}

此方案下，同一构建产物可直接部署到两个S3桶，应用会自动根据当前域名匹配对应API地址。

方案3：用Lambda@Edge动态注入配置（适合复杂场景） #

若需完全解耦构建与部署流程，可借助CloudFront的Lambda@Edge功能，在请求index.html时动态注入全局配置变量，应用直接读取该变量即可。

1. 创建Node.js Lambda函数，在origin-response阶段注入配置：

exports.handler = (event, context, callback) => {
  const response = event.Records[0].cf.response;
  
  // 仅处理index.html请求
  if (event.Records[0].cf.request.uri === '/index.html') {
    const body = response.body.data.toString();
    // 注入全局配置变量
    const modifiedBody = body.replace(
      '</head>',
      '<script>window.appConfig = { apiUrl: "https://api.staging.example.com" }</script></head>'
    );
    response.body.data = modifiedBody;
    response.headers['content-length'] = [{ key: 'Content-Length', value: modifiedBody.length.toString() }];
  }
  
  callback(null, response);
};

2. 将Lambda关联到对应CloudFront分发的对应阶段（Staging和Production环境使用不同Lambda，注入不同apiUrl）。
3. 在Angular应用中读取全局变量：

// config.service.ts
@Injectable({ providedIn: 'root' })
export class ConfigService {
  getApiUrl() {
    return (window as any).appConfig?.apiUrl;
  }
}

该方案的优势是构建产物完全不含环境相关内容，所有配置由部署层管控。

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