Integrating environment variables with AWS Code Build & Next.js app

Sambhav Jain
Nov 7 · 4 min read

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.

Oh Really !!

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.

package.json

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.

https://gist.github.com/sambhavlbb/73ae6a7b254c3476f7a95b5aa5dddf10

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.

Snippet from Code Build

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade