React Continuous Deployments with AWS CodePipeline | Multi Env pipeline

By the time you are reading this I believe your app already is working perfectly on localhost and your code is pushed to git ( either Bitbucket or Github).

Prerequisite

1. A Working code
2. Full access to git repo
3. AWS Account
4. 15 min of your time

Here I am not going to teach you on how to create S3 Bucket and Cloudfront. you can look on how to do this from my previous article.

Step 1 : Adding a buildspec.yml file

version: 0.1
phases:
 pre_build:
 commands:
 — echo Installing source NPM dependencies…
 — npm install
 build:
 commands:
 — echo Build started on `date`
 — npm run build:$ENV
 post_build:
 commands:
 # copy the contents of /build to S3
 — aws s3 cp — recursive — acl public-read ./build s3://$BUCKET_NAME/ 
 — aws cloudfront create-invalidation — distribution-id $DIST_ID — paths '/*'
artifacts:
 files:
 — '**/*'
 base-directory: build

In this code we do the following

during the pre_build hook, We are installing npm modules available in your package.json file

during the build hook, We are actually generating the build. Interesting point to note at this is we have added a env variable $ENV which gives us liberty to use multiple env without changing the buildspec.yml file.

during the post_build hook, We are then uploading this to s3 and invalidating cache. You have multiple s3 bucket as per each env. passing $BUCKET_NAME and $DIST_ID as an env variable solves the issue of not having env specific build files.

Do not forget to commit this code to ur repo.

Step 2: Create your pipeline

In this section, you create a pipeline with the following actions:

Step 2.1 : Create a pipeline with the wizard

Sign in to the AWS Management Console and open the CodePipeline console at http://console.aws.amazon.com/codesuite/codepipeline/home.
On the Welcome page, Getting started page, or Pipelines page, choose Create pipeline.

Choose pipeline settings, in Pipeline name, enter name of your choice ex react-deploy-to-prod.
In Service role, choose New service role to allow CodePipeline to create a service role in IAM.

Leave the settings under Advanced settings at their defaults, and then choose Next.

Step 2.1 : Pulling the code from source Repo
You can choose any provider of your choice and connect your repo.

Once you have your repo connected to this AWS Account. The CI/CD process starts. Each time there is a commit to your repo, this will be initiate a deployment. Once the source is done, the next part is Build stage

Step 2.2 : Creating a build and uploading this to S3 Bucket

Click on Add Stage and name it as Build with following details

Action provider : This depends on what you have selected in Step 2.1
Input artifacts as SourceArtifact
Project name : you have to create a new one
>> Set Project Name : that you wish to keep (react-deploy-to-prod-build)

>> Environment Image : Managed image
>> Operating system : I prefer Amazon AMI 2
>> Runtime(s) : Standard
>> Image : Latest
>> Image version : Latest
>> Environment type : Linux

>> Advance Configuration : this is a critial part. If you have noticed we have passed 3 Environment variables in our code $ENV, $BUCKET_NAME & $DIST_ID. Pass these env with respective values in this section

Save the setting and this will take back to pipeline

Click on Done after you review the settings

Once Completed your pipeline will look similar to this

At the end you will see that after your commit to your repo, the code to pushed to AWS Code pipeline and then build is generated and uploaded to s3 and CloudFront cache is invalidaded.

If this article has helped you, Please share your feedback via DM or comment with me on https://www.linkedin.com/in/chetanbothra