Docker构建Angular项目时创建环境文件报错，求正确实现方案

错误原因 #

报错的核心原因是环境文件被加入.gitignore，执行COPY frontend/时未将环境文件复制到镜像的ng-build阶段，导致Angular构建命令找不到指定路径的environment.prod.ts文件。

正确实现方式 #

以下两种方案均能解决问题，核心逻辑是在Docker构建的ng-build阶段动态生成所需的环境文件：

方案1：通过构建参数直接生成环境文件

修改Dockerfile的ng-build阶段，添加参数声明和文件生成逻辑：

FROM node:16 AS ng-build
WORKDIR /usr/src/app
# 声明需要传入的环境变量（根据实际业务需求调整）
ARG API_URL
ARG APP_ENV
COPY frontend/ ./frontend/
# 创建environments目录并生成environment.prod.ts
RUN cd frontend && \
    mkdir -p src/environments && \
    echo "export const environment = {
  production: true,
  apiUrl: '$API_URL',
  env: '$APP_ENV'
};" > src/environments/environment.prod.ts
RUN npm install --legacy-peer-deps && npm run build --aot --output-hashing=none

FROM node:16 AS node
WORKDIR /usr/src/app
COPY backend/ ./backend/
COPY --from=ng-build /usr/src/app/frontend/dist/ ./backend/public
RUN cd backend && npm ci --only=production --omit=dev && npm cache clean --force
COPY backend/server.js ./backend/
 
EXPOSE 3000
CMD ["node", "./backend/server.js"]

执行构建时，通过--build-arg传递参数：

docker build --build-arg API_URL=https://your-api-domain.com --build-arg APP_ENV=prod -t your-image-name .

方案2：使用模板文件替换变量（适合多环境变量场景）

1. 在前端项目的src/environments目录下创建模板文件environment.prod.template.ts（不要加入.gitignore），内容示例：

export const environment = {
  production: true,
  apiUrl: '{{API_URL}}',
  authTokenKey: '{{AUTH_TOKEN_KEY}}',
  timeout: {{API_TIMEOUT}}
};

2. 修改Dockerfile的ng-build阶段：

FROM node:16 AS ng-build
WORKDIR /usr/src/app
ARG API_URL
ARG AUTH_TOKEN_KEY
ARG API_TIMEOUT
COPY frontend/ ./frontend/
# 复制模板并替换变量生成环境文件
RUN cd frontend && \
    cp src/environments/environment.prod.template.ts src/environments/environment.prod.ts && \
    sed -i "s/{{API_URL}}/$API_URL/g" src/environments/environment.prod.ts && \
    sed -i "s/{{AUTH_TOKEN_KEY}}/$AUTH_TOKEN_KEY/g" src/environments/environment.prod.ts && \
    sed -i "s/{{API_TIMEOUT}}/$API_TIMEOUT/g" src/environments/environment.prod.ts
RUN npm install --legacy-peer-deps && npm run build --aot --output-hashing=none

# 后续node阶段保持不变
FROM node:16 AS node
WORKDIR /usr/src/app
COPY backend/ ./backend/
COPY --from=ng-build /usr/src/app/frontend/dist/ ./backend/public
RUN cd backend && npm ci --only=production --omit=dev && npm cache clean --force
COPY backend/server.js ./backend/
 
EXPOSE 3000
CMD ["node", "./backend/server.js"]

3. 构建时传递参数：

docker build \
  --build-arg API_URL=https://your-api-domain.com \
  --build-arg AUTH_TOKEN_KEY=auth_token \
  --build-arg API_TIMEOUT=30000 \
  -t your-image-name .

注意事项 #

• 如果前端项目的src/environments目录不存在，需先通过mkdir -p src/environments创建
• 敏感参数必须通过--build-arg传递，禁止硬编码在Dockerfile或模板中
• Docker内部为Linux环境，sed命令可正常运行，无需针对Windows系统修改

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