Need help in configuring and accessing env variables in aws code build

0

Hi all,
I've the following situation here. I'm new to this code build. Basically what i'm trying to achieve is to define the environment variables in the 'environment variable tab in code build' and use those environment variables defined in buildspec.yaml. 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.

buildspec.yaml

env:
variables:
REACT_APP_SOME_TOKEN: '${SOME_TOKEN}' // I understand this is plain text
REACT_APP_SOME_SPACE: ${SOME_SPACE}
REACT_APP_BASE_URL: 'https://cf-api.oasissystems.com.au/api/v1'
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 is "${SOME_TOKEN}' or whatever that is provided as a plaintext, but not the env variable defined in the environment tab

I tried with the following variations

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

Questions:

  1. Is this correct way of doing? If not, Please advise
  2. What is the other ways of defining the secret keys in the env variables and how do i refer it in the process.env in react app

Please see the attachment what I meant by environment tab mean at aws code build. I know you guys know that. But just to make things clear. Please advise at the earliest as i'm lil not sure

Edited by: baranit on May 20, 2020 2:32 AM

Edited by: baranit on May 21, 2020 1:27 AM

baranit
asked 4 years ago3787 views
5 Answers
0

Hi,

I couldn't find the attachment anywhere in this page.

The environment variables you defined in the buildspec will override what you defined in the project environment configuration (environment tab in console) if they have the same name. The recommend way is to use either ParameterStore or SecretsManager to store your secrets and specify that in the buildspec. Documentation for how to use these in the buildspec:

https://docs.aws.amazon.com/codebuild/latest/userguide/build-spec-ref.html#parameter-store-build-spec
https://docs.aws.amazon.com/codebuild/latest/userguide/build-spec-ref.html#secrets-manager-build-spec

Regards,
Kaixiang

Edited by: Kaixiang-AWS on May 21, 2020 2:32 PM

answered 4 years ago
0

@Kaixiang-AWS
Thanks for the reply and the reference. I've attached the screenshots where the environment tab that i'm referring to.

  1. But just to let you know that REACT_APP_CONTENTFUL_TOKEN down below is the environment variable I use it for the front end to access via process.env.REACT_APP_CONTENTFUL_TOKEN and the
    CONTENTFUL_TOKEN down below is what is defined in the project environment variables in the aws console. And so both are different.

  2. Secondly based on the example below I've defined the project environment variable in aws console as CONTENTFUL_TOKEN as "123#$$" in plain text and I provided the reference in the buildspec.yml as mentioned below. And when I try to access process.env.REACT_APP_CONTENTFUL_TOKEN, my expectation is it should show "123#$$". But rather It is showing as string "${CONTENTFUL_TOKEN}". The main question here is how do I access the environment variables defined in the project environment console, so it can be accessed on the front end in react.

  3. The above question applies for parameter store as well

env:
variables:
REACT_APP_CONTENTFUL_TOKEN: ${CONTENTFUL_TOKEN} //
...

Kindly advise
Regards,
Bt

baranit
answered 4 years ago
0

Hi,

The environment variable section in buildspec doesn't allow evaluating a variable. The recommend way for your use case would be

  1. Directly specify REACT_APP_CONTENTFUL_TOKEN in the environment tab or in buildspec. I don't see a reason why you need an intermediate CONTENTFUL_TOKEN variable. An example in the buildspec would be
env:
  variables:
    REACT_APP_CONTENTFUL_TOKEN: "123#$$"
  1. You can keep what you did for CONTENTFUL_TOKEN and assign its value to REACT_APP_CONTENTFUL_TOKEN in install phase. An example would be
phases:
  install:
    commands:
      - REACT_APP_CONTENTFUL_TOKEN=$CONTENTFUL_TOKEN

Hope this could solve your issue.

Regards,
Kaixiang

answered 4 years ago
0

@Kaixiang-AWS
Thanks for your reply. My use case was to get the token or secret_key from process.env.token from the react front end, so I can make API calls. Also the reason why I don't want to specify the token or secret key directly in the builspec.yml is, I don't want to expose this in my commit in the repo. But I found export the variables like the following does the job.

phases:
install:
commands:
- export REACT_APP_CONTENTFUL_TOKEN=${CONTENTFUL_TOKEN}

baranit
answered 4 years ago
0

I found that variables in the build command phase can be exported in order to access it outside (i.e,, from the front end via process.env.somethingimportant) provided the environment variables are defined in the proeject environment variables console

baranit
answered 4 years ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions