DEV Community

Cover image for AWS Code Pipeline - CloudFront - S3 CI/CD Pipeline
Monica Escobar
Monica Escobar

Posted on

AWS Code Pipeline - CloudFront - S3 CI/CD Pipeline

Steps to create an automated pipeline in AWS without losing the plot


Resources used:

  • S3 bucket
  • CloudFront Distribution
  • GitHub
  • Route 53
  • Domain name
  • SSL Certificate
  • Code Pipeline

The Big Picture

Image description


Steps followed:

Step 1: Setting Up Your AWS Environment

1.1 Create an AWS Account

If you don’t already have an AWS account, sign up for AWS.

1.2 Set Up IAM User

Create an IAM user with the necessary permissions to access the services you'll be using:

Navigate to the IAM Console.
Create a new user and attach the policies for CodePipeline, S3, CloudFront, Route 53, and Certificate Manager.

Step 2: Purchase a Domain and obtain an SSL Certificate

2.1 Purchase a Domain via Route 53

Go to the Route 53 Console.
Click on Domains -> Register Domain.
Search for your desired domain name and follow the prompts to purchase it.

2.2 Request an SSL Certificate via AWS Certificate Manager

Navigate to the AWS Certificate Manager (ACM) Console.
Click on Request a certificate.
Select Request a public certificate and enter your domain name.
Follow the steps to validate your domain ownership (via DNS is much faster than via email, remember to create a CNAME record for verification purposes).

Step 3: Set Up S3 Bucket for Static Hosting

Go to the S3 Console.
Create a new bucket (e.g: my-portfolio).
Enable static website hosting in the Properties tab (optional tip: add max-age=0 to the header for faster updates).
Set up the bucket policy to allow public read access (or configure CloudFront for secure access).

Step 4: Configure CloudFront for CDN

Navigate to the CloudFront Console.
Create a new distribution.
Set the origin to the S3 bucket you created.
Configure the distribution settings, ensuring to set up the SSL certificate you requested.

Step 5: Configure Route 53 to Point to CloudFront

In the Route 53 Console, navigate to Hosted Zones.
Select your domain and create a new A record.
Set the alias target to your CloudFront distribution.

Step 6: Set Up GitHub Repository

Create a new repository on GitHub and push your application code to it.

Step 7: Create the CI/CD Pipeline with AWS CodePipeline

7.1 Set Up CodePipeline

Go to the CodePipeline Console.
Click Create pipeline and give it a name.
Select New service role to create a new IAM role for CodePipeline.

7.2 Add Source Stage

In the Source stage, select GitHub2 as the source provider.
Connect your GitHub account and select the repository and branch you want to use.

7.3 Add Build Stage (OPTIONAL)

In the Build stage, leave empty or choose CodeBuild (I personally left it empty).

7.4 Add Deploy Stage

In the Deploy stage, choose Amazon S3 as the deploy provider.
Select the S3 bucket you created for static hosting.

Step 8: Test the Pipeline

Review the pipeline configuration and click Create pipeline.
Commit a change to your GitHub repository to trigger the pipeline.
Verify the build and deployment process.
Access your application using the domain name configured in Route 53 or if the cache is at its default setting it will take longer to show in your domain, but you can check the S3 URL.


And this is all you need to create your own automated pipeline from your main branch using AWS and GitHub.

Happy deploying!

Top comments (0)