Deployment of static NextJS project on AWS using S3 bucket and Cloudfront

Deploying a Next.js static site on AWS offers numerous benefits, including scalability, cost-effectiveness, and global accessibility. This guide is designed for beginners with basic knowledge of AWS and web development skills. It will walk you through hosting your Next.js app on AWS S3, distributing it via CloudFront, and automating deployments with GitHub Actions.

Prerequisites:

NextJS project: Ensure your project is hosted on GitHub
An active AWS Account.

STEPS:

• Configure files of the NextJS app.
• Create an AWS S3 bucket.
• Configure bucket for static hosting.
• Make a CloudFront Distribution linked with the S3 bucket.
• Use Github Action for Deployment.

“It’s a beginner level article; designed for anyone with basic knowledge of AWS and web development skills”

CONFIGURE FILES OF THE NEXTJS APP

Update package.json: Ensure that your package.json file includes the build script. If not, add the line "build": "next build" to the scripts section. This command is crucial for building your Next.js project.

"scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

Configure next.config.ts: Modify your next.config.ts file to enable static export. This step generates the static files necessary for deployment on AWS S3. Add the following configuration to your file:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  output: "export",
  images: { unoptimized: true },
};

export default nextConfig;

This configuration helps in generating static files that can be uploaded to the S3 bucket.

CREATE AN AWS S3 BUCKET

In your AWS console, please search for S3 service. You can then easily create a bucket as shown below:

Choose a unique domain name for the S3 bucket.

Enable ACLs : During bucket creation, ensure that ACLs are enabled.

Public Access: Uncheck the option to Block all public access. This allows your website to be publicly accessible.

Use the default settings for other options and create the bucket.

CONFIGURE BUCKET FOR STATIC HOSTING.

Navigate to the bucket’s properties section and enable Static website hosting. This feature allows you to host your static website directly from the S3 bucket.

Note: Based on your static files, enter the html files present in your project.

After enabling the static website hosting, you will get a website endpoint for the bucket.

Upload the static files from your Next.js project’s out directory into the S3 bucket.

Ensure that you include the index.html and any error pages.

Create a bucket policy to allow public access to your website. Include your bucket name in the resource section of the policy.

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

Make a CloudFront distribution linked with the S3 bucket.

Go to the CloudFront dashboard and create a new distribution.

Choose your S3 bucket endpoint as the origin.

Keep most settings default, but consider enabling Origin Shield and setting the Viewer protocol policy as needed. You can also enable WAF for security and use custom SSL certificates for HTTPS support.

Once configured, create the distribution. CloudFront will distribute your website globally, improving accessibility and performance.

You can now use the CloudFront distribution, by visiting it through the domain name provided as shown below.

USE GITHUB ACTION FOR DEPLOYMENT

Set up a new workflow in your GitHub repository. This workflow will automatically build and deploy your Next.js project to S3 whenever you push changes.

Create a deploy.yml file in the .github/workflows directory. Be sure to make this directory and add the yml file in it with the code below:

name: Deploy to AWS S3

on:
  push:
    branches: [main]
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2
      
      - name: S3 Sync
        uses: jakejarvis/[email protected]
        with:
          args: --acl public-read --delete
        env:
          AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_KEY }}
          AWS_REGION: "us-east-1"
          SOURCE_DIR: "out"

      - name: Invalidate Cloudfront
        uses: chetan/[email protected]
        env:
          DISTRIBUTION: ${{ secrets.DISTRIBUTION }}
          PATHS: "/*"
          AWS_REGION: "us-east-1"
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_KEY }}

In your Github repository under Settings > Secrets and Variables > Actions
You must add your AWS_ACCESS_KEY, AWS_SECRET_KEY, AWS_S3_BUCKET AND DISTRIBUTION values.
Ensure that you specify the AWS regions corresponding to your bucket and distribution locations.

Once these variables are set, running npm run build and pushing your code to the main branch will trigger the GitHub Actions workflow. This workflow will automatically update your S3 bucket with the new files from the out directory.

“By following the outlined steps, you’ll successfully configure AWS to host your static Next.js website, leveraging GitHub Actions for automated deployment.“