A simple CI/CD pipeline with AWS CodePipeline

6 min readJul 9, 2020

Currently I’m working on a project which uses AWS CodePipeline for CI/CD. So this is something new I just learned from my internship at 99X Technology. In this article, I’m going to show you how to create an AWS CodePipeline to deploy a web application.

First of all, what the hell is CI/CD? Following definition is from infoworld.com

Continuous integration (CI) and continuous delivery (CD) embody a culture, set of operating principles, and collection of practices that enable application development teams to deliver code changes more frequently and reliably. The implementation is also known as the CI/CD pipeline.

CI/CD is one of the best practices for DevOps teams. Also, it is an Agile Methodology best practice, as it allows development teams to focus more on meeting requirements, code quality and security because deployment process is automated.

As above mention implementation of CI/CD is, CI/CD pipeline. So, let’s create a CI/CD pipeline with AWS CodePipeline. I’m going to use a simple To-do app developed using React JS because I love React JS 😍 (Fun fact: One of the reasons why I love React JS so much is, because it is really satisfying when I say the word React). Here’s the GIT repo. Let’s jump into it.

Step 1 : Create buildspec.yml file

Before everything we have to create a YAML file in project’s root directory. Name it as buildspec.yml.

We have to write all the commands necessary to build our app and deploy it, in this file. This is the YAML code for my simple React application.

In phases section there are three parts. In install part I have added commands to install NodeJS and Yarn which necessary to develop a React application (echo commands are just print commands).
Then in pre_build part, install the dependencies by npm install command. Remember we installed Node previously. So, we can run npm commands in our environment.
In build part, It will run the command npm run build to compile and build my React application. If you are a React developer you must know it will create a folder call “build” in root. We can host this build. (Similar to “dist” folder in Angular).
Finally there’s artifacts section. It defines the path to our “build” folder.

Simply artifacts are the things, what we pass from one stage to the next stage in CodePipeline. So here we are going to pass our build to Deployment stage which we are going to create later.

Step 2 : Push your code to GitHub

Now you should push your project to the GitHub. I’m not going to talk about GIT and how to create a repository here. Because this is about AWS CodePipeline. Yeah that’s right, I should bold it 😂

Step 3 : Create a S3 Bucket

We have to create an AWS S3 Bucket. Simply S3 Bucket is a storage. We are going to put our React JS build here, so we can host it. Go to S3 in AWS console and click on Create bucket.

Choose a Bucket name and a region. Make sure to uncheck “Block public access” and check the warning “I acknowledge ….” as shown above image. Now click Create bucket.
After that, go to the properties tab of the Bucket. Click on Static web hosting box then select Use this bucket to host a website option (On top of this box you can see the URL Endpoint for our application) and save.

Now go to the Permissions tab, then click on Bucket Policy. Here you have to paste bellow code snippet and save. This will make your S3 Bucket public. It’s okay, unless we cant host it here.

{
    "Version": "2012-10-17",
    "Id": "Policy1555582784303",
    "Statement": [
        {
            "Sid": "Stmt1555582783256",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::YOUR_S3_BUCKET_NAME/*"
        }
    ]
}

That’s it. Your storage is now all set.

Step 4 : Create AWS CodePipeline

Now go to the CodePipeline in AWS console and click on Create pipeline.

Choose a Pipeline name.
Keep the select New service role. It will create an IAM role to access the pipeline. In AWS we can assign IAM roles with necessary permissions for different service. Also, remember the Role name you put here.
Don’t mess with Advanced settings for now. Just click Next.

Step 5 : Create source provider

Now you’ll get a screen similar to following image. Here we have to create a source provider. Simply defines from where our source code is coming.

Select GitHub as Source provider, because we are going to get our source code from GitHub repository.
Then click on Connect to GitHub and insert your GitHub credentials to authorize.
Now select your repository and the branch. You have to wait a few seconds to load your repositories, then you can select.
Select GitHub webhooks as Change detection option. This will refresh our pipeline whenever we push changes to the repository. So our web application updates as soon as we make a change.

Step 6 : Create CodeBuild

In here, select AWS CodeBuild as the build provider and select your region. Then click on Create project. This will open another browser window to create our project.
In the new window give a Project name. Description and tags are not necessary.
In Environment section, select each option as below image. Here we are creating the environment to build our application.

Also, select New service role like before. It will create another IAM role for CodeBuild. Better to remember the role’s name here as well. And no additional configurations.
Select Use a buildspec file option in Buildspec section. If you remember we created the buildspec.yml file previously in project root directory. So we don’t have to give the buildspec name. If we create a file with different name or in a sub directory, we have to give the name with the path.
And keep select CloudWatch logs and click on Continue to CodePipeline. Then the new window will close.
Now we are in our previous window again. Here click on Next.

Step 7 : Create deployment stage

So this is the final stage. Here select Amazon S3 as Deploy provider and select your region.
Select the Bucket we previously created in 3rd step. Make sure to check Extract file before deploy. The reason is when the Build stage pass our React build to the Deployment stage as an artifact, it comes as a zip file.

No any additional configuration. Just click on Next.

Step 8 : Review

This is not actually a step. Just shows us all the settings we selected previously in each stage. Make sure everything is okay and click on Create pipeline.

Now you can see your pipeline and it starts automatically when we create. Another thing, when the the Build stage is started, click on Details to see the terminal. You can see it runs the commands we wrote in buildspec.yml file. It’s so satisfying to see everything is succeeded without any error 😜

After all the stages succeeded, visit the Endpoint URL we saw in Step 3. Your web application should live now.

There may have little difference in pipeline settings according to your application. Also, If you get any authorization error, try to add necessary permissions to the two roles created during the process. Ah ha, that’s why I told you to remember the role names 😉

Hmmm. That’s it for today. I hope you got something from my article. Feel free to response 🙂

Happy Coding Folks 👽