如何将Docker Run传递的环境变量注入到Docker部署的Angular容器并替换配置文件值

你想在容器启动时通过环境变量动态替换Angular应用里config.json的配置值，而不是在构建阶段把这些值固定死，这个需求很常见，毕竟没人想为不同环境重复构建镜像。下面是具体的解决方案：

步骤1：修改config.json为占位符格式 #

先把你的src/config.json里的固定值替换成可识别的占位符，方便后续用环境变量替换：

{ "api": "{{API_URL}}", "language": "{{LANGUAGE}}" }

这里用{{API_URL}}和{{LANGUAGE}}作为占位符，你也可以换成其他格式，只要和后面的替换命令匹配就行。

步骤2：调整Dockerfile支持动态替换 #

Alpine版Nginx镜像默认没有envsubst（环境变量替换工具），我们需要先安装它，然后修改启动逻辑，先替换配置文件再启动Nginx。

方案一：直接在CMD中写替换命令 #

更新后的Dockerfile如下：

### STAGE 1: Build ###
FROM node:17.6-alpine AS builder
WORKDIR /usr/src/app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build --prod

### STAGE 2: Deploy ###
FROM nginx:1.21.6-alpine
# 安装环境变量替换工具envsubst
RUN apk add --no-cache gettext
COPY --from=builder /usr/src/app/dist/content-admin-frontend /etc/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
# 先替换config.json里的占位符，再启动Nginx
CMD ["/bin/sh", "-c", "envsubst '{{API_URL}},{{LANGUAGE}}' < /etc/nginx/html/config.json > /etc/nginx/html/config.tmp && mv /etc/nginx/html/config.tmp /etc/nginx/html/config.json && exec nginx -g 'daemon off;'"]

方案二：用启动脚本简化逻辑（更推荐） #

1. 在项目根目录创建start.sh脚本：

#!/bin/sh
# 替换占位符，未传环境变量时使用默认值
envsubst '{{API_URL}},{{LANGUAGE}}' < /etc/nginx/html/config.json \
  | sed -e 's|{{API_URL}}|http://localhost/api/v1/|g' \
  -e 's|{{LANGUAGE}}|en|g' > /etc/nginx/html/config.tmp
mv /etc/nginx/html/config.tmp /etc/nginx/html/config.json

# 启动Nginx
exec nginx -g 'daemon off;'

2. 然后更新Dockerfile，复制并执行这个脚本：

### STAGE 1: Build ###
FROM node:17.6-alpine AS builder
WORKDIR /usr/src/app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build --prod

### STAGE 2: Deploy ###
FROM nginx:1.21.6-alpine
RUN apk add --no-cache gettext
COPY --from=builder /usr/src/app/dist/content-admin-frontend /etc/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
# 复制启动脚本并添加执行权限
COPY start.sh /usr/local/bin/
RUN chmod +x /usr/local/bin/start.sh
EXPOSE 80
CMD ["start.sh"]

步骤3：用环境变量启动容器 #

现在你可以通过-e参数传递环境变量来替换配置了，比如：

docker run -p 4200:80 -e API_URL='http://test/api/v1/' -e LANGUAGE='en' -d contentadminfrontend

如果某个环境变量没传，脚本里的默认值会自动填充，不用额外处理。

关键原理说明 #

Angular构建后，config.json会被打包到dist目录，成为Nginx托管的静态文件。我们在容器启动时，用环境变量替换这个静态文件里的占位符，这样Angular应用加载config.json时，拿到的就是动态传入的配置了。

注意事项 #

• 确保你的Angular应用是通过**HTTP请求加载config.json**的，比如在服务里用HttpClient.get('/config.json')获取配置，而不是在构建时把它注入到environment.ts里。
• 如果配置值包含特殊字符（比如/、&），建议用|代替/作为sed的分隔符，避免替换出错。

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