Automated AngularJS & Boostrap Deployment via AWS CodePipeline

What are AWS DevOps Services?

AWS DevOps offers versatile services to help enterprises build and deliver products quickly and reliably utilising DevOps. These services facilitate infrastructure provisioning, code deployment, software release automation, and application and infrastructure monitoring.

AWS DevOps Service Available

These are all AWS DevOps services that we can use; there are 6 DevOps services categories you can use:

1. 1st is Version Control, which uses Git service to store your application development codes.
2. The CI/CD services are initial for DevOps deployment and delivery services such as AWS CodePipeline is a vital service to visual all CodeBuild, CodeDeploy and automation processes you have.
3. 3rd category is Microservice utilise serverless approach for application deployments such as AWS Elastic Container Service (ECS) and AWS Lambda
4. The 4th category is Infrastructure as Cod; AWS CloudFormation is an atypical service for auto-provisioning tools in AWS not only DevOps services.
5. The 5th category is Platform as a Service (PaaS), such as AWS Beanstalk other options than the standard option such as AWS EC2 for your application environment.
6. Lastly, the 6th category is Monitoring and Logging services, such CloudWatch which is recorded for all events in the AWS CodePipeline stages.

Benefits of AWS DevOps / DevTool

Get Started Fast: Each AWS service is ready to use if you have an AWS account. There is no setup required or software to install.

Fully Managed Services: These services can help you take advantage of AWS resources quicker. You can worry less about setting up, installing, and operating infrastructure.

Built for Scale: You can manage a single instance or scale to thousands using AWS services. These services help you make the most of flexible compute resources by simplifying provisioning, configuration, and scaling.

Programmable: You can use each service via the AWS Command Line Interface or through APIs and SDKs. You can also model and provision AWS resources and your entire AWS infrastructure using declarative AWS CloudFormation templates.

Automation: AWS helps you use automation so you can build faster and more efficiently. Using AWS services, you can automate manual tasks or processes such as deployments, development & test workflows, container management, and configuration management.

Secure: Use AWS Identity and Access Management (IAM) to set user permissions and policies. This gives you granular control over who can access your resources and how they access those resources.

Large Partner Ecosystem: AWS supports a large ecosystem of partners which integrate with and extend AWS services. Use your preferred third-party and open-source tools with AWS to build an end-to-end solution.

Pay-As-You-Go: With AWS purchase services as you need them and only for the period when you plan to use them. AWS pricing has no upfront fees, termination penalties, or long-term contracts. The AWS Free Tier helps you get started with AWS.

What is AWS CodePipeline?

What is AWS CodePipeline?

• AWS CodePipeline is a workflow management solution that lets users build, test, and publish code into a test or production environment.
• When a process step fails, the pipeline is halted, preventing unnecessary flaws and errors from being delivered.

What are AWS CodePipeline Components?

• AWS CodeCommit — the Git Service for Version Control
• AWS CodeBuild — Build a Code agent that builds all your source codes.
• AWS CodeDeploy — Code deploy agent that helped you deploy latest code to EC2, On-Premise instance, AWS ECS, & AWS Lambda

Benefits:

• Security: Within the AWS architecture. You do not have to expose keys to the outside world to be able to trigger builds.If your CI/CD provider lies outside and gets hacked exposing AWS keys, the hacker can do anything with your AWS account.
• Infrastructure as Code (IaC): Any Infrastructure as Code solution for AWS (such as Terraform or Cloud Formation) would also work for Codepipeline. AWS allows you to configure the building part with the help of YAML files.
• Managed Services: You do not have to install Codepipeline or even provision a set of agents. AWS does all of that for you.
• An end-to-end solution gives you the most features that other CI/CD providers have.

AWS CodePipeline Concepts

Source Provider: Holds the version of a source change that triggers a pipeline execution. Examples of source providers other than GitHub are Amazon S3, ECR, CodeCommit &, etc.

Build Provider: Compiles the source code, builds docker images, and produces software packages ready to deploy.

Deploy Provider: Deploy the updated image to Amazon EC2, On-Premise, ECS & Lambda.

DEMO / LAB: Automated Deployment via AWS CodePipeline

Consider our simple online calculator application has the following:

1. A single-page Calculator App(Angular 9, Bootstrap 4.4.1).
2. The Calculator App will do addition, subtraction, multiplication, and division by user input and selections.
3. The project code repository is maintained on a local/laptop.
4. Locally build, compile and unit-test already.

What do we want to achieve? (Objective)

1. Automate deployment of Calculator using script via AWS DevTool services.
2. Link/Integrate our local code to AWS CodeCommit.
3. Create AWS CodeBuild for Build and Unit-Test.
4. We are using Infrastructure as Code (IaC) via AWS CloudFormation script for auto AWS EC2 provision for Calculator App STG.
5. Add manual approval before we deploy to the Production environment.
6. Deploy to Production Env.

AWS DevOps Services used in this Demo

We are going to use all these 8 AWS Services in this Demo:

• Version Control: AWS CodeCommit
• CI/CD Pipeline: AWS CodePipeline and its components
• AWS CloudWatch for pipeline logs
• AWS CloudTrail to record all activity on our AWS account and services
• AWS CloudFormation for Infra as Code tasks
• AWS System Manager for automating common and repetitive IT operations and management tasks

Architecture Diagram

What are the critical services involved in this Demo?

• AWS CodePipeline — a CI/CD pipeline for our auto-deployment/delivery.
• AWS CodeCommit — Source code repository
• AWS CodeBuild — Unit-test and build
• AWS CodeDeploy — The cloud platform where the infrastructure is deployed
• CloudFormation — Auto-provisioning our STG env.
• AWS EC2 — The Web Server(NGINX) and serving Angular content over HTTP

Code Deployment Flow

What is the desired code development workflow?

A CI/CD workflow with deployments to staging-prod stages would be as follows:

• The code is developed and tested locally on the Developer machine/laptop.
• The Developer commits/push the new change to AWS CodeCommit.
• AWS CodePipeline will pick up the latest code changes/update and run CodeBuild and CodeDeploy.
• The Angular single-page update and ready to serve users.

Prerequisites

1. Source Code: https://gitlabserver.devops4me.com/najibradzuan/do4m-angular-calculator.git
2. AWS IAM Roles:

These are all the IAM service roles we require for this demo:

For CodePipeline components:

1. CodeCommit
2. S3
3. CodeBuild
4. EC2
5. SNS
6. CloudWatch

For CloudFormation we need full access to EC2 and IAM for services roles.

3. AWS EC2 Prod Env.

We have to provision EC2 t2.micro instance which is already installed with the Nginx web server and AWS CodeDeploy agent for our CodeDeploy to update the code in the pipeline.

4. AWS Amazon Machine Image (AMI)

Lastly, we need to create a new image AMI from Prod EC2 for auto-provision of our Staging env. usage

AngularJS Local Build & Unit-Test

Continuous Build (Development)

Now we want to move from our local dev to leverage AWS DevOps services, 1st thing we need to do is go to AWS Console->AWS CodeCommit->Create repository:

Once, our AWS CommitCode repo is created, we can copy the Git URL to push our local code to AWS CodeCommit.

These are what our Angular and Bootstrap projects look like. It's a combination of AWS CodePipeline scripts as well. To push your code, you can run git commands and add our remote repo which is our newly created AWS CodeCommit. Last push the latest code.

Continuous Integration (CI)

To use AWS CodeBuild in AWS CodePipeline, we need to create a new CodeBuild build Project:

• Enter your Build Project Name
• Description (Optional)
• Choose your code Source Provider, we have CodeCommit in the previous step, then choose it.
• Select our CodeCommit repository name.
• Chose Branch that you want to deploy.

Continue on CodeBuild project environment setup:

• Select Managed Services for our CodeBuild env.
• Choose Amazon Linux instance
• Choose runtime as Standard
• You can choose the latest image and I preferred one minus the version of the latest image ver.
• Since we have a Linux image, so choose Env type is Linux as well
• So service role, select create a new role to associate with our build project
• Lastly, we have to enter our CodeBuild buildspec.yml script.

Finally, our code build project was created for Build;

The previous step follows the same for the Unit-Test code build project just make sure you enter the correct buildspec.yml script for unit-test;

Continuous Deployment / Delivery (CD)

For CodeDeploy, we need to create a new Application, enter

• Apps Name
• Compute platform, since we already provisioned an EC2 instance for our Production env, we choose the EC2 option

Once, your CodeDeploy Application is created, proceed to create a new Deployment group :

Select the Application name that we created in the previous step, create a new deployment, and then enter the input here:

• Your Deployment Group Name
• In a prerequisite we had created a service role for our CodeDeploy, select it
• For Deployment type, please choose In-Place
• On Deployment Settings, please choose CodeDeployDefault.AllAtOnce, since we only have 1 instance to deploy, so this is a sufficient option.
• Lastly, we click Create deployment group button to proceed.

For the demo, I created also for Staging deployment group, hence in our CodeDeploy Application, we must have these 2 deployment groups created.

New AWS CodePipeline(#1)

1st Step, we need to define our Pipeline settings:

• Give your Pipeline name
• Choose to create new services or you can choose the service role that you created in the prerequisite steps.
• Then click the Next button

• 2nd Step we need to choose our Source Provider, we select AWS CodeCommit as our provider.
• Choose our repo name and its branch
• For #7 detect new changes in our code and #8 for artefact option just select the default option given here.

In Build stage step, enter the below input;

• AWS CodeBuild as our provider
• Enter a region that is similar to your EC2 instance, for me I choose AP-SOUTHEAST-1 or SG
• Choose your Code Build project name that u created in the previous step.
• Choose Build Type as single build since we do not performance batch build

On Step Deploy stage.

• Choose AWS CodeDeploy as our provider
• Again put the SG region as the previous steps.
• Choose your CodeDeploy Application name
• Lastly, choose the CodeDeploy deployment group we want to use, for this choose Production env.

AWS CodePipeline(#2)

In real development, we don’t simply deploy all the latest codes straight to our Production env. Hence, we need a Pre-Production env like Staging to test with our targeted user/audience. So we going to create a new Stage called “Staging”, which have 4 Action Group:

1. Create Staging CloudFormation Stack which is our EC2 instance for Staging env.
2. After creating STG EC2 we deploy the latest code
3. We put the Manual Approval process for our approval to do the User Acceptance Test (UAT).
4. Once our Approval is tested and approved, we delete our Staging stack and move to deploy our code to PROD env.

The thing to remember, in the CloudFormation stack creation action group:

Since we use our CloudFormation template that fetches from our repository, you have to define the CF parameter in the Advanced section:

• IAM Role: WebServerRoleName
• AMI ID that refers to your Image

Lastly, for the output Variable, we can define the Staging output variable to get the URL/IP for our staging env once it auto-provisioned EC2. It will be used for the Manual Approval action group later.

We add the Manual Approval action group in the Staging stage:

• SNS: choose a topic you created for our Manual Approval
• The output variable we defined in the CloudFormation step and put in as our URL parameter.

Finally, when our Approver approved the staging env., it will automatically delete our Staging CloudFormation stack and deployed code to the Prod environment.

AWS CodePipeline CI/CD Improvements

1. High-Performance and High-Availability (HA)

2. Shifting-Left Approach (DevSecOps)

3. AWS CodePipeline Monitoring & Metrics

Continuous delivery approaches benefit greatly from the AWS CodePipeline service. However, how can you tell if you’re getting the benefit of continuous delivery merely because you have a continuous delivery funnel? Hence, we can create leverage of CloudWatch metrics and create a dashboard, the metric we can monitor such:

1. Cycle Time

2. Lead Time

3. MTBR

4. MTTR

5. MTBF

6. Feedback Time

Recap

1. We talked about AWS DevOps Services available
2. We defined what is AWS CodePipeline and its components.
3. We create an AngularJS & Bootstrap demo project for AWS CodePipeline
4. We did fully automated CI/CD pipeline used AWS CodePipeline
5. We also discussed what can we do to improve our current CI/CD pipeline setup and stages.

Additional Resources

https://docs.aws.amazon.com/codepipeline/latest/userguide/welcome.html

https://aws.amazon.com/devops/

https://aws.amazon.com/devops/what-is-devops/

Introduction to DevOps on AWS — AWS Whitepaper (amazon.com)