如何通过Docker Compose为Angular应用动态配置API基础URL？

完全可行，这正是容器化部署场景下推荐的「一次构建、多次部署」最佳实践，能有效避免重复构建镜像的冗余工作。

核心思路 #

Angular默认的环境变量是构建时注入的，要实现运行时通过Docker环境变量配置，需要改成运行时读取环境变量的方式：通过容器启动脚本替换前端静态文件中的占位符，再让应用读取这个动态注入的变量。

具体实现步骤 #

1. 修改Angular应用，支持运行时读取环境变量 #

（1）在index.html中添加环境变量占位符

在src/index.html的<head>标签内添加一段脚本，定义全局环境变量占位符：

<script>
  window['env'] = {
    API_BASE_URL: '%API_BASE_URL%' || 'http://default-api.example.com'
  };
</script>

设置默认值是为了防止环境变量未传入时应用出现异常。

（2）创建环境变量服务

新建src/app/services/env.service.ts，封装环境变量的读取逻辑：

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

@Injectable({
  providedIn: 'root'
})
export class EnvService {
  get apiBaseUrl(): string {
    return window['env'].API_BASE_URL;
  }
}

（3）在API请求中统一使用该服务

通过HTTP拦截器统一处理API基础URL，避免在每个服务中重复编写：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
import { EnvService } from './env.service';

@Injectable()
export class ApiUrlInterceptor implements HttpInterceptor {
  constructor(private envService: EnvService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    // 拼接API基础URL和请求路径
    const apiReq = req.clone({
      url: `${this.envService.apiBaseUrl}${req.url}`
    });
    return next.handle(apiReq);
  }
}

记得在app.module.ts中注册这个拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { ApiUrlInterceptor } from './services/api-url.interceptor';

@NgModule({
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: ApiUrlInterceptor, multi: true }
  ]
})
export class AppModule { }

2. 编写Dockerfile与启动脚本 #

（1）Dockerfile（分阶段构建）

# 构建Angular应用
FROM node:18-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build --prod

# 部署到Nginx
FROM nginx:alpine as production-stage
COPY --from=build-stage /app/dist/your-app-name /usr/share/nginx/html
# 复制启动脚本
COPY entrypoint.sh /entrypoint.sh
RUN chmod +x /entrypoint.sh
# 设置启动命令
ENTRYPOINT ["/entrypoint.sh"]
CMD ["nginx", "-g", "daemon off;"]

（2）启动脚本entrypoint.sh

这个脚本会在容器启动时替换index.html中的占位符为Docker传入的环境变量：

#!/bin/sh

# 替换index.html中的API_BASE_URL占位符
sed -i "s|%API_BASE_URL%|${API_BASE_URL}|g" /usr/share/nginx/html/index.html

# 执行容器原启动命令（Nginx）
exec "$@"

3. Docker Compose配置 #

在docker-compose.yml中通过environment字段传入API基础URL：

version: '3.8'
services:
  angular-app:
    image: your-angular-app:latest
    ports:
      - "80:80"
    environment:
      # 根据部署环境修改这个值
      - API_BASE_URL=http://your-api-service:8080/api

额外注意事项 #

• 如果有多个环境变量需要配置，可扩展index.html中的window['env']对象，并在entrypoint.sh中添加对应的sed替换命令。
• 确保构建镜像时，占位符%API_BASE_URL%不会被Angular的构建工具替换，不要在environment.ts中定义同名变量。
• 测试时可直接通过docker run命令传入环境变量验证：docker run -e API_BASE_URL=http://test-api.example.com -p 80:80 your-angular-app:latest

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