[SOLVED] Vue is not picking up env variables from aws ecs task container

Vue is not picking up env variables from aws ecs task container

I have a Vue 2.6 app which is deployed in aws ecs task container 1.4 , but in the console it is not pciking up the env variables which I have set up in the aws task environment variable. For example I am setting NODE_ENV as dev but it has taken production .What am I doing wrong

The code:

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;

But in the console log it is showing:

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

But I have already defined the variables in environment details of aws task container

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

Solution

Your Vue app doesn't run on ECS. The files are simply served by the ECS server and they run in the client's web browser. The app picks up those environment variables at the time the app is built, not at the time the files are served to the client. When you build your app with Webpack or Vite or whatever build tool you are using, that is the moment when those process.env environment variables are replaced with actual values in the final JavaScript code that is output by the build process.