DEV Community

KenjiGoh
KenjiGoh

Posted on • Updated on

Deploy NextJs App to S3 Bucket with Github Actions

We are using vscode and github for this short tutorial. This tutorial will show how to set up a simple Github Actions for Nextjs App to deploy static files to S3 Bucket.

1. Bootstrap a Nextjs App

Feel free to omit @latest and instead use the version you require.



npx create-next-app@latest


Enter fullscreen mode Exit fullscreen mode

2. Update Next Config

We add the following to the next.config.js so that when we npm run build, it will create a out folder, which is the folder we will be copying to S3 bucket.



//next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = { output: "export" };
module.exports = nextConfig;


Enter fullscreen mode Exit fullscreen mode

3. Set Up S3 Bucket

Go to Bucket Permission Tab and do 3 things:

  1. Edit to Allow Public Access:

Image description

  1. Enable Static Website Hosting:

Image description

  1. Update the Bucket policy to allow public to GetObject only. ```json

{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Principal": "",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::your-bucket-name/
"
}
]
}

## 3. Set up Github Actions
This part is done on Github webpage itself. Search for the relevant template, we are using Nodejs for example.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wgki4d0ha2ghml1rdue3.png)

Take note of the underlined red details that are required to be edited by you.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i1930kpnyihydnlykdj3.png)

```yaml


# This workflow will do a clean installation of node dependencies, cache/restore them, build and upload /out folder to Amazon S3
name: your-project-name

on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: "18.x"
          cache: "npm"
      - name: Install dependencies
        run: npm ci
      - name: Build
        run: npm run build
      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v2
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ap-southeast-1
      - name: Copy files to S3 with the AWS CLI
        run: |
          aws s3 sync ./out s3://your-bucket-name/



Enter fullscreen mode Exit fullscreen mode

Remember to set up a S3 bucket in Amazon Cloud and also update the S3 bucket name accordingly.

4. Commit Changes

Click Commit to add the new deploy.yml.

Image description

Locally, git pull to retrieve this change.

Image description

5. Set Up AWS Secrets

In the yaml file, we referenced AWS access key and secret access key, so we need to configure it as well.

Configure Secrets at Github Actions

Add your AWS keys using the following secrets:



AWS_ACCESS_KEY_ID: XXXXXXXXXXXXXXXXX
AWS_SECRET_ACCESS_KEY: XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


Enter fullscreen mode Exit fullscreen mode

Image description

Cheers!

Top comments (0)