Deploy NextJs App to S3 Bucket with Github Actions
Tags: githubactions, s3, nextjs, tutorial
Published: 2023-05-27 06:12:54

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
```
## 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.

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

## 3. Set Up S3 Bucket

Go to Bucket Permission Tab and do 3 things:

1. Edit to Allow Public Access:

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

2. Enable Static Website Hosting:

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


3. 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/

```
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pyflcgh2jpu2dfv9kyku.png)

Locally, git pull to retrieve this change.

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

## 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
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c3gkxvyndubnw3k8mb04.png)

Cheers!