Vue 2.6部署AWS ECS任务容器无法读取环境变量，NODE_ENV异常

问题描述 #

将Vue 2.6应用部署在AWS ECS 1.4版本任务容器后，控制台显示无法读取已配置的任务环境变量：

• 配置的NODE_ENV为dev，但实际读取到production
• VUE_APP_STATIC_PAGE_OWNER等变量读取值为undefined

相关代码 #

const getEnvironment = () => {
  console.log('env-config',process.env.VUE_APP_STATIC_PAGE_OWNER)
  const environment = {
    profile: process.env.NODE_ENV || 'local',
    appUrl: process.env.APP_URL,
    port: process.env.APP_PORT || 3000,
    oidcHostUrl: process.env.OIDC_HOST_URL || 'https://fssfed.ge.com',
    oAuth2ClientId: process.env.OAUTH2_CLIENT_ID,
    oAuth2ClientSecret: process.env.OAUTH2_CLIENT_SECRET,
    logOutUrl: process.env.LOGOUT_URL || 'https://affiliateservices.gecompany.com/logoff/logoff.jsp',
    redisHost: process.env.REDIS_HOST || '',
    redisPort: process.env.REDIS_PORT || '',
    sessionSecret: process.env.SESSION_SECRET,
    sessionKey: process.env.SESSION_KEY,
    backendApi: process.env.BACKEND_API,
    wipApiUrl: process.env.WIP_API_URL,
    staticPageOwner: process.env.VUE_APP_STATIC_PAGE_OWNER,
    riskSummaryOwner: process.env.VUE_APP_RISK_SUMMARY_OWNER,
    riskReportUser: process.env.VUE_APP_RISK_REPORT_OWNER
  };
  return environment;
};
module.exports = getEnvironment;

控制台日志 #

env-config undefined
getters.js:36 process.env.NODE_ENV: production
getters.js:37 profile: production
getters.js:38 all variables in environment Object
getters.js:39 environment static var undefined
getters.js:40 process.env.VUE_APP_STATIC_PAGE_OWNER undefined
getters.js:36 process.env.NODE_ENV: production
getters.js:37 profile: production
getters.js:38 all variables in environment Object
getters.js:39 environment static var undefined
getters.js:40 process.env.VUE_APP_STATIC_PAGE_OWNER undefined
notificationRecord.vue:134 failed case--> 255

AWS任务容器环境变量配置 #

APP_URL valueFrom arn:aws:ssm:us-east-1:xxxx:parameter/av-spcsa/crt-admin/ui/dev/APP_URL 

BACKEND_API valueFrom arn:aws:ssm:us-east-1:xxxx:parameter/av-spcsa/crt-admin/ui/dev/BACKEND_API 

NODE_ENV value dev

OAUTH2_CLIENT_ID valueFrom arn:aws:secretsmanager:us-east-1:xxxxx:secret:av-spcsa-crt/crtui/credentials-dev-9Fi59L:OAUTH2_CLIENT_ID:: 

OAUTH2_CLIENT_SECRET valueFrom arn:aws:secretsmanager:us-east-1:xxxxx:secret:av-spcsa-crt/crtui/credentials-dev-9Fi59L:OAUTH2_CLIENT_SECRET:: 

SERVICE_PROFILE value dev

SESSION_KEY valueFrom arn:aws:secretsmanager:us-east-1:xxx:secret:av-spcsa-crt/crtui/credentials-dev-9Fi59L:SESSION_KEY:: 

VUE_APP_RISK_REPORT_OWNER valueFrom arn:aws:ssm:us-east-1:xxx:parameter/av-spcsa/crt-admin/ui/dev/RISK_REPORT_OWNER 

VUE_APP_RISK_SUMMARY_OWNER valueFrom arn:aws:ssm:us-east-1:xxxxx:parameter/av-spcsa/crt-admin/ui/dev/RISK_SUMMARY_OWNER 

VUE_APP_STATIC_PAGE_OWNER valueFrom arn:aws:ssm:us-east-1:xxxxx:parameter/av-spcsa/crt-admin/ui/dev/STATIC_PAGE_OWNER 

WIP_API_URL valueFrom arn:aws:ssm:us-east-1:xxxxx:parameter/av-spcsa/crt-admin/ui/dev/WIP_API_URL 

排查方向与解决建议 #

1. Vue前端环境变量注入逻辑问题 #

Vue是单页应用，运行在浏览器端，无法直接读取容器的环境变量。process.env在浏览器环境中不存在，只有在构建阶段通过Vue CLI注入的变量才会被打包到静态资源中。如果你的部署包是本地预构建的（比如执行了npm run build），那么构建时的NODE_ENV会被固化为production（默认npm run build会设置NODE_ENV=production），容器中的环境变量根本不会生效。

• 解决办法：
  • 针对不同环境单独构建：比如执行NODE_ENV=dev npm run build生成dev环境的构建包，再部署到ECS
  • 使用.env系列文件：创建.env.dev文件配置dev环境变量，执行npm run build --mode dev构建对应环境包

2. ECS环境变量生效验证 #

• 确认ECS任务已重启：修改环境变量后，需要重启任务才能让配置生效
• 进入容器查看实际环境变量：通过AWS控制台或aws ecs execute-command进入运行的容器，执行printenv命令，检查NODE_ENV、VUE_APP_STATIC_PAGE_OWNER等变量是否存在且值正确

3. SSM/Secrets Manager权限与资源验证 #

• 检查SSM参数与Secrets Manager密钥：确认av-spcsa/crt-admin/ui/dev/STATIC_PAGE_OWNER等SSM参数存在且有值，Secrets Manager密钥包含OAUTH2_CLIENT_ID等指定字段
• 检查ECS任务执行角色权限：确保任务执行角色拥有ssm:GetParameter（针对SSM参数）和secretsmanager:GetSecretValue（针对Secrets Manager密钥）的权限，否则valueFrom无法拉取到对应值

4. 运行时动态注入环境变量（可选） #

如果需要在容器运行时动态传递环境变量给前端，可以：

• 编写启动脚本：在容器启动时，将环境变量写入index.html的全局变量中（比如<script>window.env = { NODE_ENV: '${NODE_ENV}' }</script>），前端通过window.env读取
• 改用服务端渲染（SSR）：通过Node.js服务动态传递环境变量给前端组件

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