将 Next.js 应用部署到 AWS Amplify

2024年6月27日：这篇博文使用的是Amplify Gen 1，如果您要开始使用新的Amplify应用程序，我建议您尝试使用Gen 2！

AWS Amplify刚刚宣布支持Next.js的服务器端渲染部署！以下是关于如何部署SSR和SSG Next.js应用程序的快速指南。

注意：如果您是 Next.js 新手，请查看此教程！

请注意，我是 AWS Amplify 团队的开发者布道师，如果您有任何反馈或疑问，请联系我或在我们的 Discord 服务器上提问 - discord.gg/amplify！

超级小队

对于静态生成的 Next.js 应用，首先需要编辑你的package.json文件。你需要将你的build代码更改为next build && next export，而不是仅仅next build。

"scripts": {
  "dev": "next dev",
+ "build": "next build && next export",
  "start": "next start"
},

社会主义共和国

package.json对于服务器端渲染的应用程序，您无需更改任何内容！只需保留由 . 生成的文件即可create-next-app。

混合型 SSG + SSR

如果你的应用同时包含 SSR 和 SSG 页面，也请保持默认设置package.json，与完全 SSR 应用相同！

对于两者

然后，在您选择的 Git 服务商处创建一个仓库，并将您的代码推送到该仓库。

1. 如果您还没有AWS账户，请创建一个。

2. 导航至Amplify 控制台

3. 点击橙色connect app按钮。

4. GitHub在菜单中选择From your existing code，然后单击“继续”。

1. 输入你刚刚创建的 GitHub 仓库名称（它应该会自动填充！），然后点击next

1. 构建设置将自动填充，因此您只需点击即可next。Configure build settings
2. 点击Save and deploy。

定价

在后台，Amplify 会创建用于部署应用程序的 AWS 资源——首先是Amazon S3 存储桶，用于存储应用程序的静态资源；然后是Amazon CloudFront，用于提供应用程序本身的服务；最后是Lambda@Edge 函数，用于提供 SSR 页面。本段中每个服务的链接都指向其定价信息。

多分支部署

要将多个分支部署到 AWS Amplify，您可以点击应用程序Amplify 控制台页面上的橙色“连接分支”按钮。因此，如果您想在功能正式上线到main分支之前测试其部署情况，只需点击几下即可完成！

拉取请求预览

您还可以启用自动拉取请求预览部署。这样，Amplify 就能将每个拉取请求的预览部署到项目中，您只需点击链接即可查看拉取请求对网站的影响！

首先点击previews左侧边栏。

然后，点击Enable previews。

添加自定义域名

Domain management您还可以通过访问以下链接将您的域名连接到您的网站add domain——您将看到不同域名提供商的说明，或者可以通过 Amazon Route53 购买一个域名。

结论

以上只是将应用部署到 AWS Amplify Hosting 时可以执行的部分操作！您还可以添加测试、监控、自定义标头、访问控制等功能。希望本指南对希望将 Next.js 应用部署到 Amplify 的用户有所帮助。