如何将docker-compose变量传递给Docker镜像内运行的Angular应用

Angular 是客户端静态应用，编译完成后仅生成 HTML、CSS、JS 静态资源，运行在用户浏览器环境中，无法直接读取容器操作系统层面的环境变量。你当前挂载的 conf.json 是静态文件，不会自动读取容器环境变量完成填充。

这是最通用的方案，不需要修改 Angular 业务逻辑，适配多环境部署需求。

步骤1：准备配置模板 #

在 Angular 项目的 assets/config/ 目录下新建 config.template.json 模板文件，将需要动态传入的变量用${变量名}作为占位符：

{
  "key": "${KEY}",
  "otherStaticConfig": "固定配置值"
}

Angular 代码中保持原来读取 /assets/config/conf.json 的逻辑即可，不需要调整。

步骤2：修改 Dockerfile 增加变量替换能力 #

你需要在镜像中加入轻量变量替换工具 envsubst，并添加启动脚本完成配置生成，示例Dockerfile如下（基于nginx alpine镜像，和你当前的部署架构适配）：

# 第一阶段：Angular 编译（你原有编译逻辑保留即可）
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build --prod

# 第二阶段：nginx 运行环境
FROM nginx:alpine
# 安装 envsubst 依赖
RUN apk add --no-cache gettext
# 复制编译完成的静态资源
COPY --from=builder /app/dist/ /usr/share/nginx/html/dashboard/
# 复制启动脚本并赋予执行权限
COPY entrypoint.sh /entrypoint.sh
RUN chmod +x /entrypoint.sh

ENTRYPOINT ["/entrypoint.sh"]
CMD ["nginx", "-g", "daemon off;"]

步骤3：编写启动脚本 #

在项目根目录新建 entrypoint.sh 脚本，容器启动时自动替换模板变量生成最终配置文件：

#!/bin/sh
# 替换模板中的环境变量占位符，生成实际使用的conf.json
envsubst < /usr/share/nginx/html/dashboard/assets/config/config.template.json > /usr/share/nginx/html/dashboard/assets/config/conf.json
# 执行原有的nginx启动命令
exec "$@"

配置完成后，你在 docker-compose.yml 中 environment 节点定义的所有变量都会在容器启动时自动填充到 conf.json 中，Angular 应用直接读取配置即可生效。

• 所有通过该方式传入的变量最终都会暴露在前端静态资源中，禁止传入密钥、凭证等敏感信息
• 本地开发时可以直接使用原有静态 conf.json，不需要走变量替换逻辑，不影响开发流程

内容的提问来源于stack exchange，提问作者Y.T.Sengul