零配置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)和少數社區貢獻者,他們在業餘時間為這個圖書館做出了貢獻。因此,我們希望您了解我們的回應是最好的,可能需要幾天或更多的時間。因此,我們希望您至少可以幫助調試問題或提供盡可能多的背景。如果很長一段時間沒有研究問題(>幾週),或者似乎是一個主要問題,請隨時提及維護者,我們將嘗試將其優先考慮。
如果您可以幫助您進行編碼,分類或調試問題,幫助文檔或財務支持,我們會很樂意!請參閱貢獻指南。
由於所有貢獻的人,該項目的存在。 [貢獻]。
由貢獻者製成。
成為財務貢獻者,並幫助我們維持社區。 [貢獻]
與您的組織一起支持這個項目。您的徽標將在此處顯示您網站的鏈接。 [貢獻]