javascript - 如何使用 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/*"
        },
    ]
}