https://github.com/zdenham/next-static-aws-example

https://github.com/zdenham/next-static-aws-example

Last synced: 30 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/zdenham/next-static-aws-example
• Owner: zdenham
• Created: 2024-05-29T04:24:57.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-06-07T04:51:59.000Z (5 months ago)
• Last Synced: 2024-10-07T18:05:46.270Z (about 1 month ago)
• Language: TypeScript
• Size: 91.8 KB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
This is a static [next.js](https://nextjs.org/) site built using [next-static-utils](https://github.com/zdenham/next-static-utils).

See the live demo [here](https://defn0rdp54dhd.cloudfront.net)!

It demonstrates hosting a static site **with** dynamic routes and the app router.

## Deployment Instructions for AWS S3 + Cloudfront

1. clone repo

2. `pnpm install`

3. Generate fallback routes: `pnpm next-static-utils generate cloudfront`

4. Build the application: `pnpm build`

5. Set up your local aws credentials

6. Create an S3 bucket `your-bucket`

7. Upload the static site `cd out && aws s3 sync . s3://your-bucket`

8. Ensure the bucket is public and has public read policy, instructions [here](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html#:~:text=To%20make%20the%20objects%20in,read%20access%20to%20your%20bucket)

9. Create a cloudfront distribution and connect it to the s3 bucket as the origin

10. Ensure your cloudfront distribution has a root object (index.html).

11. Create a cloudfront function and paste the generated `cloudfrontFunc.js` from the repo root

12. Associate the cloudfront function with your distribution's origin behavior (under viewer request)

**TODO:** We will likely make a script to automate the above, via terraform or the AWS SDK 👀

If you run into problems, open an issue!