CI/CD: Using CodePipeline in AWS

Simple tutorial on how to build a pipeline for continuous integration and deployment using AWS services.

A LITTLE BACKSTORY

CI/CD stands for continuous integration (CI) and continuous delivery (CD) and is a method to frequently deliver apps to the customer by introducing automation into the stages of development.

CodePipeline is an AWS service that enables you to model, visualize, and automate the steps required to release your software. A pipeline is a workflow that shows you different stages of the process from developing the code to the deployment of your package. When using AWS CodePipeline you can use the built-in features AWS offers, or integrate third-party tools into any stage of the process.

By automating your build, test, and release process, you improve the quality of your project and the changes you make will happen faster.

MUST-HAVES

In order to follow along, you’ll need is an AWS account with the right permissions to fully use the S3 and CodePipeline services. It would be helpful to also have a GitHub account.

STEP 1 — GET YOUR CODE READY

To get started I forked a repository from my team for this project. It includes all the files I need to get my pipeline up and running.

You can use my repo by going to this link or feel free to use your own.

STEP 2— CREATE AND CONFIGURE AN S3 BUCKET

Let’s head over to AWS and search for S3 (Simple Cloud Storage). Here we’ll configure a bucket to store data for our project.

Once in the S3 dashboard we will simply click Create bucket, check the box ACL’s enabled, name our bucket, and uncheck the box for Block all public access. You will also need to check the box for acknowledgment that you are turning off the block for public access. We can leave all other settings on default and click Create bucket.

Setting our bucket up this way is something that we are only doing to get the project set up quickly and afterward we’ll be deleting everything. If this is something other than a run-through, you’ll want to keep your bucket more secure than this.

After our bucket is set up, we’ll go to the S3 dashboard and select our bucket. Go to the Properties tab and at the bottom, we’ll edit for Static website hosting and change the radio dial to Enable. Also, under Index document add a default page of “index.html”.

Save those changes and then head to the Permissions tab of your bucket. We will edit the Bucket policy. You can use a policy example from AWS that will give public read permission to your bucket. Just replace your bucket name in the resource section along with /*.

Feel free to use this guide as a reference to access the policy I used: https://docs.aws.amazon.com/AmazonS3/latest/userguide/HostingWebsiteOnS3Setup.html

STEP 3— DETERMINE PIPELINE SETTINGS

Now we can go to CodePipeline and get all the stages of our pipeline built. We’ll start with Source, then Build, and finally Deploy.

After we find the CodePipeline service dashboard, we can select Create pipeline. On the next screen, we’ll name our pipeline, leave the other settings on default, and click Next.

STEP 4— SET UP A CODE SOURCE

On the next screen, we’ll choose our Source provider. I chose GitHub (Version 2). We’ll establish our connection to GitHub by selecting Connect to GitHub. We’ll add a Connection name and Connect to GitHub. You can then Install a new app or use one you’ve already created. If installing a new app you’ll need to sign in to your GitHub account. We can then add the Repository name and the Branch name. Leave the other settings as default and select Next. I had this all set up already so mine looked like this:

Now we will be moved on to the build stage.

STEP 5— CHOOSE BUILD SETTINGS

In the Add build stage page we’ll select a Build provider, AWS CodeBuild. And then we’ll add a new project by selecting Create project. We will add a name for our project and give it a description if we want to.

Then we’ll make the following selections:

• 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

We will leave the rest of the settings on default and select Continue to CodePipeline at the bottom of the page.

On the next screen simply choose Next and we’ll enter into the next step.

STEP 6— SET UP DEPLOY STAGE

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’ll also select the Extract file before deploy box and select Next.

We will then be able to review our pipeline. If we are satisfied, we can choose Create pipeline.

Now, if you see the success message you’ll know that your pipeline is working. It should look something like this:

After several minutes the Source, Build, and Deploy stage should all be green. That means our pipeline is working!

STEP 7— VERIFY IT WORKS

Let’s verify things are working as we would like them to by checking our static site to see if it’s working and making a change to our code to see if our pipeline is triggered by the change.

We’ll start by heading to our S3 service. We can click on the bucket that we created for this project and then the file, or object, inside that bucket. We are looking for that index.html object. You’ll notice there is a link for our Object URL in the overview. Copy and paste it into your browser.

It looks like I am able to access the webpage.

Now, let’s make a change to our repo in GitHub and see if the change triggers the pipeline. I’m going to add some text to the readme file.

Once our changes are made we’ll head back to AWS CodePipeline and select our pipeline. We can see that the pipeline was triggered and is relaunching, because of the change we made to the readme file in GitHub.

You can also click history on the left-hand side of the dashboard and get a listing of the changes you have made.

We did it, friends — we created a CI/CD Pipeline together! This pipeline will make it pretty simple if we need to make changes and push them out quickly. There is way more that you can do with these tools, but for today the goal was to simply get a pipeline put together and a static site launched, and we did just that!

Thanks for reading. I really appreciate it!

All the best,
D.