DEV Community

Adeparusi Tomi
Adeparusi Tomi

Posted on • Edited on

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

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)

Image description

  • 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

Image description

Step 3
Configure Permissions to allow incoming traffic/website access

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

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.

Image description

  • 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.

Image description
Image description

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

Image description

Step 6

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

Image description

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

Image description
Image description

Top comments (0)