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.
//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:
- Edit to Allow Public Access:
- Enable Static Website Hosting:
- 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.
Take note of the underlined red details that are required to be edited by you.
```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.
Locally, git pull to retrieve this change.
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
Cheers!
Top comments (0)