Deploying Front-end build using AWS Pipeline

Deploying code using pipeline can be a mess if you don’t have a single reference for the task. I have derived this article based on my experience creating deployment pipelines using multiple techniques.

Code deploy pipeline looks as depicted in below picture at high level.

Image for post
Image for post
CI-CD at high level

Code pipeline has 3 stages:

  1. Build

As a side note: services we are going to use for this task are — AWS CodeBuild, AWS S3, AWS CodeDeploy, AWS CodePipeline, IAM

Prerequisite:

You have to install code deploy agent on target EC2 instances. Run below script in order to install the agent.

sudo yum update
sudo yum install ruby
sudo yum install wget
cd /home/ec2-user
wget https://aws-codedeploy-ca-central-1.s3.ca-central-1.amazonaws.com /latest/install
chmod +x ./install
sudo ./install auto

Verify the code deploy agent is running

sudo service codedeploy-agent status

The code deploy agent is a key tool for deploying the code. It’s an intelligent piece of code which gets installed on EC2 instance and performs actual deployment tasks.

S3 Bucket

Create a bucket in S3 with appropriate name and enable versioning. This is the bucket we are going to use to store artifacts created by the build stage.

Configure bucket policy by allowing public access and add bucket policy to restrict to the specific roles in the bucket policy. The bucket policy should look like this.

{
"Version": "2012-10-17",
"Id": "Policy1563961797256",
"Statement": [
{
"Sid": "Stmt1563961794600",
"Effect": "Allow",
"Principal": {
"AWS": [
"arn:aws:iam::123XXXXXXXX:role/service-role/service-role-name",
"arn:aws:iam::123XXXXXXXX:role/service-role/AWSCodePipelineServiceRole"]
},
"Action": "s3:*",
"Resource": "arn:aws:s3:::<BucketName>"
}
]
}

The above roles mentioned in the Principal attribute, are created automatically while creating CodeBuild project and CodePipeline respectively. Once you create these two projects you can update the roles in the policy by fetching ARN from the IAM. We do not need to create these roles explicitly.

Build Stage

Build stage gets the code base from the Bitbucket repository and runs the build commands to create the build. We have used GIT web hooks in as a trigger to create builds i.e. PULL_REQUEST_MERGE. Once someone approves the PR and merges to the repo, this build will trigger and pull the code base from the Development branch.

Follow below wizard to create build project.

  1. Create a build project from AWS CodeBuild
Image for post
Image for post

2. Select source provider, in this case it’s bit bucket repository. You have to provide auth mechanism in order to connect with bitBucket from your AWS account. This will ask you to select repository from your account

Image for post
Image for post

3. In the Environment section, select configuration depicted in the below snap.

Image for post
Image for post
Image for post
Image for post

4. Next one is the Buildspec section. This contains the hooks required to build using AWS CodeBuild. Code build uses the buildspec.yml file as a source to run the commands for the build. You can refer the current buildspec.yml file in the below code snippet.

version: 0.2
env:
variables:
S3_BUCKET: <Bucket_Name>
APP_NAME: angular-app
phases:
install:
runtime-versions:
nodejs: 10
pre_build:
commands:
- echo Installing source NPM dependencies...
- npm install
- npm install -g @angular/cli
build:
commands:
- echo Build started on `date`
- npm run build
- cp appspec.yml dist/
artifacts:
files:
- '**/*'
- dist/*
# discard-paths: yes
base-directory: dist

Here in the build section, we are running build commands and also copying the appspec.yml file (I will show in next section)to the dist folder which will be used in the deploy phase.

Please refer to the snaps for the code build configuration. Specific information will be provided in the respective sections.

5. In the Artifacts section, provide the name of the bucket and the artifact name which will be deployed.

Image for post
Image for post

6. Update log group and stream details (optional but useful)

Image for post
Image for post

Great!!! You are done with the creation of the CodeBuild project.

AWS CodeDeploy

  1. Create CodeDeploy application by providing name and compute platform. For our purposes, it’s EC2.
Image for post
Image for post

2. Once you create application, create a deployment group under that application.

Image for post
Image for post

3. Enter group name, service role (which has access to deploy the code on your behalf). Also we are sticking with In-Place deployment type here.

Image for post
Image for post

4. Keep the Agent configuration with AWS Systems Manager and Deployment settings as defaults.

5. We are not enabling Load Balancing for now.

6. Create the deployment group.

You are done with creation of the deployment app.

Now Last step is to add glue to bind build and deploy so they act as a continuous process. We will use AWS CodePipeline for that.

AWS CodePipeline

  1. Enter Pipeline name and service role. Select your bucket, where you are having artifacts.
Image for post
Image for post

2. Select source provider

Image for post
Image for post

3. Select build project in the next wizard.

Image for post
Image for post

4. Select Deploy project in the next wizard.

Image for post
Image for post

5. Click review and Create!

You are done with the entire pipeline.

Next actions, see your pipeline in progress!! Push the code into your branch and you will see your build will be in action.

Thinking of restricting builds from specific branch or specific conditions? Keep watching this space, I will come up with that soon.

Looking forward for your feedback and comments!!!

AWS Certified Associate Architect, Cloud Solutions Lead, Angular Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store