Creating CI/CD with AWS CodePipeline using GitHub and an Angular Application

Using github as source and AWS Codepipeline for automation

I will create a CI/CD pipeline using AWS Codepipeline that is triggered when an update is made to the GitHub repo called; Angular Application . The pipeline will include a CodeBuild to test the code and it will be deployed to an S3 static site.

This article will instruct you on how to create an AWS CodePipeline to automate continuous integration and continuous delivery from an Angular application.

What you will need to complete the lab:

• AWS Account
• GitHub Account
• Following source code: https://github.com/LevelUpInTech/LUIT-angular-app
• Before we begin make sure is that the region for the S3 bucket and AWS CodePipeline are the same.

Below I have already log into the AWS console and selected S3 and created my S3 bucket with unique name below. Static website hosting is being enabled below which will allow us to set all configurations for S3 website hosting.

Uncheck block public access below, as this is where we will feed content to the public by allowing access.

Next, below click on your S3 bucket so editing can be done to the Bucket Policy.

My actual resource name above is (cicds3bucket25 and not cicd1) screen shot above is for demonstration.

Next, in the AWS console navigate to CodeBuild; Click on Create build project. Choose a Project name and click next.

Under source we will be selecting Github as that is where our source code is located in our repository. Connect to Github and choose Connect to OAtuth; scroll down and configure the environment.

Next, we will configure the Environment as follows.

At the bottom this window click on Create build project.

As seen below we are able to view each step of the CodeBuild process.

The Build was successful as seen above.

Next we will configure the CodePipeline.

Click Create pipeline

As you can see above we are using the AWS CodeBuild as the Provider, Region you are working in and select our project name by typing in the search window, click next.

Click next to create the pipeline

As seen in the screen shot below the Source, Build and Deploy stages all went through successfully.

Pipeline created successfully

It is now time to see if our S3 Static Website is available.

Successful deployment of Code Pipeline

The deployment was successful as you can see I am able to access the S3 bucket where our static website is being hosted from.

Next I will update the webpage. Changes have been made to the webpage and a commit was made to my GitHub repo LUIT-angular-app which was forked in to my github repo. The link is https://github.com/LevelUpInTech/LUIT-angular-app.

Code Pipeline automatically checked the source code for changes is rebuilding and deploying code. As you can see an update was made to our web page. Keep Chopping Big Guy!!!

Code Pipeline along with Code Build and GitHub make IaC very easy to create.