K8s部署Angular应用时如何动态传入environment.ts的baseURL

因为Angular编译时会把environment.ts的内容打包进静态文件，直接硬编码无法在运行时修改，不过可以通过以下两种方案实现动态传入：

方案一：启动时替换静态文件中的占位符 #

这种方式是在构建镜像时预留占位符，容器启动前用环境变量替换掉占位符，步骤如下：

1. 修改Angular环境文件
   把environment.ts里的baseURL改成占位符：

   export const environment = {
     production: true,
     baseURL: '__BASE_URL__'
     // 其他配置...
   }
   

   执行ng build --prod编译生成静态文件。

2. 编写Dockerfile和启动脚本
   基于httpd镜像构建，添加启动脚本实现替换逻辑：

   FROM httpd:alpine
   # 复制编译后的静态文件到httpd的默认目录
   COPY dist/your-app-name /usr/local/apache2/htdocs/
   # 添加启动脚本
   COPY entrypoint.sh /usr/local/bin/
   RUN chmod +x /usr/local/bin/entrypoint.sh
   # 设置入口脚本
   ENTRYPOINT ["entrypoint.sh"]
   

   启动脚本entrypoint.sh内容：

   #!/bin/sh
   # 用环境变量替换静态文件中的占位符
   sed -i "s|__BASE_URL__|${BASE_URL}|g" /usr/local/apache2/htdocs/main*.js
   # 启动httpd服务器
   httpd-foreground
   

3. Kubernetes Deployment配置
   在Deployment中设置BASE_URL环境变量，值为后端服务的集群内访问地址：

   apiVersion: apps/v1
   kind: Deployment
   metadata:
     name: angular-app
   spec:
     replicas: 1
     selector:
       matchLabels:
         app: angular-app
     template:
       metadata:
         labels:
           app: angular-app
       spec:
         containers:
         - name: angular-app
           image: your-angular-image:tag
           env:
           - name: BASE_URL
             value: "http://<service>.<namespace>:<port>/api/v1/"
           ports:
           - containerPort: 80
   

方案二：通过ConfigMap挂载配置文件，Angular启动时加载 #

这种方式是把配置文件放在ConfigMap中，挂载到容器内，Angular应用启动时加载该文件覆盖默认配置：

1. 创建ConfigMap
   新建一个配置文件config.json：

   {
     "baseURL": "http://<service>.<namespace>:<port>/api/v1/"
   }
   

   用该文件创建ConfigMap：

   kubectl create configmap angular-config --from-file=config.json
   

2. 修改Angular应用加载配置
   在app.module.ts中添加APP_INITIALIZER，启动前加载配置文件：

   import { NgModule, APP_INITIALIZER } from '@angular/core';
   import { HttpClientModule, HttpClient } from '@angular/common/http';
   import { environment } from '../environments/environment';
   
   // 加载配置的函数
   function loadConfig(http: HttpClient) {
     return () => http.get('/config/config.json').toPromise().then(config => {
       environment.baseURL = config['baseURL'];
     });
   }
   
   @NgModule({
     imports: [HttpClientModule],
     providers: [
       {
         provide: APP_INITIALIZER,
         useFactory: loadConfig,
         deps: [HttpClient],
         multi: true
       }
     ]
   })
   export class AppModule { }
   

3. Kubernetes Deployment挂载ConfigMap
   在Deployment中把ConfigMap挂载到httpd的htdocs目录下的config子目录：

   apiVersion: apps/v1
   kind: Deployment
   metadata:
     name: angular-app
   spec:
     replicas: 1
     selector:
       matchLabels:
         app: angular-app
     template:
       metadata:
         labels:
           app: angular-app
       spec:
         containers:
         - name: angular-app
           image: your-angular-image:tag
           ports:
           - containerPort: 80
           volumeMounts:
           - name: config-volume
             mountPath: /usr/local/apache2/htdocs/config
         volumes:
         - name: config-volume
           configMap:
             name: angular-config
   

两种方案都可以实现运行时动态传入baseURL，方案一适合简单场景，方案二更灵活，支持更多配置项的动态修改。

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