
Integrating environment variables with AWS Code Build & Next.js app
NOTE: This article will not focus on how to setup a CI/CD pipeline on AWS. It will mainly focuses on setting up environment variables on AWS. Integrating them on your server & client configurations. Leading to have different environments for testing, staging & production.
What’s the need ?
Well, in order to follow our methodology of Build Fast, Fail Fast. We need to automate the process of deployment of our web app on development, staging & production to be very smooth & hassle free. By this, we can just hand over a ticket to QA team to deploy, test and release the feature.
CICD Setup
Our CICD setup includes AWS ECR for docker containers. Code Pipeline & Code Build for integration with our code repo & building our project. In our code we need a Dockerfile & buildspec.yml to run our project and integrate with Code Build.
Let’s get started with Docker. Following is a snippet from our Dockerfile.
# Set Node environment
FROM node:8
# Create app directory
WORKDIR /usr/src/my-app
COPY package*.json ./
# Install app dependencies
RUN npm install
# Bundle app source
COPY . .
#Define Argument variables
ARG env
ENV envValue=$env
#Build
RUN if [ "$env" = "prod" ] ; then npm run build ; fi
RUN if [ "$env" = "dev" ] ; then npm run buildDev ; fi
RUN if [ "$env" = "staging" ] ; then npm run buildStaging ; fi
EXPOSE YOUR_PORT
CMD ["sh", "-c", "npm run $envValue" ]The above Dockerfile runs in our Code Build Project. The docker build command takes an argument variable $env from the command line. The if else condition defines that every environment should run a different command for building our project. Each command is defined in our package.json following which it picks the respective configuration from our project.

As you can see in the above picture buildStaging command has a TYPE of staging which tells the build to pick the staging environment config. Thus if the $env is staging which comes from buildspec, Dockerfile will run build command as npm run buildStaging and npm run staging for starting the project.
After the Dockerfile we need a buildspec.yml file which consists our AWS container repo on which our docker images will be stored. Following this we will see a code snippet from our buildspec.yml.
In the above code snippet, under the env section we have defined a variable named API_BASE which will be passed from Code Build Project.
Configuring env variables in our next app
Now in our buildspec file, we have added a pre-build command to the print the env variables coming from the Code Build in a separate .env file.

Following is a code snippet from our next.config.js file.
In the above code snippet, we simply are merging the env variables from our pre defined files & the ones coming from AWS Code Build. For passing these process.env variables into client side we are using DefinePlugin of webpack which enables us to use to process.env in client side configurations.
Last but not the least : AWS Code Build
After making our Dockerfile & buildspec we need to create a Code Build project on AWS & add environment variables into it.

Ta da !!
I know there’s a hell lot of configuration, but don’t feel intimidated by it you will get along. Now after creating the pipeline & setup we only need to edit the env variables in our Code Build project to whichever urls our testing api is pointed to and it works like a charm !.
Comments, shares & discussions are highly appreciated. Please feel free to ask any questions in the response section, I’d be more than happy to answer.
