How to deploy a static website to AWS S3 using nextjs

user_12245323 0
Viewed 6828

I am still new to React and I started writing a static website using Nextjs. But when I want to deploy to AWS S3 I have some problems. I used to use webpack only and when I type yarn build I get a dist file and it is easy for me to just upload the content inside the dist file to the S3 bucket.

However after using Nextjs for SSR I found that after I build the project I get a .next file with cache, server, and static subfiles as well as BUILD_ID, build-manifest.json, react-loadable-manifest.json,records.json. I have no clue what I should upload to S3 and what those files mean.

It may be a silly question but I have already spent more than a day trying to find the solution.

next.js reactjs amazon-web-services javascript
2 Answers

You can change package.json as follows.

"build": "next build && next export",

Then, you can run "yarn build". It will generate top-level directory /out in your project. Upload all contents in the folder by using the command for convenience.

aws s3 sync ./out s3://your-s3-bucket-name

Make sure you have set your bucket to serve static website and have the following bucket policy.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::your-bucket-name/*"
        },
    ]
}
user_27548280
user_137499570
Related