AWS code build with env variables from build-spec.yml

Question

I'm new to this code build. I'm trying to define the environment variables in the 'environment variable tab in code build' and use those environment variables defined in buildspec.yml. The objective of doing that is to access in the react app with proces.env.REACT_APP_SOME_SPACE which should provide the value as expected, so that it can be used for API calls.

buildspec.yml

env:
 variables:
// I understand this is plain text. But SOME_TOKEN provided below is defined in the aws code build as an environment variable having a value under environment tab
REACT_APP_SOME_TOKEN: ${SOME_TOKEN} 
REACT_APP_SOME_SPACE: ${SOME_SPACE}
REACT_APP_BASE_URL: 'https://myurl'
REACT_APP_REQUEST_TIMEOUT: '10000'
REACT_APP_SERVICE_API_KEY: ${SERVICE_API_KEY}
...
phases:
install:
commands:
- echo "Building ${CODEBUILD_WEBHOOK_TRIGGER}"
...

What i see in process.env.REACT_APP_SOME_TOKEN for e.g., is just "${SOME_TOKEN}' or whatever that is provided as a plaintext, but not the env value defined for the variable 'REACT_APP_SOME_TOKEN' in the environment tab. I tried with the following variations, but nothing is working:

REACT_APP_SOME_SPACE: ${SOME_SPACE}
REACT_APP_SOME_SPACE: '${SOME_SPACE}'
REACT_APP_SOME_SPACE: {SOME_SPACE}
REACT_APP_SOME_SPACE: $SOME_SPACE

Questions:

Is this correct way of doing? If not, Please advise me and provide me details
I see that the parameter store in aws is used for storing secret keys. But want to how do I refer it in the process.env or some other env variables in react app, so I can use it my api calls to pass it over.

What I meant by environment tab mean at aws code build.

user_248823 · Answer

The variables is just a mapping of key: value. At that point, environment variables which you specify for the container are not used.

This is exemplified in the documentation using $PATH:

set an environment variable named PATH with a value of $PATH:/usr/share/ant/bin, then /usr/local/sbin:/usr/local/bin is replaced by the literal value $PATH:/usr/share/ant/bin.

Thus your variable REACT_APP_SOME_TOKEN is set to literal value of ${SOME_TOKEN}, explaining why you are getting them as text only values later on.

For example, to set REACT_APP_SOME_TOKEN to the real value of ${SOME_TOKEN} the following can be done in the pre_build:

  pre_build:
    commands:
      - export REACT_APP_SOME_TOKEN=${SOME_TOKEN}

Alternatively, in your build project you could consider using REACT_APP_SOME_TOKEN directly, instead of defining SOME_TOKEN, which then you assign to REACT_APP_SOME_TOKEN.

P.S. Example of sourcing files in bash:

myenvvars.sh:

export A=3
export B=4

buildspec (mock)

#!/bin/bash

source ./myenvvars.sh

echo ${A}
echo ${B}

AWS code build with env variables from build-spec.yml

1 Answers