零配置Next.js 10/11 aws lambda@edge的无服务器组件,旨在实现完整功能奇偶校验。
请查看功能以获取当前支持的功能列表。
配x 此读数反映了master分支上的最新更改。它可能尚未发布到NPM的latest(稳定)或alpha版本。请转到版本,找到您正在使用的正确的@sls-next/serverless-component版本,并为该版本打开dealme以获取更准确的信息。如果此读数中列出了功能但不起作用,请首先尝试升级到NPM中最新的alpha版本。
当前,这是在GA之前启动的,因为该项目是在GA之前启动的。我们目前正在重新设计部署将来如何工作,并探索更好的IAC解决方案,例如CDK,CDK for Terraform等,并将在年底之前发布任何更新。
自Next.js 8.0以来,引入了无服务器模式,该模式提供了一种新的低级API,该项目可以将其用于部署到不同的云提供商中。但是,Next.js没有提供完整的无服务器路由逻辑,因此为什么需要此项目来填补空白。长期的愿景是让您从AWS开始,以各种云为单位。
该项目是无服务器插件的更好版本,该项目的重点是解决下一个9个支持,更好的开发体验,200个云形式资源限制和性能等核心问题。
几乎不需要或根本不需要配置。您可以根据应用程序需求扩展默认值。
该组件的用户应该能够使用next.js开发工具,又称next dev 。部署应用程序是组件的工作,确保与我们所知道和喜欢的所有隔壁功能相等。我们尝试从Next.js模拟所有或大多数路由和服务器端逻辑,并为无服务器环境优化它。在下面,您可以找到当前支持的功能的列表。
通过简化的体系结构,不使用云形式,您的应用程序中可以拥有多少页没有限制,而且部署时间非常快!当然还有云层繁殖时间。
由于我们模仿了下一个。JS路由逻辑,不幸的是,我们并不总是完全奇怪。以下显示了所有支持的功能或计划的功能。如果复选框被打勾,则意味着支持该功能。否则,它可能不受支持,或者目前正在计划或实施阶段。有关特定详细信息,请参考项目的描述。
请注意,某些功能可能仅在最新的Alpha版本上。如果将功能列为支持但不使用latest标签,则很可能在alpha标签中。如果可以的话,请帮助我们测试最新的Alpha更改,并在发现任何问题时提交错误报告。谢谢你!
您想要但尚未支持的功能吗?请打开一个新问题,让我们知道!
/_next/*从CloudFront提供。 getStaticProps选择加入静态生成(SSG)。 getServerSideProps选择进入服务器端渲染(SSR)。 getStaticPaths Paths从动态来源生成一组路由。 _next/static/*和static/*之外,每个路线都应重定向,因为这些缓存行为没有附上Lambda处理程序。请注意,新的has匹配格式(https://nextjs.org/docs/api-reference/next.config.js/redirects#header-cookie-and-query-matching)尚不支持。 _next/static/*和static/*之外,每个路线都应该能够重写,因为这些缓存行为没有附在其上的Lambda处理程序。请注意,新的has匹配格式(https://nextjs.org/docs/api-reference/next.config.js/redirects#header-cookie-and-query-matching)尚不支持。 _next/static/*和static/* ,因为这些缓存行为没有lambda处理程序。请注意,新的has匹配格式(https://nextjs.org/docs/api-reference/next.config.js/redirects#header-cookie-and-query-matching)尚不支持。 next-i18next软件包,我们还会自动检测并复制默认配置文件。 首先,确保您在部署计算机上安装了Node.js 12+,因为所有代码现在已转移到ES2019。将您的下一个应用程序添加到serverless.yml:
# serverless.yml
myNextApplication :
component : " @sls-next/serverless-component@{version_here} " # it is recommended you pin the latest stable version of serverless-next.js如果您在serverless.yml文件中指定@sls-next/serverless-component ,请勿将@sls-next/serverless-component serverless.yml到软件包。如果您不指定版本,它将使用latest标签,该标签指的是此处最新的稳定版本(即不是Alpha版本)。
您还可以将其指向本地安装,例如,如果要使用package.json版本。
在这种情况下,配置以下内容:
# serverless.yml
myNextApplication :
component : " ./node_modules/@sls-next/serverless-component "然后将AWS凭据设置为环境变量:
AWS_ACCESS_KEY_ID=accesskey
AWS_SECRET_ACCESS_KEY=sshhh只是部署:
$ serverless如果您由于新的无服务器版本而遇到部署的问题,请尝试将特定版本固定到EG 2.72.2。请参阅#2320(评论)
[ALPHA - may be buggy] You may also deploy using npx @sls-next/serverless-patched (or serverless-patched if you installed it locally), which is a patched version of serverless that fixes a couple of issues by patching the underlying @serverless/cli : (1) Continuous "Deploying" messages being printed in non-interactive terminals (eg CI output) that make it hard to debug, and (2)处理silent next.js构建失败。
还建议添加--debug标志,以获取幕后发生的事情的更有用的日志。
不要尝试通过运行serverless deploy ,而只使用serverless
在大多数情况下,您不想使用CloudFront的发行域来访问您的应用程序。相反,您可以指定自定义域名。
您可以使用任何域名,但是必须使用AWS Route53进行DNS托管。从现有域中迁移DNS记录遵循此处的说明。使用自定义域名的要求:
mydomain.com )中包含一个带有一组名称服务器的托管区域。无服务器Next.js组件将自动生成SSL证书并创建新记录以指向您的CloudFront Distribution。
# serverless.yml
myNextApplication :
component : " @sls-next/serverless-component@{version_here} "
inputs :
domain : " example.com " # sub-domain defaults to www
domainMinimumProtocolVersion : " TLSv1.2_2018 " # can be omitted, defaults to "TLSv1.2_2018"您还可以配置一个subdomain :
# serverless.yml
myNextApplication :
component : " @sls-next/serverless-component@{version_here} "
inputs :
domain : ["sub", "example.com"] # [ sub-domain, domain ]要指定您自己的云面输入,只需在cloudfront下添加任何AWS-CloudFront输入:
# serverless.yml
myNextApplication :
component : " @sls-next/serverless-component@{version_here} "
inputs :
cloudfront :
# if you want to use an existing cloudfront distribution, provide it here
distributionId : XYZEXAMPLE # optional
# this is the default cache behaviour of the cloudfront distribution
# the origin-request edge lambda associated to this cache behaviour does the pages server side rendering
defaults :
forward :
headers :
[
CloudFront-Is-Desktop-Viewer,
CloudFront-Is-Mobile-Viewer,
CloudFront-Is-Tablet-Viewer
]
# this is the cache behaviour for next.js api pages
api :
minTTL : 10
maxTTL : 10
defaultTTL : 10
# you can set other cache behaviours like "defaults" above that can handle server side rendering
# but more specific for a subset of your next.js pages
/blog/* :
minTTL : 1000
maxTTL : 1000
defaultTTL : 1000
forward :
cookies : " all "
queryString : false
/about :
minTTL : 3000
maxTTL : 3000
defaultTTL : 3000
# you can add custom origins to the cloudfront distribution
origins :
- url : /static
pathPatterns :
/wp-content/* :
minTTL : 10
maxTTL : 10
defaultTTL : 10
- url : https://old-static.com
pathPatterns :
/old-static/* :
minTTL : 10
maxTTL : 10
defaultTTL : 10
- url : http://old-api.com
protocolPolicy : http-only
pathPatterns :
/old-api/* :
minTTL : 10
maxTTL : 10
defaultTTL : 10
aliases : ["foo.example.com", "bar.example.com"]
priceClass : " PriceClass_100 "
# You can add custom error responses
errorPages :
- code : 503
path : " /503.html "
minTTL : 5 # optional, minimum ttl the error is cached (default 10)
responseCode : 500 # optional, alters the response code
comment : " a comment " # optional, describes your distribution
webACLId : " arn:aws:wafv2:us-east-1:123456789012:global/webacl/ExampleWebACL/473e64fd-f30b-4765-81a0-62ad96dd167a " # ARN of WAF
restrictions :
geoRestriction :
restrictionType : " blacklist " # valid values are whitelist/blacklist/none. Set to "none" and omit items to disable restrictions
items : ["AA"] # ISO 3166 alpha-2 country codes
certificate :
cloudFrontDefaultCertificate : false # specify false and one of IAM/ACM certificates, or specify true and omit IAM/ACM inputs for default certificate
acmCertificateArn : " arn:aws:acm:us-east-1:123456789012:certificate/12345678-1234-1234-1234-123456789012 "
iamCertificateId : " iam-certificate-id " # specify either ACM or IAM certificate, not both
sslSupportMethod : " sni-only " # can be omitted, defaults to "sni-only"
minimumProtocolVersion : " TLSv1.2_2019 " # can be omitted, defaults to "TLSv1.2_2019"
originAccessIdentityId : XYZEXAMPLE # optional
paths : ["/*"] # which paths should be invalidated on deploy, default matches everything, empty array skips invalidation completely
waitBeforeInvalidate : true # by default true, it waits for the CloudFront distribution to have completed before invalidating, to avoid possibly caching old page
tags : # Add any tags you want
tag1 : val1
tag2 : val2这对于在CloudFront的边缘位置缓存您的下一个页面特别有用。有关使用自定义高速缓存配置的示例应用程序,请参阅此信息。您还可以使用自定义的云面输入来更新现有的云方面分布。
静态渲染页面(即上传到S3的HTML页面)具有以下缓存控制集:
cache-control: public, max-age=0, s-maxage=2678400, must-revalidate
s-maxage允许CloudFront在边缘位置缓存页面31天。 max-age=0与must-revalidate混合,确保浏览器永远不会缓存静态页面。这允许CloudFront完全控制缓存TTL。在每个部署中,都会创建无效/*以确保用户获得新的内容。
默认情况下,公共图像格式( gif|jpe?g|jp2|tiff|png|webp|bmp|svg|ico ) /public或/static文件夹具有一年的Cache-Control策略( public, max-age=31536000, must-revalidate )。您可以使用publicDirectoryCache来自定义Cache-Control标题value和要test文件的正则拨号:
myNextApplication :
component : " @sls-next/serverless-component@{version_here} "
inputs :
publicDirectoryCache :
value : public, max-age=604800
test : /.(gif|jpe?g|png|txt|xml)$/i value必须是有效的Cache-Control策略,并且test必须是您要测试的文件类型的有效regex 。如果您不希望浏览器从公共目录中缓存资产,则可以禁用以下内容:
myNextApplication :
component : " @sls-next/serverless-component@{version_here} "
inputs :
publicDirectoryCache : false默认情况下,Lambda@edge函数使用AWSlambDabasIceXecutionRole运行,该功能仅允许将日志上传到CloudWatch。如果您除此之外需要权限,例如访问DynamoDB或任何其他AWS资源,您将需要自己的自定义策略或角色ARN:
# serverless.yml
myNextApplication :
component : " @sls-next/serverless-component@{version_here} "
inputs :
policy : " arn:aws:iam::123456789012:policy/MyCustomPolicy " # serverless.yml
myNextApplication :
component : " @sls-next/serverless-component@{version_here} "
inputs :
roleArn : " arn:aws:iam::123456789012:role/MyCustomLambdaRole "确保将CloudWatch日志权限添加到自定义策略或角色中。最低政策JSON示例:
{
"Version" : " 2012-10-17 " ,
"Statement" : [
{
"Effect" : " Allow " ,
"Resource" : " * " ,
"Action" : [
" logs:CreateLogGroup " ,
" logs:CreateLogStream " ,
" logs:PutLogEvents "
]
},
{
"Effect" : " Allow " ,
"Resource" : " arn:aws:s3:::s3-deployment-bucket-name/* " ,
"Action" : [ " s3:GetObject " , " s3:PutObject " ]
}
]
}角色应包括与lambda.amazonaws.com和edgelambda.amazonaws.com的信任关系。
注意:指定bucketName ,并授予通过policy或roleArn访问该存储桶的权限,因此默认值和API Lambdas可以访问静态资源。
部署所需的AWS操作的详尽清单:
"acm:DescribeCertificate", // only for custom domains
"acm:ListCertificates", // only for custom domains
"acm:RequestCertificate", // only for custom domains
"cloudfront:CreateCloudFrontOriginAccessIdentity",
"cloudfront:CreateDistribution",
"cloudfront:CreateInvalidation",
"cloudfront:GetDistribution",
"cloudfront:GetDistributionConfig",
"cloudfront:ListCloudFrontOriginAccessIdentities",
"cloudfront:ListDistributions",
"cloudfront:ListDistributionsByLambdaFunction",
"cloudfront:ListDistributionsByWebACLId",
"cloudfront:ListFieldLevelEncryptionConfigs",
"cloudfront:ListFieldLevelEncryptionProfiles",
"cloudfront:ListInvalidations",
"cloudfront:ListPublicKeys",
"cloudfront:ListStreamingDistributions",
"cloudfront:UpdateDistribution",
"cloudfront:TagResource", // for adding tags
"cloudfront:UntagResource", // for adding tags
"cloudfront:ListTagsForResource", // for adding tags
"iam:AttachRolePolicy",
"iam:CreateRole",
"iam:CreateServiceLinkedRole",
"iam:GetRole",
"iam:PutRolePolicy",
"iam:PassRole",
"lambda:CreateFunction",
"lambda:EnableReplication",
"lambda:DeleteFunction", // only for custom domains
"lambda:GetFunction",
"lambda:GetFunctionConfiguration",
"lambda:PublishVersion",
"lambda:UpdateFunctionCode",
"lambda:UpdateFunctionConfiguration",
"lambda:ListTags", // for tagging lambdas
"lambda:TagResource", // for tagging lambdas
"lambda:UntagResource", // for tagging lambdas
"route53:ChangeResourceRecordSets", // only for custom domains
"route53:ListHostedZonesByName",
"route53:ListResourceRecordSets", // only for custom domains
"s3:CreateBucket",
"s3:GetAccelerateConfiguration",
"s3:GetObject", // only if persisting state to S3 for CI/CD
"s3:ListBucket",
"s3:PutAccelerateConfiguration",
"s3:PutBucketPolicy",
"s3:PutObject",
"s3:PutBucketTagging", // for tagging buckets
"s3:GetBucketTagging", // for tagging buckets
"lambda:ListEventSourceMappings",
"lambda:CreateEventSourceMapping",
"iam:UpdateAssumeRolePolicy",
"iam:DeleteRolePolicy",
"sqs:CreateQueue", // SQS permissions only needed if you use Incremental Static Regeneration. Corresponding SQS.SendMessage permission needed in the Lambda role
"sqs:DeleteQueue",
"sqs:GetQueueAttributes",
"sqs:SetQueueAttributes"
默认, API和图像(对于Next.js图像优化)Edge Lambdas将分配512MB的内存。可以通过将数字分配给memory输入来更改此值
# serverless.yml
myNextApplication :
component : " @sls-next/serverless-component@{version_here} "
inputs :
memory : 1024可以通过将memory分配给像这样的对象来分别定义默认, API和Image lambdas的值:
# serverless.yml
myNextApplication :
component : " @sls-next/serverless-component@{version_here} "
inputs :
memory :
defaultLambda : 1024
apiLambda : 2048
imageLambda : 2048可以遵循相同的模式以指定node.js运行时(默认情况下nodejs14.x):
# serverless.yml
myNextApplication :
component : " @sls-next/serverless-component@{version_here} "
inputs :
runtime :
defaultLambda : " nodejs14.x "
apiLambda : " nodejs14.x "
imageLambda : " nodejs14.x " # Note that the sharp image library is built for Lambda Node.js 14.x, although it will likely work fine on other runtimes同样,默认情况下的超时为10秒。为了自定义您可以:
# serverless.yml
myNextApplication :
component : " @sls-next/serverless-component@{version_here} "
inputs :
timeout :
defaultLambda : 20
apiLambda : 15
imageLambda : 15请注意,Lambda@Edge允许的最大超时为30秒。请参阅https://docs.aws.amazon.com/amazoncloudfront/latest/developerguide/lambda-requirements-limits.html
您还可以为默认, API和Image lambdas设置一个自定义名称 - 如果不是AWS -LAMBDA无服务器组件设置默认值为资源ID:
# serverless.yml
myNextApplication :
component : " @sls-next/serverless-component@{version_here} "
inputs :
name :
defaultLambda : fooDefaultLambda
apiLambda : fooApiLambda
imageLambda : fooImageLambda有第四个再生lambda,可以类似地配置,并用于增量静态再生。但是,它不使用lamda@edge,例如,可以具有更长的超时设置。

在CloudFront中创建了四个缓存行为。
前两个_next/*和static/*将请求转发到S3。
第三个与Lambda功能相关联,该功能负责处理三种请求。
服务器端渲染页面。任何定义getInitialProps方法的页面都将在此级别呈现,并立即将响应返回给用户。
静态优化的页面。向HTML旁边预先编译的页面的请求转发给S3。
公共资源。诸如/robots.txt , /favicon.ico , /manifest.json等词根资源的请求。这些请求将这些转发到S3。
2。和3。必须首先通过lambda@edge的原因是因为路由不符合_next/*或static/*之类的模式。另外,每条路线的一个缓存行为是一个坏主意,因为云范围仅允许每个分布25个。
第四个缓存行为处理下一个API请求api/* 。
| 姓名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| 部署 | boolean | true | 设置为false时,它不会将应用程序部署到提供商(例如AWS)。 |
| 领域 | Array | null | 例如['admin', 'portal.com'] |
| 域 | object | {} | 使用308重定向在边缘添加域级级重定向。用协议指定域名的对象 - >重定向目标。例如, www.example.com: https://example.com 。请参阅此处以获取更多信息。 |
| bucketname | string | null | 自定义存储库名称存储静态资产。默认情况下是自动化的。 |
| 遗愿 | string | null | 您想托管S3桶的地区。确保在地理位置上更接近您最终用户的大多数用户,以减少云层代理S3请求时的延迟。 |
| Buckettags | object | undefined | 自定义存储桶标签为您的存储桶设置。如果未定义,则该组件将不会更新任何标签。如果设置为空对象,它将删除所有标签。 |
| NextConfigdir | string | ./ | 您的应用程序next.config.js文件是目录。当serverless.yml与下一个应用程序不在同一目录中时,此输入很有用。注意:如果使用 next.config.js distDir ,则应设置nextConfigDir |
| Nextstaticdir | string | ./ | 如果您的static或public目录不是nextConfigDir的直接孩子 |
| 描述 | string | *lambda-type*@Edge for Next CloudFront distribution | 将用于两个lambdas的描述。请注意,“(API)”将附加到API lambda描述中。 |
| 政策 | string|object | arn:aws:iam::aws:policy/service-role/AWSLambdaBasicExecutionRole | 将分配给两个Lambdas的ARN或内联策略。 |
| 罗尔恩 | string|object | 无效的 | 将分配给两个lambdas的角色。 |
| 运行时 | string|object | nodejs14.x | 分配一个值时,将分配默认值和API lambdas,在值中定义的运行时。当分配给对象时,可以分开定义默认值和API lambdas的值 |
| 记忆 | number|object | 512 | 分配一个数字时,将分配默认值和API lambdas的内存。当分配给对象时,可以分开定义默认值和API lambdas的值 |
| 标签 | object | undefined | 标签分配给lambda。如果未定义,则该组件将不会更新任何标签。如果设置为空对象,它将删除所有标签。 |
| 暂停 | number|object | 10 | 与上面相同 |
| 处理程序 | string | index.handler | 分配值时,覆盖默认函数处理程序以进行配置。在路线中复制handler.js到lambda文件夹中。您的处理程序之后仍必须致电default-handler ,否则您的功能将无法使用Next.js |
| 姓名 | object | / | 可以明确定义所有lambdas的名称 |
| 建造 | boolean|object | true | 当True构建和部署应用程序时, .serverless_nextjs False假设该应用已构建并使用nextConfigDir中的.next Directories进行部署。如果传递对象, build允许覆盖脚本被调用以及参数。 |
| build.cmd | string | node_modules/.bin/next | 构建命令,您可以通过no-op命令(例如true或:在基于UNIX的系统中),然后跳过下一个。 |
| build.args | Array|string | ['build'] | 争论传递到构建 |
| build.cwd | string | ./ | 覆盖当前的工作目录 |
| build.enabled | boolean | true | 与传递build:false ,但在配置中 |
| build.env | object | {} | 将其他环境变量添加到脚本 |
| build.postbuildCommands | Array | [] | 任何命令运行后构建和前部的命令。例如,您可以在.serverless_nextjs目录上运行任何自定义代码,例如您可以将附加文件复制到lambda:请参见#767(注释)以获取next-18n的示例。仅在执行serverless命令期间适用。 |
| build.cleanupdotnext | boolean | true | 是否在运行构建步骤之前清理.next目录 |
| build.setignorepatterns | string[] | [] | 当发现要从_next/static,public,static Directories复制的文件时,要忽略的环球模式。 |
| build.Usev2Handler | boolean | false | 实验将其设置为True,以使用开始使用通用处理程序的V2处理程序。注意:这具有separateApiLambda和disableOriginResponseHandler的功能,因此不应将其一起使用。同样,它尚未完全优化代码大小,但仍应表现出色。将来,默认情况下,我们可能会使用此模式。 |
| Cloudfront | object | {} | 输入要传递给AWS-Cloudfront |
| 证书 | string | ```` | 特定的证书ARN用于云偏发。如果您希望使用通配符SSL证书,请有帮助。目前,这仅与domain输入一起起作用。请检查自定义CloudFront配置如何指定certificate而无需使用domain输入(请注意,由于域输入,这样做将覆盖任何证书)。 |
| 域类型 | string | "both" | 可以是: "apex" - Apex域,不要创建www子域。 "www" - 仅www域,不要创建顶点子域。 "both" - 提供任何一个时,都可以同时创建www和Apex域。 |
| 域mimimineprototoLodolversion | string | "TLSv1.2_2018" | 可以是: "SSLv3", "TLSv1", "TLSv1.1_2016", "TLSv1.2_2018", "TLSv1.2_2019", "TLSv1.2_2021" or "TLSv1_2016" 。请参阅参考。 |
| publicDirectoryCache | boolean|object | true | 自定义public / static文件夹资产缓存策略。分配具有value和/或test对象,可让您自定义缓存策略以及被缓存的文件类型。分配错误的禁用缓存 |
| USERERVERLESSTRACETARGET | boolean | false | 使用实验性服务器跟踪目标来构建下一个应用程序。这是Vercel现在使用的同一构建目标。有关详细信息,请参见此RFC。注意:在使用此过程时,您可能需要将NODE_ENV变量设置为production 。 |
| MinifyHandlers | boolean | false | 使用预先建造的缩小处理程序来减少代码尺寸。不会缩小自定义处理程序。 |
| 启用HTTPCompression | boolean | false | 设置为true时,SSR的lambda@edge函数和API请求将使用GZIP来压缩响应。请注意,您不需要启用此功能,因为CloudFront会为您压缩响应。 |
| 验证 | object | undefined | 用于基本身份验证的身份验证对象(可从1.19.0-alpha.3获得)。它目前仅支持单个用户名/密码组合,并且在Lambda处理程序中被授权。您还必须向CloudFront行为,例如defaults , api/*和_next/data/_ Authorization标头转发。注意:这是一种简单的方法,可以保护诸如开发/测试网站之类的环境,不建议用于生产使用。 |
| authentication.username | string | undefined | 基本身份验证的用户名。 |
| 启用3ACCELERATION | boolean | true | 是否启用S3传输加速度。由于某些AWS地区不支持它,因此禁用这可能是有用的。请参阅参考。 |
| Removeoldlambdaversions | boolean | false | 部署后删除旧Lambda版本的基本支持以确保。如果设置为true,则每次部署时,它将自动删除所有未部署/复制的所有lambdas的旧版本(从最古老开始)。如果您需要更复杂的策略,建议编写自己的脚本以删除旧版本。 |
可以像这样配置自定义输入:
myNextApp :
component : " @sls-next/serverless-component@{version_here} "
inputs :
bucketName : my-bucket(实验) - 将此构造提高到速度并重用一些无服务器逻辑所需的更多工作。结果,该结构可能会相应地适应/更改。
文档可以在这里找到。
当我们效仿Next.js路由逻辑几乎从头开始,以优化无服务器环境,可能会有一些不完整或丢失的功能(如前所述)。但是,我们认为我们已经涵盖了大多数功能,并增加了良好的单元和端到端的测试覆盖范围以确保稳定性(例如,跨10多个端到端测试套件)。有几个人正在使用它来为他们的创业,个人网站等提供动力。
云提供商的限制也适用 - 例如,在AWS lambda@edge上,有冷启动,代码尺寸限制,1 MB响应大小限制等等。当然,您现在也挂在一个平台上(AWS lambda@edge;更快即将来临!)。
我们还通过在不久的将来考虑更好的基础架构解决方案(CDK,CDK Terraform,Pulumi等),继续改善部署过程。
确保您的serverless.yml使用serverless-components (beta)格式。无服务器组件与原始的无服务器框架不同,即使它们都可以通过同一CLI访问。
✅做
# serverless.yml
myNextApp :
component : " @sls-next/serverless-component@{version_here} "
myTable :
component : serverless/aws-dynamodb
inputs :
name : Customers
# other components不
# serverless.yml
provider :
name : aws
runtime : nodejs10.x
region : eu-west-1
myNextApp :
component : " @sls-next/serverless-component@{version_here} "
Resources : ...请注意正确的YAML如何声明provider , Resources等。
对于部署,请勿运行serverless deploy 。只需运行serverless即可部署在serverless.yml文件中声明的组件。
有关无服务器组件的更多信息,请转到此处。
API处理程序和默认处理程序软件包分别部署,但是每个aws的限制为50 MB或250 MB未压缩 - 请参见此处和此处。通过设计,目前只有一个lambda@edge用于所有页面路由,一个lambda@edge对于所有API路由。这可能会导致代码大小问题,特别是如果您有许多API路由,SSR页面等。
如果您遇到代码大小问题,请尝试以下操作:
优化您的代码大小:减少SSR页面和API路由中的#依赖项,具有更少的SSR页面(即不使用getInitialProps()或getServerSideProps() )。
通过使用minifyHandlers输入来缩小处理程序代码本身。这将使处理程序的尺寸从〜500 kb减少到〜200 kb。
通过将以下WebPack配置添加到您的next.config.js ,使用Terser缩小/最小化服务器端代码。它使用NEXT_MINIMIZE环境变量来说明其最小化SSR代码。请注意,这将增加构建时间,并缩小代码,以便更难调试CloudWatch错误。
首先,将terser-webpack-plugin添加到您的依赖项中。然后更新next.config.js :
const TerserPlugin = require ( "terser-webpack-plugin" ) ; webpack: ( config , { buildId , dev , isServer , defaultLoaders , webpack } ) => {
if ( isServer && ! dev && process . env . NEXT_MINIMIZE === "true" ) {
config . optimization = {
minimize : true ,
minimizer : [
new TerserPlugin ( {
parallel : true ,
cache : true ,
terserOptions : {
output : { comments : false } ,
mangle : true ,
compress : true
} ,
extractComments : false
} )
]
} ;
}
return config ;
} ;请注意,如果您不使用任何API路由,则将自动从捆绑包中删除所有仅用于预处静态页面的JS文件。但是,如果您使用API路由,我们不会将其删除,因为它们可能用于预览模式。即使使用API路由,也没有识别和删除未在预览模式下使用的这些JS文件的官方/非黑客方法。但是,如果需要,我们可以添加一个新的输入来手动排除它们。
serverless.yml中使用useServerlessTraceTarget选项。这将导致Next.js不会将依赖关系捆绑到每个页面中(而不是创建轻量级页面),然后serverless-next.js将在node_modules中引用一组依赖关系。 这可能是因为Lambda@边缘代码大小问题(有关解决方案的潜在解决方案。相关的GITHUB问题),或者如果您的网络上传速度慢和/或试图部署大型lambda软件包,则可能是因为github问题。
在第二种情况下,所使用的aws-sdk NPM软件包的默认超时为120秒。目前,这是不可配置的,但是我们可能会在不久的将来支持更长的超时(类似于无服务器/无服务器#937,它仅适用于无服务器框架,而不是无服务器组件)。
默认情况下,CloudFront将Host标头设置为S3 Origin主机名。您需要将Host标头转发到原点。请参阅下面的示例以获取api/*缓存行为:
myNextApplication :
component : " @sls-next/serverless-component@{version_here} "
inputs :
cloudfront :
api/* :
forward :
headers : [Host] 鼓励用户使用此组件,而不是使用serverless-plugin 。该组件是使用从无服务器插件中学到的经验教训构建和设计的。
有关与DynamoDB相互作用的示例todo应用程序,请参见examples/dynamodb-crud 。您可以在此处找到示例的完整列表
不幸的是,由于无服务器组件的工作方式(至少至少是Beta版本),因此需要在serverless命令之外同步部署状态。因此,您可以尝试以下解决方案:
.serverless目录下的文件。尽管不建议这样做,因为它在多个阶段都无法正常工作。.serverless文件,请参见此处,此处(使用多个serverless.yml文件)或此处(基于github操作,使用多个serverless.yml文件)。distributionId CloudFront Input来指定要部署到的现有云方分布。将来,我们将通过将适当的阶段管理集成到组件本身来改善这一点。
该项目是由原始作者发起的,当时无服务器组件在Beta中,不幸的是GA组件不久就发布了。但是,这越来越大,由于没有服务器的维护,因此将几个子组件导入了此MonorePo。然后很难升级。
有一个计划升级到GA组件,但由于某些原因而被搁置了:
我们目前正在研究适当的IAC解决方案(例如Terraform,CDK,Pulumi等)来解决此问题并减轻维持复杂部署逻辑的负担,以便我们可以专注于开发人员的经验并与Next.js。
是的!主要阻滞剂是下一个。JS路由逻辑过去与lambda@edge/cloudfront逻辑相结合。但是,我们已经为大多数核心逻辑(进入@sls-next/core软件包中)构成了通用,以便仅通过创建包装处理程序,实现某些特定于平台的客户端(例如,检索页面,触发静态再生等),就可以在其他平台中重复使用它,并创建部署者。如果您观察到,您已经注意到通过API网关进行Lambda部署的新软件包:https://github.com/serverless-nextjs/serverless-nextjs/serverless-next.js/tree/tree/master/master/packages/packages/libs/libs/lambda。其他平台(例如Azure和Google Cloud)希望很快能够跟随。
us-east-1 。如何将其部署到另一个区域?无服务器Next.js是无区域的。根据设计, serverless-next.js应用程序将在全球范围内部署到每个CloudFront Edge位置。 Lambda看起来可能仅部署到us-east-1但在幕后,它已复制到其他每个区域。
有关高级build设置,请参见下面的示例,其中包括将其他参数和环境变量传递给构建。
# serverless.yml
myDatabase :
component : MY_DATABASE_COMPONENT
myNextApp :
component : " @sls-next/serverless-component@{version_here} "
inputs :
build :
args : ["build", "custom/path/to/pages"]
env :
DATABASE_URL : ${myDatabase.databaseUrl} 如果您尝试将环境变量与另一个字符串相连,例如${env.VARIABLE}-blah ,则无服务器框架似乎只能将其解析为${env.VARIABLE} 。
它似乎是无服务器组件中的错误 - 这可能是由于不使用最新的GA版本,该版本可能已经修复了(不幸的是,这仍然在组件beta上)。目前,解决方法是:
serverless.yml变量,然后串联: stage : ${env.STAGE}
my-app :
component : " @sls-next/[email protected] "
inputs :
domain :
- " ${stage}-front-end "
- mydomain.com 您可以将新的domainRedirects输入以及转发Host标头和domainType: both请求重定向到正确的域。请参阅下面的示例配置,该配置重定向www.example.com请求送至https://example.com 。
next-app :
component : " ../../serverless-components/nextjs-component "
inputs :
cloudfront :
defaults :
forward :
headers : [Host]
domain : ["example.com"]
domainType : " both "
domainRedirects :
www.example.com : https://example.com所有这些都发生在lambda@edge Origin请求处理程序中。请注意,这将不允许您在_next/static/*或/static/*上重定向请求,因为这些缓存行为没有附加到其上的lambda@edge处理程序。
否则,您也可以使用此处概述的S3存储桶使用手动解决方法。总而言之,您将必须创建一个新的S3存储桶,并使用静态网站托管将其设置为将请求重定向到您支持的子域类型(例如“ www.example.com”或“ example.com”)。为了能够支持HTTPS重定向,您需要以S3重定向存储桶作为原点设置CloudFront Distribution。最后,您需要将新创建的CloudFront Distribution作为别名目标创建53号公路上的“ A”记录。
build.env不会出现在我的应用中为了允许您的应用访问定义的环境变量,您需要通过此处概述的next.config.js将其展示。
给定一个serverless.yml这样
myApp :
inputs :
build :
env :
API_HOST : " http://example.com "您的next.config.js应该看起来像:
module . exports = {
env : {
API_HOST : process . env . API_HOST
}
} ; 您可能会看到下面的错误:
502 ERROR
The request could not be satisfied.
The Lambda function returned invalid JSON: The JSON output is not parsable. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.
If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.
Generated by cloudfront (CloudFront)
当响应的大小太大时,通常会发生这种情况。 Lambda@Edge当前确实有原始请求处理程序返回的1 MB的限制。请参阅:https://docs.aws.amazon.com/amazoncloudfront/latest/developerguide/lambda-generating-http-responses-in-requests.html#lambda-generating-http-generating-http-responses-responses-erponses-errors。不幸的是,除了试图确保您的响应较小之外,可能没有其他解决方法。
确保您通过CloudFront配置转发Accept-Language标头,Otherwise无法确定用户理解和/或喜欢的语言。默认情况下它已转发,但是如果您使用自己的配置覆盖,则应将其添加回。
如果您正在使用第三方库(目前仅使用next-i18next )并使用默认路径,则可能需要将某些文件复制到lambda目录。该组件将尝试检测默认文件并为您复制它们。但是,如果您有自定义配置,则可能需要编写自己的postBuildCommands来复制文件,等等。
有关更多信息和警告,请参阅README。
您可以在这里打开一个新问题。如果发布问题,请首先关注调试Wiki以获取一些有用的提示,并尝试包含大量信息以复制该问题。
如果要报告安全漏洞,请改用安全策略。
请注意,目前只有一个核心维护者(@dphang)和少数社区贡献者,他们在业余时间为这个图书馆做出了贡献。因此,我们希望您了解我们的回应是最好的,可能需要几天或更多的时间。 So we hope you could at least help debug the issue or provide as much context. In case an issue hasn't been looked at for a long time (> a few weeks) or it seems like a major issue, feel free to mention a maintainer and we will try to prioritize it.
We would love if you can help contribute, whether it's coding, triaging or debugging issues, helping with documentation, or financial support! Please see the contributing guide.
由于所有贡献的人,该项目的存在。 [贡献]。
Made with contributors-img.
成为财务贡献者,并帮助我们维持社区。 [贡献]
与您的组织一起支持这个项目。您的徽标将在此处显示您网站的链接。 [贡献]