将Next.js应用程序部署到AWS Amplify上

xcvxvxc
883 阅读3分钟

AWS Amplify刚刚宣布了对Next.js的服务器端渲染部署支持!这里有一个关于如何部署SSR和SSGNext.js应用程序的快速指南。

注意：如果你是Next.js的新手，请看这个教程!

SSG

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

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

SSR

对于服务器端渲染的应用程序，你不需要改变你的package.json 中的任何内容!只要保留由create-next-app 生成的那个文件就可以了。

混合SSG+SSR

如果你有一个同时具有SSR和SSG页面的应用程序，也要保留默认的package.json ，与完全SSR的应用程序相同

对于这两者

然后，在你选择的git提供商上创建一个仓库，并将你的代码推送给它。

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

  2. 导航到Amplify控制台

  3. 点击橙色的connect app 按钮。

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

Amplify interface with different remotes

  1. 键入你刚刚创建的GitHub repo的名称（它应该是自动填充的！），然后点击next

Amplify interface with name of repo

  1. 构建设置将自动填充，因此你可以直接点击next 上的Configure build settings
  2. 点击Save and deploy 。

定价

在幕后，Amplify创建了用于部署你的应用程序的AWS资源--首先是一个Amazon S3桶来存储你的应用程序的静态资产，然后是一个Amazon CloudFront来服务你的应用程序本身，最后是一个Lambda@Edge函数来SSR页面。本段中每个服务的链接都指向有关其定价的信息。

多分支的部署

为了将多个分支部署到AWS Amplify，你可以在Amplify控制台页面上点击橙色的 "连接分支 "按钮，为你的应用程序进行部署。因此，如果你想在功能上线前测试其部署到main 分支，你可以通过点击来实现

The connect branch button on the AWS Amplify Console

拉动请求预览

你也可以启用自动拉动请求预览部署。这将使Amplify在项目中部署每个拉动请求的预览，这样你就可以点击一个链接并看到拉动请求对网站的影响

首先点击左侧栏上的previews 。

Enable previews in the AWS Amplify Console

然后，点击Enable previews 。

Enable pull request previews in aws amplify

添加一个自定义域名

你也可以通过访问Domain management ，然后访问add domain ，将你的域名连接到你的网站上 -- 你会看到不同域名供应商的说明，或者能够通过亚马逊Route53购买一个。

总结

这些只是你在AWS Amplify主机上部署应用程序时可以做的一些事情还有一些方法可以添加测试、监控、自定义头文件、访问控制等。我希望这个指南对那些希望将Next.js应用部署到Amplify的人有帮助。

avatar
文章
阅读
粉丝