边缘的海外无VPS服务器Next.js

 VPS服务器     |      2019-09-28 10:10:13

  今天,我很高兴地宣布我在过去几个月中一直在努力的项目。它提供了一种简单,快速,高效的方式,可以使用CloudFront,Lambda @ Edge和S3将Next.js应用程序部署到AWS。

  该项目是海外无VPS服务器Next.js组件,您可以将其与海外无VPS服务器框架一起使用,以将Next.js应用程序部署到全球每个CloudFront边缘位置的AWS Lambda @ Edge功能。这些Lambda @ Edge函数可在服务器端呈现网站页面,并且尽可能接近最终用户,从而提供非常低的延迟。

  原则

  该项目的开发考虑了一些设计原则。

  1.默认为零配置

  没错,您无需任何配置即可在一分钟内启动并运行。

  2.与接下来的9个功能相同

  支持接下来的9个功能:

  服务器端呈现的页面。毫不奇怪,这就是吸引大多数人接下来使用的原因。serverless-next.js将您的页面部署到Lambda @ Edge。服务器端渲染发生在边缘,靠近用户。

  API路由。与页面一样,您的api后端也已部署到Lambda @ Edge。在获取数据客户端时,这确保了非常低的响应延迟。

  动态页面/路线段。接下来,最近在其内置路由系统中引入了对参数化路由的支持。serveless-next.js实现了与动态路由兼容的轻量级路由器。

  自动预渲染。您的某些页面可能不是SSR。在构建时,这些类型的页面将在HTML旁边编译。serverless-next.js利用此优势并将其部署到S3。然后,CloudFront中的Lambda @ Edge负责将请求转发到静态页面(例如/ terms,/ about,/ contact等)到S3。这些可以被大量缓存。

  客户资产。接下来生成的构建文件(例如webpack块,css文件等)上载到S3。在这种情况下,Lambda @ Edge不需要调用,因为S3的CloudFront会处理对_next / *的任何请求。

  用户静态/公用文件夹。用户资产(如静态文件夹中的图像或公用文件夹中的根级别资源)将被上载到S3。与构建资产一样,CloudFront从S3提供这些资产。

  3.快速部署

  在海外无VPS服务器Next.js组件快。部署应用程序通常需要不到一分钟的时间。next build在幕后使用,那里没有魔法。为您提供了CloudFront分发,并提供了最佳实践。将编译的页面压缩并部署到Lambda @ Edge,然后将其与您的发行版关联。还为通过S3加速传输上传的静态资产部署了S3存储桶。

  唯一的警告是,您必须等待几分钟才能使CloudFront分发可用的第一个部署。但是,后续部署不会出现此问题。分发完成后,即可快速部署更新。

  CloudFormation 不用于供应资源。这就是为什么部署速度快的部分原因。这也意味着该项目不受CloudFormation限制的约束,这是该项目的前身serverless-nextjs-plugin上的一个问题。

  海外无VPS服务器nextjs图形AWS Lambda Edge
 

 

  建筑

  让我们更详细地了解部署到AWS的架构。

 

  海外无VPS服务器nextjs AWS Lambda边缘架构

  在CloudFront中创建了三个缓存行为。

  第一个2. _next/*并将static/*请求转发到S3。

  第三。与lambda函数相关联,该函数负责处理三种类型的请求。

  服务器端渲染页面。任何定义getInitialProps方法的页面都将在此级别呈现,并且响应将立即返回给用户。

  静态优化页面。对HTML旁边预编译的页面的请求将转发到存储HTML的S3。

  公共资源。这些是根级别的资源,如请求/robots.txt,/favicon.ico,/manifest.json等。这些也被转发到S3,其中这些资源可以找到。

  2.和3.必须先通过Lambda @ Edge的原因是因为这些路线不符合_next/*或这类模式static/*。此外,每条路由一个缓存行为也不是一个好主意,因为CloudFront 仅允许每个分发25个。

  入门

  使用海外无VPS服务器Next.js组件很容易,只需将其添加到您的serverless.yml这样:

  # serverless.yml

  myApp:

  component: serverless-next.js

  Sane的默认设置已经就绪,因此不需要其他配置。

  使用海外无VPS服务器框架通过以下serverless命令进行部署:

  $ npx serverless

  使用以下remove命令将其删除:

  $ npx serverless remove

  自定义域

  您可以为应用程序设置自定义域。serverless-next.js负责将域与您的CloudFront分配相关联,在Route53中创建子域,甚至使用AWS ACM设置SSL证书。它是可选的,如下所示:

  # serverless.yml

  myApp:

  component: serverless-next.js

  inputs:

  domain: [“www”, “example.com”] # [ sub-domain, domain ]

  幕后花絮

  该项目由惊人的海外无VPS服务器组件提供支持。它的核心使用4个组件:

  @海外无VPS服务器/ AWS-S3

  @海外无VPS服务器/ AWS-CloudFront的

  @海外无VPS服务器/ AWS-拉姆达

  @海外无VPS服务器/域

  大部分繁重的工作都是由组件本身完成的,serverless-next.js只是精心编排。

  下一步是什么?

  建立时间效率,为用户配置的缓存选项,并可能/api为API路由添加单独的缓存行为。我还将研究与其他AWS服务集成的更完整的示例。