Our First CI/CD Pipeline in AWS!
Small project on how to build a pipeline for CI/CD (continuous integration/continuous deployment) using AWS services. Let’s dig in!
CI/CD can be pictured as a pipeline, where new code is submitted on one end, tested over a series of stages (source, build, test, staging, and production), and then published as production-ready code. This is a way to improve the quality of your project and the changes you make will happen a lot faster.
To get going on this, you will need an AWS account with the correct permissions to use the S3 and CodePipeline services. You will also need a GitHub account for the repo and for commits.
Step #1
To kick things off, we will need to fork this repository to our own. It includes all the files we will need to get our pipeline up and running. Here is the link-https://github.com/LevelUpInTech/LUIT-angular-app
You can use this repo or your own.
Step #2
We are going to head over to the AWS console and create a quick S3 bucket to store the data for our project.
Search S3 at the top and when we get to the dashboard, we are going to click on Create bucket. We will need to check the box ACL’s enabled, name our bucket, and uncheck the box for Block all public access. Make sure you check the box for acknowledgement that you are turning off the block for public access. We will leave all other settings on default and click Create bucket.
This is a quick way to set up a bucket and the basics we will need for our project. Soon we will be deleting everything. If this is something other than a project, make sure you are placing the proper security measures in place.
After we have created our bucket, go back to the dashboard and select the bucket. Go to the Properties tab and at the bottom, we will edit for Static website hosting and change the radio dial to Enable. Under the Index document add a default page of “index.html”.
Make sure to save those changes and then go to the Permissions tab of your bucket. We will now edit the Bucket policy. You can use a policy example from AWS that will give public read permission to your bucket. Make sure to replace your bucket name in the resource section along with /*.
Step #3
Now is the time to go to CodePipeline and get all the stages of our pipeline built. Starting with Source, then Build, and last but not least, Deploy.
After we find the CodePipeline service dashboard, we can select Create pipeline. On the next screen, we will need to name our pipeline, leave everything on default and then click Next.
Step #4
On the next screen we will choose our Source provider. Since I have some experience with Github, that is what I chose and chose version 2. Since we don’t have a connection yet, we will want to choose Connect to Github and go through the steps. If this is your first time like it was for me, you will need to Install a new app and sign into your GitHub account. It will ask you what repo you want to use and the branch name as well. Leave everything else alone and click on Next.
Now we are moving to the Build stage!
Step #5
Let’s go choose the Build settings! In the Add build stage page, we will need to select a Build provider. In this example we are going to go with AWS CodeBuild. We will then add a new project by selecting Create project. We will add a name and then give it a description if we feel it is necessary. There are a few things we need to watch out for and select. They are:
- Environment image = Managed image
- Operating system = Ubuntu
- Runtime(s) = Standard
- Image = aws/codebuild/standard:5.0
- Image version = “Always use the latest image…”
- Environment type = Linux
Leave the rest of the settings on default and select Continue to CodePipeline at the bottom of the page.
Click on Next and let’s go to the next steps!
Step #6
In the Add deploy stage, we will select Amazon S3. Under the bucket option, you’ll select the bucket that we created earlier for this project. We will also need to select the Extract file before deploy box and select Next.
After reviewing the pipeline and being satisfied with it, we can click on Create pipeline. If you see a green bar with the success message, you know your pipeline is working!
It will take several minutes for the pipeline to go through all the stages. As you can see, mine had only just completed the first stage and still has a little bit to go.
Step #7
Let’s go and verify that everything is working! We can do this by checking our static site to see if it’s working and making a small change to our code to see if our pipeline is triggered by the change. Let’s go back to our S3 bucket that we created for this project and then the file, or object, that is inside that bucket. Click on the index.html object and stay in the Properties tab and look for the Object URL. We will want to copy and paste the Object URL into our browser.
Looks like we were able to access the pretty basic website.
I am going to go and make a change in the repo in GitHub to see if the change triggers the pipeline. I am going to add some text to the readme file.
Once these changes are made we will want to head back to the AWS CodePipeline and select our pipeline. We will be able to see that our pipeline was triggered and is relaunching because of the change that was made to the readme file in GitHub.
If you want to see the history of your changes, you can click on history on the left-hand side of the page to see what has been done previously.
But that is the project! We did it! We created our first CI/CD pipeline and it wasn’t too bad! This makes it smooth and easy to make changes and to push them out quickly. This is just the beginning and there is so much more to do and learn but we accomplished our goal of getting a pipeline put together and launching a static site. Thanks for following along!
