Docker构建Angular时错误使用开发环境文件问题排查

1. 环境文件约定不匹配：Angular默认约定生产环境文件为environment.prod.ts，开发环境为environment.ts（或environment.development.ts）。你将生产配置写在environment.ts、开发配置写在environment.development.ts，与默认约定冲突，导致--prod构建时无法正确识别生产环境文件。
2. 参数传递或配置错误：npm run build --prod的参数可能未正确传递给Angular CLI，或angular.json中production配置的fileReplacements未正确映射到你的生产环境文件，最终加载了开发环境的URL。

方法一：遵循Angular默认约定调整文件 #

1. 重命名文件：
   • 将environment.ts改为environment.prod.ts
   • 将environment.development.ts改为environment.ts
2. 检查angular.json的production配置，确保fileReplacements正确：

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "optimization": true,
    "outputHashing": "all"
  }
}

3. Dockerfile中的构建命令保持npm run build --prod即可，此时会正确加载生产环境的API URL。

方法二：修改配置适配现有文件命名 #

如果不想修改文件名，直接调整angular.json的build配置：

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.development.ts",
        "with": "src/environments/environment.ts"
      }
    ],
    "production": true,
    "optimization": true
  }
}

同时确保Dockerfile中使用显式配置命令传递参数：

RUN npm run build -- --configuration production

（这里的--用于将参数传递给Angular CLI，避免npm拦截）

如果需要在容器运行时无需重新构建即可切换API URL，推荐动态注入方案：

1. 在项目的index.html中添加全局变量占位符：

<head>
  <script>
    window.apiUrl = '<%= API_URL %>';
  </script>
</head>

2. 创建容器启动脚本entrypoint.sh：

#!/bin/sh
# 替换占位符，默认使用生产环境URL
sed -i "s|<%= API_URL %>|${API_URL:-https://localhost:49157/api/}|g" /usr/share/nginx/html/index.html
# 启动nginx
exec nginx -g 'daemon off;'

3. 修改Dockerfile，添加脚本并设置入口点：

FROM node:16-alpine as builder
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build --configuration production

FROM nginx:alpine
COPY --from=builder /app/dist/movie-web-app /usr/share/nginx/html
COPY entrypoint.sh /entrypoint.sh
RUN chmod +x /entrypoint.sh
ENTRYPOINT ["/entrypoint.sh"]

4. 运行容器时通过环境变量指定API URL：

docker run -e API_URL="https://your-production-api.com/api/" -p 80:80 your-image-name

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