serverless next.js
v3.7.0
การกำหนดค่าเป็นศูนย์ next.js 10/11 ส่วนประกอบ Serverless สำหรับ AWS Lambda@Edge โดยมีจุดมุ่งหมายเพื่อความเท่าเทียมกันอย่างเต็มที่
โปรดตรวจสอบคุณสมบัติสำหรับรายการคุณสมบัติที่รองรับในปัจจุบัน
readme นี้สะท้อนให้เห็นถึงการเปลี่ยนแปลงล่าสุดในสาขา masterอาจหรืออาจยังไม่ได้รับการเผยแพร่ไปยังlatest(เสถียร) หรือalphaรีลีสใน NPM โปรดไปที่รุ่นค้นหาเวอร์ชัน@sls-next/serverless-componentที่ถูกต้องที่คุณใช้และเปิด ReadMe สำหรับรุ่นนั้นสำหรับข้อมูลที่แม่นยำยิ่งขึ้น หากคุณสมบัติมีการระบุไว้ใน readme นี้ แต่ไม่ทำงานโปรดลองอัปเกรดเป็นรุ่นalphaล่าสุดใน NPM
ขณะนี้ใช้ส่วนประกอบเซิร์ฟเวอร์เบต้า (ไม่ใช่รุ่น GA) เนื่องจากโครงการเริ่มต้นก่อน GA ขณะนี้เรากำลังทำงานใหม่ว่าการปรับใช้จะทำงานอย่างไรในอนาคตและสำรวจโซลูชั่น IAC ที่ดีขึ้นเช่น CDK, CDK สำหรับ Terraform ฯลฯ และจะประกาศก่อนสิ้นปีในการอัปเดตใด ๆ
ตั้งแต่ next.js 8.0 โหมด Serverless ได้รับการแนะนำซึ่งให้ API ระดับต่ำใหม่ซึ่งโครงการเช่นนี้สามารถใช้ในการปรับใช้กับผู้ให้บริการคลาวด์ที่แตกต่างกัน อย่างไรก็ตาม next.js ไม่ได้ให้ตรรกะการกำหนดเส้นทางแบบไม่มีเซิร์ฟเวอร์แบบเต็มดังนั้นเหตุใดจึงจำเป็นต้องใช้โครงการนี้เพื่อเติมเต็มช่องว่าง วิสัยทัศน์ระยะยาวคือการอนุญาตให้คุณโฮสต์ด้วยเมฆต่าง ๆ เริ่มต้นด้วย AWS
โครงการนี้เป็นเวอร์ชันที่ดีกว่าของปลั๊กอิน Serverless ซึ่งมุ่งเน้นไปที่การจัดการกับปัญหาหลักเช่นการสนับสนุน 9 ถัดไปประสบการณ์การพัฒนาที่ดีขึ้น 200 ขีด จำกัด ทรัพยากร cloudformation 200 และประสิทธิภาพ
ไม่จำเป็นต้องมีการกำหนดค่าเพียงเล็กน้อย คุณสามารถขยายค่าเริ่มต้นตามความต้องการของแอปพลิเคชันของคุณ
ผู้ใช้ส่วนประกอบนี้ควรจะสามารถใช้งาน tooling การพัฒนา next.js, aka next dev มันเป็นหน้าที่ขององค์ประกอบในการปรับใช้แอปพลิเคชันของคุณเพื่อให้มั่นใจถึงความเท่าเทียมกันด้วยคุณสมบัติทั้งหมดของถัดไปที่เรารู้จักและชื่นชอบ เราพยายามเลียนแบบลอจิกการกำหนดเส้นทางและฝั่งเซิร์ฟเวอร์ทั้งหมดหรือส่วนใหญ่จาก next.js และปรับให้เหมาะสมสำหรับสภาพแวดล้อมที่ไม่มีเซิร์ฟเวอร์ ด้านล่างคุณสามารถค้นหารายการคุณสมบัติที่รองรับได้ในปัจจุบัน
ด้วยสถาปัตยกรรมที่เรียบง่ายและไม่มีการใช้ CloudFormation ไม่มีข้อ จำกัด ว่าคุณสามารถมีหน้าเว็บของคุณได้กี่หน้ารวมถึงเวลาในการปรับใช้ที่รวดเร็วมาก! ด้วยข้อยกเว้นของเวลาการแพร่กระจายของ Cloudfront แน่นอน
เนื่องจากเราเลียนแบบตรรกะการกำหนดเส้นทางของ JS ต่อไป แต่น่าเสียดายที่เราไม่ได้มีความเท่าเทียมกันเสมอไป ต่อไปนี้แสดงคุณสมบัติที่รองรับทั้งหมดหรือคุณสมบัติที่วางแผนไว้ หากช่องทำเครื่องหมายถูกติ๊กก็หมายความว่ารองรับคุณลักษณะนี้ มิฉะนั้นจะยังไม่ได้รับการสนับสนุนหรืออยู่ในขั้นตอนการวางแผนหรือการดำเนินการในปัจจุบัน โปรดดูคำอธิบายของรายการสำหรับรายละเอียดเฉพาะ
โปรดทราบว่าคุณสมบัติบางอย่างอาจอยู่ในรุ่นอัลฟ่าล่าสุดเท่านั้น หากคุณสมบัติมีการระบุไว้ตามที่รองรับ แต่ไม่ทำงานบนแท็ก latest มันน่าจะอยู่ในแท็ก alpha หากเป็นไปได้โปรดช่วยเราทดสอบการเปลี่ยนแปลงอัลฟ่าล่าสุดและส่งรายงานข้อผิดพลาดหากคุณพบปัญหาใด ๆ ขอบคุณ!
มีคุณสมบัติที่คุณต้องการ แต่ยังไม่รองรับหรือไม่? กรุณาเปิดปัญหาใหม่เพื่อแจ้งให้เราทราบ!
/_next/* เสิร์ฟจาก CloudFront getStaticProps getServerSideProps getStaticPaths _next/static/* และ static/* เนื่องจากพฤติกรรมแคชเหล่านั้นไม่มีตัวจัดการแลมบ์ดาติดอยู่กับพวกเขา โปรดทราบว่ารูปแบบ has จับคู่ใหม่ (https://nextjs.org/docs/api-reference/next.config.js/redirects#header-cookie-and-query-matching) ยังไม่ได้รับการสนับสนุน _next/static/* และ static/* เนื่องจากพฤติกรรมแคชเหล่านั้นไม่มีตัวจัดการแลมบ์ดาติดอยู่กับพวกเขา โปรดทราบว่ารูปแบบ has จับคู่ใหม่ (https://nextjs.org/docs/api-reference/next.config.js/redirects#header-cookie-and-query-matching) ยังไม่ได้รับการสนับสนุน _next/static/* และ static/* เนื่องจากพฤติกรรมแคชเหล่านั้นไม่มีตัวจัดการแลมบ์ดาติดอยู่กับพวกเขา โปรดทราบว่ารูปแบบ 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 หากคุณระบุ @sls-next/serverless-component ในไฟล์ serverless.yml ของคุณอย่าเพิ่ม @sls-next/serverless-component ไปยังไฟล์ package.json ของคุณมันไม่ได้ใช้และใช้เฉพาะเวอร์ชันในไฟล์ serverless.yml หากคุณไม่ได้ระบุเวอร์ชันจะใช้แท็ก latest ซึ่งหมายถึงเวอร์ชันที่เสถียรล่าสุดที่นี่ (เช่นไม่ใช่รุ่นอัลฟ่า)
นอกจากนี้คุณยังสามารถชี้ไปที่การติดตั้งในพื้นที่เช่นหากคุณต้องการใช้เวอร์ชันโดยใช้ package.json
ในกรณีนี้กำหนดค่าต่อไปนี้:
# serverless.yml
myNextApplication :
component : " ./node_modules/@sls-next/serverless-component "จากนั้นตั้งค่าข้อมูลรับรอง AWS ของคุณเป็นตัวแปรสภาพแวดล้อม:
AWS_ACCESS_KEY_ID=accesskey
AWS_SECRET_ACCESS_KEY=sshhhและเพียงแค่ปรับใช้:
$ serverlessหากคุณมีปัญหาในการปรับใช้เนื่องจากเวอร์ชัน Serverless ใหม่โปรดลองปักเป็นเวอร์ชันเฉพาะเช่น 2.72.2 ดู #2320 (ความคิดเห็น)
[Alpha-อาจเป็นรถบั๊ก] คุณอาจปรับใช้โดยใช้ npx @sls-next/serverless-patched @serverless/cli หรือ serverless-patched ถ้าคุณติดตั้งในเครื่อง) ซึ่งเป็นเวอร์ชันที่ serverless ที่แก้ไขซึ่งแก้ไขปัญหาที่ไม่ได้ใช้งาน (2) จัดการเงียบ next.js สร้างความล้มเหลว
นอกจากนี้ยังแนะนำให้เพิ่ม --debug ธงเบ็ดเพื่อรับบันทึกที่มีประโยชน์มากขึ้นเกี่ยวกับสิ่งที่เกิดขึ้นเบื้องหลัง
อย่าพยายามปรับใช้โดยเรียกใช้ serverless deploy ใช้เฉพาะ serverless
ในกรณีส่วนใหญ่คุณไม่ต้องการใช้โดเมนการกระจายของ CloudFront เพื่อเข้าถึงแอปพลิเคชันของคุณ คุณสามารถระบุชื่อโดเมนที่กำหนดเองแทนได้
คุณสามารถใช้ชื่อโดเมนใด ๆ แต่คุณต้องใช้ AWS Route53 สำหรับโฮสติ้ง DNS ของคุณ เพื่อโยกย้ายบันทึก DNS จากโดเมนที่มีอยู่ทำตามคำแนะนำที่นี่ ข้อกำหนดในการใช้ชื่อโดเมนที่กำหนดเอง:
mydomain.com ) พร้อมชุดของ Nameserversส่วนประกอบ Serverless Next.js จะสร้างใบรับรอง SSL โดยอัตโนมัติและสร้างระเบียนใหม่เพื่อชี้ไปที่การกระจาย CloudFront ของคุณ
# 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 ใด ๆ ภายใต้ 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สิ่งนี้มีประโยชน์อย่างยิ่งสำหรับการแคชหน้าถัดไปของคุณ js ของคุณในตำแหน่งขอบของ Cloudfront ดูสิ่งนี้สำหรับแอปพลิเคชันตัวอย่างด้วยการกำหนดค่าแคชที่กำหนดเอง นอกจากนี้คุณยังสามารถอัปเดตการแจกแจงแบบ CloudFront ที่มีอยู่โดยใช้อินพุต CloudFront ที่กำหนดเอง
หน้าแสดงผลแบบคงที่ (เช่นหน้า HTML ที่อัปโหลดไปยัง S3) มีชุดควบคุมแคชต่อไปนี้:
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 คุณสามารถปรับแต่ง value ส่วนหัว Cache-Control และ regex ของไฟล์ที่จะ test ด้วย publicDirectoryCache :
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 อื่น ๆ คุณจะต้องใช้นโยบายหรือบทบาทที่กำหนดเองของคุณเอง:
# 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 และ IMAGE (สำหรับการเพิ่มประสิทธิภาพรูปภาพ next.js) Edge Lambdas จะถูกกำหนดหน่วยความจำ 512MB ตามค่าเริ่มต้น ค่านี้สามารถเปลี่ยนแปลงได้โดยการกำหนดหมายเลขให้กับอินพุตหน่วย memory
# serverless.yml
myNextApplication :
component : " @sls-next/serverless-component@{version_here} "
inputs :
memory : 1024 ค่าสำหรับ ค่าเริ่มต้น API และ Lambdas สามารถแยกได้โดยการกำหนด memory ให้กับวัตถุเช่น:
# serverless.yml
myNextApplication :
component : " @sls-next/serverless-component@{version_here} "
inputs :
memory :
defaultLambda : 1024
apiLambda : 2048
imageLambda : 2048รูปแบบเดียวกันสามารถติดตามได้สำหรับการระบุ node.js runtime (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 Serverless Component เป็น ID ทรัพยากร:
# serverless.yml
myNextApplication :
component : " @sls-next/serverless-component@{version_here} "
inputs :
name :
defaultLambda : fooDefaultLambda
apiLambda : fooApiLambda
imageLambda : fooImageLambdaมีแลมบ์ดา การฟื้นฟู ครั้งที่สี่ซึ่งสามารถกำหนดค่าได้ในทำนองเดียวกันและใช้สำหรับการฟื้นฟูแบบคงที่ที่เพิ่มขึ้น อย่างไรก็ตามมันไม่ได้ใช้ Lamda@Edge และสามารถตั้งค่าการหมดเวลาได้นานขึ้น
พฤติกรรมแคชสี่ตัวถูกสร้างขึ้นใน Cloudfront
สองคนแรก _next/* และ static/* ส่งต่อคำขอไปยัง S3
ที่สามเกี่ยวข้องกับฟังก์ชั่นแลมบ์ดาซึ่งรับผิดชอบในการจัดการคำขอสามประเภท
หน้าแสดงผลด้านเซิร์ฟเวอร์ หน้าใด ๆ ที่กำหนดวิธีการ getInitialProps จะแสดงผลในระดับนี้และการตอบกลับจะถูกส่งกลับไปยังผู้ใช้ทันที
หน้าปรับให้เหมาะสมแบบคงที่ การร้องขอไปยังหน้าเว็บที่รวบรวมไว้ล่วงหน้าโดยถัดจาก HTML จะถูกส่งต่อไปยัง S3
ทรัพยากรสาธารณะ คำขอไปยังทรัพยากรระดับรากเช่น /robots.txt , /favicon.ico , /manifest.json ฯลฯ สิ่งเหล่านี้จะถูกส่งต่อไปยัง S3
เหตุผลที่ 2. และ 3. ต้องผ่าน Lambda@Edge ก่อนเพราะเส้นทางไม่สอดคล้องกับรูปแบบเช่น _next/* หรือ static/* นอกจากนี้พฤติกรรมแคชหนึ่งต่อเส้นทางเป็นความคิดที่ไม่ดีเพราะ CloudFront อนุญาตให้ 25 ต่อการกระจายเท่านั้น
พฤติกรรมแคชที่สี่จัดการกับ API ถัดไปขอ api/*
| ชื่อ | พิมพ์ | ค่าเริ่มต้น | คำอธิบาย |
|---|---|---|---|
| ปรับใช้ | boolean | true | เมื่อตั้งค่าเป็นเท็จมันจะไม่ปรับใช้แอพกับผู้ให้บริการ (เช่น AWS) |
| โดเมน | Array | null | ตัวอย่างเช่น ['admin', 'portal.com'] |
| Domainredirects | object | {} | เพิ่มการเปลี่ยนเส้นทางระดับโดเมนที่ขอบโดยใช้การเปลี่ยนเส้นทาง 308 ระบุวัตถุของชื่อโดเมน -> การเปลี่ยนเส้นทางปลายทางด้วยโปรโตคอล ตัวอย่างเช่น www.example.com: https://example.com ดูที่นี่สำหรับข้อมูลเพิ่มเติม |
| ชื่อถัง | string | null | ชื่อถังที่กำหนดเองที่เก็บสินทรัพย์คงที่ โดยค่าเริ่มต้นจะถูกปรับให้เป็นแบบ autogenerated |
| BucketRegion | string | null | ภูมิภาคที่คุณต้องการโฮสต์ถัง S3 ของคุณ ตรวจสอบให้แน่ใจว่านี่เป็นทางภูมิศาสตร์ที่ใกล้เคียงกับผู้ใช้ส่วนใหญ่ของคุณเพื่อลดเวลาแฝงเมื่อพร็อกซี Cloudfront ขอ S3 |
| บัคเก็ตต์ | object | undefined | แท็กถังที่กำหนดเองเพื่อตั้งค่าสำหรับถังของคุณ หากไม่ได้กำหนดส่วนประกอบจะไม่อัปเดตแท็กใด ๆ หากตั้งค่าเป็นวัตถุเปล่ามันจะลบแท็กทั้งหมด |
| NextConfigdir | string | ./ | ไดเรกทอรีที่แอปพลิเคชันของคุณ next.config.js ไฟล์คือ อินพุตนี้มีประโยชน์เมื่อ serverless.yml ไม่ได้อยู่ในไดเรกทอรีเดียวกับแอพถัดไปหมายเหตุ: ควรตั้งค่า nextConfigDir หากใช้ next.config.js distDir |
| nextstaticdir | string | ./ | หากไดเรกทอรี static หรือ public ของคุณไม่ใช่ลูกโดยตรงของ nextConfigDir สิ่งนี้จำเป็นต้องมี |
| คำอธิบาย | string | *lambda-type*@Edge for Next CloudFront distribution | คำอธิบายที่จะใช้สำหรับแลมบ์ดาทั้งสอง โปรดทราบว่า "(API)" จะถูกผนวกเข้ากับคำอธิบาย API Lambda |
| นโยบาย | string|object | arn:aws:iam::aws:policy/service-role/AWSLambdaBasicExecutionRole | นโยบาย ARN หรืออินไลน์ที่จะได้รับมอบหมายให้ทั้งแลมบ์ดา |
| โรล | string|object | โมฆะ | อาร์นของบทบาทที่จะได้รับมอบหมายให้ทั้งแลมบ์ดา |
| รันไทม์ | string|object | nodejs14.x | เมื่อกำหนดค่าทั้งค่าเริ่มต้นและ API แลมบ์ดาสจะถูกกำหนดรันไทม์ที่กำหนดไว้ในค่า เมื่อกำหนดให้กับวัตถุค่าสำหรับค่าเริ่มต้นและ Lambdas API สามารถแยกได้แยกกัน |
| หน่วยความจำ | number|object | 512 | เมื่อกำหนดตัวเลขทั้งค่าเริ่มต้นและ API แลมบ์ดาสจะได้รับการกำหนดหน่วยความจำของค่านั้น เมื่อกำหนดให้กับวัตถุค่าสำหรับค่าเริ่มต้นและ Lambdas API สามารถแยกได้แยกกัน |
| แท็ก | object | undefined | แท็กเพื่อกำหนดให้แลมบ์ดา หากไม่ได้กำหนดส่วนประกอบจะไม่อัปเดตแท็กใด ๆ หากตั้งค่าเป็นวัตถุเปล่ามันจะลบแท็กทั้งหมด |
| การหมดเวลา | number|object | 10 | เหมือนกับข้างต้น |
| ผู้ดูแล | string | index.handler | เมื่อกำหนดค่าให้แทนที่ตัวจัดการฟังก์ชั่นเริ่มต้นเพื่ออนุญาตให้มีการกำหนดค่า Copies handler.js ในเส้นทางสู่โฟลเดอร์แลมบ์ดา ตัวจัดการของคุณจะต้องโทรหา default-handler หลังจากนั้นหรือฟังก์ชั่นของคุณจะไม่ทำงานกับ next.js |
| ชื่อ | object | - | ชื่อสำหรับแลมบ์ดาทั้งหมดสามารถกำหนดได้อย่างชัดเจน |
| สร้าง | boolean|object | true | เมื่อแอปจริงสร้างและปรับใช้เมื่อเท็จสมมติว่าแอพได้รับการสร้างและใช้ไดเรกทอรี .next .serverless_nextjs ใน nextConfigDir เพื่อปรับใช้ หากวัตถุถูกส่งผ่าน build ช่วยให้สามารถเอาชนะสิ่งที่สคริปต์ได้รับเรียกและมีข้อโต้แย้งใด |
| build.cmd | string | node_modules/.bin/next | สร้างคำสั่งคุณอาจผ่านคำสั่ง no-op (เช่น true หรือ : ในระบบที่ใช้ UNIX) ซึ่งจะข้ามการสร้าง next.js |
| 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.assetignorePatterns | string[] | [] | รูปแบบ GLOB ที่จะเพิกเฉยเมื่อค้นพบไฟล์เพื่อคัดลอกจาก _next/คงที่ไดเรกทอรีสาธารณะและคงที่ |
| build.usev2handler | boolean | false | การทดลอง ตั้งค่านี้เป็นจริงเพื่อใช้ตัวจัดการ V2 ซึ่งเริ่มใช้ตัวจัดการทั่วไป หมายเหตุ: สิ่งนี้มีฟังก์ชันการทำงานของ separateApiLambda และ disableOriginResponseHandler ดังนั้นจึงไม่ควรใช้ร่วมกัน นอกจากนี้ยังไม่ได้รับการปรับให้เหมาะสมอย่างสมบูรณ์ในแง่ของขนาดรหัส แต่ควรยังคงเป็นนักแสดง ในอนาคตเราจะใช้โหมดนี้โดยค่าเริ่มต้น |
| เมฆ | object | {} | อินพุตที่จะส่งผ่านไปยัง AWS-Cloudfront |
| ใบรับรอง | string | - | ใบรับรองเฉพาะ ARN เพื่อใช้สำหรับการกระจาย CloudFront มีประโยชน์หากคุณมีใบรับรอง Wildcard SSL ที่คุณต้องการใช้ ปัจจุบันใช้งานได้เฉพาะกับอินพุต domain โปรดตรวจสอบการกำหนดค่า CloudFront ที่กำหนดเองสำหรับวิธีการระบุ certificate โดยไม่จำเป็นต้องใช้อินพุต domain (โปรดทราบว่าการทำเช่นนั้นจะแทนที่ใบรับรองใด ๆ เนื่องจากอินพุตโดเมน) |
| โดเมน | string | "both" | สามารถเป็นหนึ่งใน: "apex" - Apex Domain เท่านั้นอย่าสร้างโดเมนย่อย WWW "www" - โดเมน www เท่านั้นอย่าสร้างโดเมนย่อย Apex "both" - สร้างทั้งโดเมน WWW และ APEX เมื่อมีการจัดเตรียมหนึ่งอัน |
| DomainMinimumProtocolversion | 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 ช่วยให้คุณปรับแต่งนโยบายการแคชและประเภทของไฟล์ที่ถูกแคช การกำหนดปิดการปิดการใช้งานการแคช |
| useerverlesstracetarget | boolean | false | ใช้เป้าหมายการทดลองที่ใช้งานไม่ได้เพื่อสร้างแอพถัดไปของคุณ นี่คือเป้าหมายการสร้างเดียวกันกับที่ Vercel ใช้ในขณะนี้ ดูรายละเอียด RFC นี้ หมายเหตุ: ในขณะที่ใช้สิ่งนี้คุณอาจต้องตั้งค่าตัวแปร NODE_ENV เป็นการ production |
| minifyhandlers | boolean | false | ใช้ตัวจัดการขนาดเล็กที่สร้างไว้ล่วงหน้าเพื่อลดขนาดรหัส ไม่ลดขนาดตัวจัดการที่กำหนดเอง |
| enablehttpcompression | boolean | false | เมื่อตั้งค่าเป็น true ฟังก์ชั่น Lambda@Edge สำหรับคำขอ SSR และ API จะใช้ GZIP เพื่อบีบอัดการตอบกลับ โปรดทราบว่าคุณไม่จำเป็นต้องเปิดใช้งานสิ่งนี้เนื่องจาก CloudFront จะบีบอัดคำตอบสำหรับคุณนอกกรอบ |
| การรับรองความถูกต้อง | object | undefined | วัตถุการรับรองความถูกต้องสำหรับใช้กับการตรวจสอบขั้นพื้นฐาน (มีให้จาก 1.19.0-alpha.3) รองรับการรวมชื่อผู้ใช้/รหัสผ่านเดียวเท่านั้นในตอนนี้และถูก inlined ใน plaintext ในตัวจัดการแลมบ์ดา คุณต้องส่งต่อส่วนหัว Authorization สำหรับพฤติกรรม CloudFront เช่น defaults api/* และ _next/data/_ หมายเหตุ: นี่เป็นวิธีที่ง่ายในการปกป้องสภาพแวดล้อมเช่นไซต์การพัฒนา/ทดสอบไม่แนะนำให้ใช้การผลิต |
| Authentication.username | string | undefined | ชื่อผู้ใช้สำหรับการตรวจสอบขั้นพื้นฐาน |
| เปิดใช้งาน 3 | boolean | true | ไม่ว่าจะเปิดใช้งานการเร่งการถ่ายโอน S3 หรือไม่ สิ่งนี้อาจเป็นประโยชน์ในการปิดการใช้งานเนื่องจากบางภูมิภาค AWS ไม่รองรับ ดูการอ้างอิง |
| removeoldlambdaversions | boolean | false | การสนับสนุนขั้นพื้นฐานสำหรับการลบเวอร์ชันแลมบ์ดาเก่าหลังจากปรับใช้เพื่อให้แน่ใจว่า หากตั้งค่าเป็น TRUE ทุกครั้งที่คุณปรับใช้มันจะลบเวอร์ชันเก่ากว่า 50 เวอร์ชัน (เริ่มต้นจากเก่าที่สุด) ของแลมบ์ดาทั้งหมดที่ไม่ได้ปรับใช้/ทำซ้ำ หากคุณต้องการกลยุทธ์ที่ซับซ้อนมากขึ้นขอแนะนำให้เขียนสคริปต์ของคุณเองเพื่อลบเวอร์ชันเก่า |
อินพุตที่กำหนดเองสามารถกำหนดค่าได้เช่นนี้:
myNextApp :
component : " @sls-next/serverless-component@{version_here} "
inputs :
bucketName : my-bucket(การทดลอง) - ต้องใช้งานมากขึ้นเพื่อนำสิ่งนี้สร้างขึ้นสู่ความเร็วและนำตรรกะที่ไม่มีเซิร์ฟเวอร์มาใช้ซ้ำ เป็นผลให้โครงสร้างมีแนวโน้มที่จะปรับ/เปลี่ยนแปลงตาม
เอกสารสามารถพบได้ที่นี่
ในขณะที่เรากำลังเลียนแบบตรรกะการกำหนดเส้นทางต่อไป 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
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับส่วนประกอบที่ไม่มีเซิร์ฟเวอร์ไปที่นี่
Handler API และแพ็คเกจตัวจัดการเริ่มต้นจะถูกปรับใช้แยกต่างหาก แต่แต่ละชุดมีขีด จำกัด ของซิป 50 MB หรือ 250 MB ที่ไม่บีบอัดต่อ AWS - ดูที่นี่และที่นี่ โดยการออกแบบปัจจุบันมีเพียงหนึ่งแลมบ์ดา@edge สำหรับเส้นทางหน้าทั้งหมดและ Lambda@edge หนึ่งเส้นทางสำหรับเส้นทาง API ทั้งหมด สิ่งนี้อาจนำไปสู่ปัญหาขนาดรหัสโดยเฉพาะอย่างยิ่งหากคุณมีเส้นทาง API จำนวนมากหน้า SSR ฯลฯ
หากคุณกำลังพบปัญหาขนาดรหัสโปรดลองทำดังต่อไปนี้:
ปรับขนาดรหัสของคุณให้เหมาะสม: ลด # การพึ่งพาในหน้า SSR และเส้นทาง API ของคุณมีหน้า SSR น้อยลง (เช่นอย่าใช้ getInitialProps() หรือ getServerSideProps() )
minify รหัสตัวจัดการเองโดยใช้อินพุต minifyHandlers สิ่งนี้จะลดขนาดตัวจัดการจาก ~ 500 kb เป็น ~ 200 kb
minify/ลดรหัสฝั่งเซิร์ฟเวอร์ของคุณโดยใช้ TERSER โดยเพิ่มการกำหนดค่า WebPack ต่อไปนี้ไปยัง next.config.js ของคุณ มันใช้ตัวแปรสภาพแวดล้อม 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 ทั้งหมดที่ใช้สำหรับหน้าคงที่ prerendering จะถูกลบออกจากชุดมัดโดยอัตโนมัติ อย่างไรก็ตามหากคุณใช้เส้นทาง API เราจะไม่ลบเส้นทางเนื่องจากอาจใช้สำหรับโหมดตัวอย่าง ไม่มีวิธีการอย่างเป็นทางการ/ไม่แฮ็กในการระบุและลบไฟล์ JS เหล่านี้ที่ไม่ได้ใช้ในโหมดดูตัวอย่างแม้ว่าจะใช้เส้นทาง API แต่เราสามารถเพิ่มอินพุตใหม่เพื่อแยกด้วยตนเองหากจำเป็น
useServerlessTraceTarget ใน serverless.yml สิ่งนี้จะทำให้ next.js ไม่รวมการพึ่งพาในแต่ละหน้า (แทนที่จะสร้างหน้าเบา) จากนั้น serverless-next.js จะอ้างอิงชุดการพึ่งพาครั้งเดียวใน node_modules สิ่งนี้น่าจะเป็นเพราะปัญหาขนาดโค้ด Lambda@Edge (ดูด้านบนสำหรับโซลูชันที่เป็นไปได้ปัญหา GitHub ที่เกี่ยวข้อง) หรือหากคุณมีความเร็วในการอัปโหลดเครือข่ายที่ช้าและ/หรือพยายามปรับใช้แพ็คเกจแลมบ์ดาขนาดใหญ่
ในกรณีที่สองแพ็คเกจ aws-sdk NPM ที่ใช้มีการหมดเวลาเริ่มต้น 120 วินาที ตอนนี้ไม่สามารถกำหนดค่าได้ แต่เราอาจรองรับการหมดเวลานานขึ้นในอนาคตอันใกล้ (คล้ายกับ Serverless/Serverless#937 ซึ่งใช้กับ Framework Serverless เท่านั้นไม่ใช่ส่วนประกอบที่ไม่มีเซิร์ฟเวอร์)
โดยค่าเริ่มต้น CloudFront จะตั้งส่วนหัว Host เป็นชื่อโฮสต์ S3 Origin คุณต้องส่งต่อส่วนหัว Host ไปยังจุดกำเนิด ดูตัวอย่างด้านล่างสำหรับการส่งต่อสำหรับพฤติกรรมแคช api/* ของคุณ:
myNextApplication :
component : " @sls-next/serverless-component@{version_here} "
inputs :
cloudfront :
api/* :
forward :
headers : [Host] ผู้ใช้ควรใช้ส่วนประกอบนี้แทน serverless-plugin ส่วนประกอบนี้ถูกสร้างและออกแบบโดยใช้บทเรียนที่เรียนรู้จากปลั๊กอินที่ไม่มีเซิร์ฟเวอร์
ดู examples/dynamodb-crud สำหรับแอปพลิเคชัน TODO ตัวอย่างที่โต้ตอบกับ DynamoDB คุณสามารถค้นหารายการตัวอย่างทั้งหมดได้ที่นี่
น่าเสียดายเนื่องจากส่วนประกอบที่ไม่มีเซิร์ฟเวอร์ทำงานได้ (อย่างน้อยรุ่นเบต้า) สถานะการปรับใช้จำเป็นต้องซิงค์นอกคำสั่งหลัก serverless หลัก ดังนั้นคุณสามารถลองใช้โซลูชันต่อไปนี้:
.serverless แม้ว่าจะไม่แนะนำเพราะมันใช้งานได้ไม่ดีสำหรับหลายขั้นตอน.serverless ดูตัวอย่างที่นี่ที่นี่ (ใช้ไฟล์ serverless.yml หลายไฟล์) หรือที่นี่ (GitHub Actions-based ใช้ไฟล์ serverless.yml หลายไฟล์)distributionId CloudFront เพื่อระบุการกระจาย CloudFront ที่มีอยู่เพื่อปรับใช้ในอนาคตเราจะมองหาการปรับปรุงสิ่งนี้โดยการรวมการจัดการขั้นตอนที่เหมาะสมเข้ากับส่วนประกอบของตัวเอง
โครงการนี้เริ่มต้นโดยผู้เขียนต้นฉบับเมื่อส่วนประกอบ Serverless อยู่ในเบต้าและโชคไม่ดีที่ส่วนประกอบ GA ได้รับการปล่อยตัวหลังจากนั้นไม่นาน แต่สิ่งนี้เพิ่มขึ้นมากขึ้นเรื่อย ๆ โดยมีองค์ประกอบย่อยหลายรายการที่นำเข้ามาในโมโนโพรนี้เนื่องจากพวกเขาไม่ได้รับการดูแลโดย Serverless และจากนั้นมันก็ยากที่จะอัพเกรด
มีแผนที่จะอัพเกรดเป็นส่วนประกอบ GA แต่มันถูกระงับไว้ด้วยเหตุผลสองสามข้อ:
ขณะนี้เรากำลังมองหาโซลูชั่น IAC ที่เหมาะสม (เช่น CDK สำหรับ Terraform, CDK, Pulumi ฯลฯ ) เพื่อแก้ไขปัญหานี้และเพื่อลดภาระในการรักษาตรรกะการปรับใช้ที่ซับซ้อนเพื่อให้เราสามารถมุ่งเน้นไปที่ประสบการณ์นักพัฒนา
ใช่! ตัวบล็อกหลักคือตรรกะการกำหนดเส้นทางถัดไปของ JS ที่เคยเป็นคู่กับ Lambda@Edge/Cloudfront Logic อย่างไรก็ตามเราได้ทำให้ตรรกะหลักส่วนใหญ่ (ลงในแพ็คเกจ @sls-next/core ) เพื่อให้สามารถนำกลับมาใช้ใหม่ในแพลตฟอร์มอื่น ๆ ได้เพียงแค่สร้างตัวจัดการการห่อหุ้มใช้ไคลเอนต์เฉพาะแพลตฟอร์ม (เช่นเพื่อดึงหน้า หากคุณเป็นผู้สังเกตการณ์คุณจะสังเกตเห็นแพ็คเกจใหม่ในขณะนี้ในงานสำหรับการปรับใช้ Lambda ผ่าน API Gateway: https://github.com/serverless-nextjs/serverless-next.js/tree/master/packages/libs/lambda แพลตฟอร์มอื่น ๆ เช่น Azure และ Google Cloud ควรติดตามในเร็ว ๆ นี้
us-east-1 ฉันจะปรับใช้ไปยังภูมิภาคอื่นได้อย่างไร Serverless next.js ไม่มี ภูมิภาค โดยการออกแบบแอปพลิเคชัน serverless-next.js จะถูกปรับใช้ทั่วโลกไปยังทุกตำแหน่ง Cloudfront Edge แลมบ์ดาอาจดูเหมือนว่าจะถูกนำไปใช้กับ 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 เฟรมเวิร์ก Serverless ดูเหมือนว่าจะแก้ไขได้เพียงแค่ ${env.VARIABLE}
ดูเหมือนว่าจะเป็นข้อผิดพลาดในส่วนประกอบที่ไม่มีเซิร์ฟเวอร์ - อาจเป็นเพราะไม่ได้ใช้เวอร์ชัน GA ล่าสุดซึ่งอาจได้รับการแก้ไข (นี่ยังอยู่ในส่วนประกอบเบต้าโชคไม่ดี) สำหรับตอนนี้วิธีแก้ปัญหาคือ:
serverless.yml ก่อนจากนั้น concatenate: 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 ได้คุณจะต้องตั้งค่าการกระจาย Cloudfront ด้วยถังเปลี่ยนเส้นทาง S3 เป็นจุดกำเนิด ในที่สุดคุณจะต้องสร้าง "A" ในเส้นทาง 53 ด้วยการกระจาย CloudFront ที่สร้างขึ้นใหม่เป็นเป้าหมายนามแฝง
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 ที่ส่งคืนโดย Handler ขอ Origin Request ดูที่: https://docs.aws.amazon.com/amazoncloudfront/latest/developerguide/lambda-generating-http-responses-in-requests.html#lambda-generating-http-responses-errors น่าเสียดายที่อาจไม่มีวิธีแก้ปัญหาอื่นนอกจากพยายามทำให้แน่ใจว่าคำตอบของคุณจะเล็กลง
ตรวจสอบให้แน่ใจว่าคุณได้รับส่วนหัว Accept-Language ผ่านการกำหนดค่า CloudFront, otherewise ไม่สามารถกำหนดภาษาที่ผู้ใช้เข้าใจและ/หรือชอบได้ โดยค่าเริ่มต้นจะถูกส่งต่อ แต่ถ้าคุณแทนที่ด้วยการกำหนดค่าของคุณเองคุณควรเพิ่มกลับ
หากคุณใช้ไลบรารีของบุคคลที่สาม (เฉพาะ next-i18next นี้) และใช้เส้นทางเริ่มต้นไฟล์บางไฟล์อาจต้องถูกคัดลอกไปยังไดเรกทอรี Lambda ส่วนประกอบนี้จะพยายามตรวจจับไฟล์เริ่มต้นและคัดลอกให้คุณ อย่างไรก็ตามหากคุณมีการกำหนดค่าที่กำหนดเองคุณอาจต้องเขียน postBuildCommands ของคุณเองเพื่อคัดลอกไฟล์ ฯลฯ
อ้างถึง readMe สำหรับข้อมูลเพิ่มเติมและคำเตือน
คุณสามารถเปิดปัญหาใหม่ได้ที่นี่ หากโพสต์ปัญหาโปรดติดตามการดีบักวิกิก่อนสำหรับเคล็ดลับที่มีประโยชน์บางอย่างและพยายามรวมข้อมูลให้มากที่สุดเพื่อทำซ้ำปัญหา
หากคุณกำลังรายงานช่องโหว่ด้านความปลอดภัยโปรดปฏิบัติตามนโยบายความปลอดภัยแทน
Please note that there is only one core maintainer right now (@dphang), and a handful of community contributors, who all contribute to this library in their free time. So we hope you understand that our response is best-effort and may take several days, or more. 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.
Become a financial contributor and help us sustain our community. [มีส่วนช่วย]
Support this project with your organization. โลโก้ของคุณจะปรากฏขึ้นที่นี่พร้อมลิงค์ไปยังเว็บไซต์ของคุณ [มีส่วนช่วย]
