将容器化Angular应用部署到ECS Fargate时的环境变量配置问题

核心问题分析 #

日志中GET /.env的请求，说明你的Angular应用运行时在尝试加载根目录下的.env文件，但你的配置逻辑是通过env.template.js生成assets/env.js来注入环境变量，两者不匹配。这是导致错误的根本原因。

具体排查与修复步骤 #

1. 检查Angular代码的环境变量读取逻辑 #

• 查找代码中是否存在直接引用process.env、import.meta.env，或者使用了dotenv类库在浏览器端尝试加载/.env的逻辑。
• 确保所有环境变量读取都指向生成的assets/env.js：
  • 先确认env.template.js的格式正确，比如：

    // assets/env.template.js
    window.env = {
      API_ENDPOINT: "${API_ENDPOINT}",
      APP_ENV: "${APP_ENV}"
    };
    

  • Angular代码中通过全局对象window.env读取变量，而非尝试加载.env文件。

2. 验证容器启动时的文件生成情况 #

在Fargate任务的启动命令中添加日志，确认env.js是否正确生成：

CMD ["/bin/sh",  "-c",  "envsubst < /usr/share/nginx/html/assets/env.template.js > /usr/share/nginx/html/assets/env.js && cat /usr/share/nginx/html/assets/env.js && exec nginx -g 'daemon off;'"]

查看容器日志，确认环境变量是否被正确替换，env.js是否生成在指定路径。

3. 检查Angular构建配置 #

• 确认angular.json中的构建配置没有硬编码环境变量，或残留了对.env文件的依赖。
• 确保构建后的dist目录中，没有包含未被正确替换的环境变量引用代码。

4. 可选：阻止.env请求（治标） #

如果暂时无法修改代码，可以在nginx配置中添加规则，阻止对/.env的请求：
在/etc/nginx/conf.d/default.conf中添加：

location = /.env {
    return 404;
}

你可以通过Dockerfile将自定义nginx配置复制到容器中：

# 在nginx阶段添加
COPY nginx.conf /etc/nginx/conf.d/default.conf

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