如何使用 nextjs 将静态网站部署到 AWS S3

Question

我还是 React 的新手，我开始使用 Nextjs 编写一个静态网站。但是当我想部署到 AWS S3 时，我遇到了一些问题。我以前只使用 webpack，当我输入时，yarn build我得到一个 dist 文件，我很容易将 dist 文件中的内容上传到 S3 存储桶。

使用Nextjs对SSR我发现后，我建立了项目，我得到一个后不过.next文件与cache，server和static子文件，以及BUILD_ID，build-manifest.json，react-loadable-manifest.json，records.json。我不知道我应该上传什么到 S3 以及这些文件是什么意思。

这可能是一个愚蠢的问题，但我已经花了一天多的时间试图找到解决方案。

Answer 1

您可以按如下方式更改 package.json。

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

然后，您可以运行“yarn build”。它将在您的项目中生成顶级目录 /out。为了方便，使用命令上传文件夹中的所有内容。

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

确保您已将存储桶设置为提供静态网站并具有以下存储桶策略。

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