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.

CI-CD at high level

Code pipeline has 3 stages:

1. Build
2. Copy
3. Deploy

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

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

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

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.

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

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.

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

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.

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.

2. Select source provider

3. Select build project in the next wizard.

4. Select Deploy project in the next wizard.

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!!!