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

Question

我对React还比较新，使用Next.js写了一个静态网站，但在部署到AWS S3时遇到了一些问题。我之前只用webpack，当我运行yarn build后会得到一个dist文件，然后很容易将dist文件中的内容上传到S3存储桶。

然而，在使用Next.js进行SSR后，我发现在构建项目后我得到了一个包含cache、server和static子文件夹以及BUILD_ID、build-manifest.json、react-loadable-manifest.json和records.json的.next文件。我不知道应该上传哪些文件以及这些文件的含义。

这可能是一个愚蠢的问题，但我已经花了一天以上的时间尝试寻找解决办法。

- jonny

---

构建之后，您还需要使用 next export。https://nextjs.org/docs#static-html-export - HMilbradt

在我的 package.json 文件中，"scripts" 字段如下："scripts": { "dev": "node index.js", "build": "next build", "start": "NODE_ENV=production node index.js" }当我执行 yarn export 或 next export 命令时，会出现错误。 - Ken

S3是一种文件托管服务。您无法使用SSR与其配合，而需要静态生成（请参见链接），或在服务器上进行托管（例如EC2）。 - HMilbradt

我在我的旧项目中添加了Next.js框架，该项目已经部署在S3上，因此我想要替换我的S3存储桶中的旧dist内容。我在package.json中添加了"export": "npm run build && next export"，并输入yarn export，但没有任何HTML文件。 - Ken

当我运行脚本 yarn export 时，它会给我返回错误信息：''Error: Cannot export when target is not server. https://err.sh/zeit/next.js/next-export-serverless''。 - Ken

Answer 1

如果您使用搜索到达此处并收到“错误：目标不是服务器” - 请确保从next.config.js中删除target：'serverless'。原始问题非常古老。否则，请遵循@R.Cha的上面的答案https://dev59.com/HLfna4cB1Zd3GeqPkwKo#62465471，该答案总结了这里的文档并添加了S3特定步骤 - https://nextjs.org/docs/advanced-features/static-html-export。

- Ramakay

Answer 2

您可以按照以下方式更改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/*"
        },
    ]
}

- dubucha

---

你不必打开整个存储桶。只需在 AWS 工具中添加“--acl public-read”即可使单个项目公开。 - David