Building a CI/CD Pipeline to Deploy Next.js to AWS S3 Bucket

Adeparusi Tomi — Thu, 22 Aug 2024 11:35:02 +0000

Introduction.

This tutorial details how to build a CI/CD pipeline that deploys a Next.js app from GitHub to S3 Bucket on AWS.

How does this work?

We have an application deployed on Github, and once there is any change made to this application, this change automatically triggers the CI/CD pipeline to build and deploy this application on the S3 Bucket.

What do you need?

An AWS account
CodePipeline
S3 Bucket
A GitHub account
Next.Js/React application

Step 1 :Create an S3 bucket on AWS

Go to the AWS S3 console.
Click on "Create new bucket" and give it a unique name
Allow public access to the bucket (you might not need this if you don't intend on making your application available on the internet)

Create Bucket

Step 2 Configure the bucket for static website hosting

After bucket has been successfully created, click on view details and visit the properties tab
Enable static website hosting

Step 3
Configure Permissions to allow incoming traffic/website access

click on view details and visit the permissions tab
Edit "bucket policy"

Bucket Policy :https://gist.github.com/TomiParucci/c76fc43ca715406cbfe5ee1373359103

Make sure to edit the default bucket ARN in policy to that of your previously created bucket. (as circled above)

Your Bucket is now fully set up.

Step 4
Setup the pipeline
Go to the AWS S3 console.

Click on "Codepipeline" and "create new CodePipeline"
Give it a unique name and ensure you are creating this in the same availability zone as the S3 bucket created earlier.

leave other settings at default and click on "next"
move to the add source stage and connect to the code source (here mine is github),if you do not have an existing connection to your code source , you have to create a connection.

Step 5

Move to the build stage and input all necessary configurations
Ensure this is in same region as Bucket
click on new project or attach existing project if any

Step 6

Move to the deploy stage
state deploy provider, region and bucket(created earlier)ensure this is in same region as Bucket

The pipeline has been created successfully and has started running, it will pull the application from source and go ahead to deploy it

DEV Community: Adeparusi Tomi

Building a CI/CD Pipeline to Deploy Next.js to AWS S3 Bucket

Introduction.

How does this work?