How To Create A CICD Pipeline In 4 Simple Steps With AWS CodePipeline

The fastest way to create a pipeline in AWS to automate deployments of your code.

Article cover image

CICD is a key component in developing any modern application.

A CICD pipeline automates the repetitive tasks of integrating, testing and deploying code.

To make this process even easier, AWS offers a service called CodePipeline, a fully managed CICD service that makes it easy to deploy code and integrate other AWS code services.

Let’s take a look at how to create a simple CICD pipeline for a React app.

We’ll deploy the application to an S3 bucket as a quick hosting solution.

Let’s break it down into 4 simple steps.

1. Create An S3 Bucket For Hosting Our App

In your AWS account, navigate to S3.

Start by creating a new bucket.

Creating a new S3 bucket

Choose the region closest to you and disable the Block all public access.

Click on Create bucket.

Now we’ll configure the bucket for static website hosting.

Go to the Properties tab.

S3 bucket properties tab

And scroll to the bottom to the Static website hosting section.

Static website hosting

Click on the Edit button.

Here you can enable static website hosting.

Add index.html for the index document and click on Save changes below.

Once you save, you will be able to see the bucket URL endpoint (back in the same static website hosting section. Copy or save that for later.

2. Setup a AWS CodeCommit repo

AWS CodePipeline needs a source repository for your code.

In this example, we’ll use AWS CodeCommit.

In the AWS console, navigate to the CodeCommit service.

Click on the Create repository button.

With this repository created, you can now push code to it.

Let’s push our basic react app code.

In your code editor’s terminal, run the following command:

git clone <your-codecommit-repo-url>

Next cd into the directory and add some code and run the following commands:

cd "your repo directory"
//add your code into the react app
git add .
git commit -m "my react app"
git push

When you refresh your CodeCommit repository, you’ll see the code pushed to it.

3. Create A Build Project with AWS CodeBuild

Next, navigate to AWS CodeBuild and create a new project.

Here you can enter a project name.

Under Source Provider choose CodeCommit and choose your repository created earlier.

In the Environments section, leave the defaults as they are.

In the Buildspec section, you can either manually add your buildspec commands or add them as a file in your project’s code.

We’ll add them in our project’s root folder as a buildspec.yml file:

version: 0.2

phases:
  install:
    commands:
      - npm install
  build:
    commands:
      - npm run buildartifacts:
  files:
    - '**/*'
  base-directory: build

This file will tell CodeBuild to run the following commands when it is building our app.

It will first run npm install to install dependencies.

It will then run npm run build.

Finally, it tells CodeBuild to output all artifact files in the build folder.

We can now commit and push this file to our repo by running the commands we used earlier.

Create the build project when that is completed.

4. Creating A Pipeline

The last step now is to build our pipeline.

Head over to the CodePipeline service in AWS.

Click on Create pipeline.

Here you can enter a name for your pipeline.

In the Source state, select CodeCommit as the source provider.

In the build stage, select Other build providers, and choose AWS CodeBuild.

Choose the build project we created earlier.

In the Deploy stage, select Amazon S3 as the deploy provider.

Select the S3 bucket we created earlier. (choose to extract the files to the root of the bucket).

You can now review and confirm the pipeline.

As soon as you click on Create pipeline, the pipeline execution will start the first deployment.

It will pull the source code from your CodeCommit repository, build the react app and deploy the app to your specified S3 bucket.

Testing Our Deployment

To test the deployment, we can head over to CodePipeline and monitor the deployment process.

All stages should be green with an “ok” status message at each step.

When the last step is successful, you can now find your S3 static website hosting URL endpoint and enter it in your browser.

If everything worked well, you should see your react app displayed there.

Conclusion

AWS CodePipeline makes it easy to automate the process of building and deploying applications.

Setting up a CI/CD pipeline for a simple React app and deploying it to an S3 bucket is quick and easy.

With just a few steps, we are able to add code to our app and deploy changes continuously, greatly speeding up our development workflow.

---

👋 My name is Uriel Bitton and I’m committed to helping you master Serverless, Cloud Computing, and AWS.

🚀 If you want to learn how to build serverless, scalable, and resilient applications, you can also follow me on Linkedin for valuable daily posts.

Thanks for reading and see you in the next one!