Creating CI/CD with AWS CodePipeline using GitHub and an Angular Application
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.
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.
As seen below we are able to view each step of the CodeBuild process.
Next we will configure the CodePipeline.
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.
As seen in the screen shot below the Source, Build and Deploy stages all went through successfully.
It is now time to see if our S3 Static Website is available.
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.