如何将静态 Next.js 部署到 AWS S3

Next.js是一款基于 React 的优秀开源框架，它能帮你管理整个应用程序！它兼具前端和后端功能，非常适合 JavaScript 开发者，而且性能出色。如果你读到这篇文章，你肯定已经了解它了，如果还不了解，请跳转，点击链接查看文档。

目录

本教程需要 Node.js。

• 创建Next.js应用
• 设置AWS S3 接口静态网站
• 将Next.js应用程序发布到S3 存储桶

创建 Next.js 应用

按照Next.js的建议，我们将使用它create-next-app来创建项目。
初始化项目有两种方法：

npx create-next-app
# or
yarn create next-app

然后按照说明操作，最后进入我们的项目并启动它

cd my-project && yarn dev

服务器在端口上启动3000，因此我们转到http://localhost:3000

恭喜🎉！现在让我们将这个静态Next.js应用程序部署到AWS S3 存储桶

设置AWS S3 接口静态网站

为了继续本教程，我们将转到 aws 控制台，对于本节，我假设您已经拥有一个可以访问管理控制台的 AWS 帐户。

1. 访问您的管理控制台
2. 在“查找服务”上，搜索“S3”

1. 点击创建存储桶

1. 输入您的 Bucket 名称（例如：my-awesome-nextjs-app），它必须是唯一的

1. 启用访问公共并通过取消选中阻止所有公共访问进行验证，并检查收据确认，您可以创建存储桶

1. 在列表中，选择您的存储桶

1. 转到属性>静态网站托管，选择启用静态网站托管和在索引文档和错误文档上作为静态网站托管，您可以添加，保存更改index.html

1. 现在转到权限>存储桶策略编辑并添加此项，将资源更改为您的存储桶名称

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

现在，您可以导出Next.js应用程序并将其添加到您的存储桶中了🎉

将 Next.js 应用程序发布到 S3 存储桶

为了完成本教程，我们将使用导出我们的Next.js应用程序package.json，并将导出的应用程序导入我们的S3 存储桶。

首先，我们必须修改文件package.json来更改构建脚本：

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

此构建脚本构建应用程序并生成运行应用程序所需的所有静态文件（到文件夹out ）。

转到您的S3 Bucket并上传out文件夹的内容

点击上传，加载完成后即可退出

要访问我们的应用程序，请转到“属性” > “静态网站托管”，其中显示存储桶链接

让我们转到这个链接：

🎉恭喜🎉 我们已将静态Next.js应用程序上传到aws S3 存储桶

您所要做的就是编写静态应用程序，将其导出并添加到您的存储桶中

结论

如您所见，在 aws 上托管静态Next.js应用程序非常容易，在下一篇文章中，我想我们将看到如何使用 github 操作在我们的Next.js应用程序上使用持续集成，因此在主分支上每次合并您的应用程序都会在您的存储桶上更新。

感谢您关注这篇文章，请随时给我您的反馈，如果您喜欢它，请分享并在Twitter上关注我