serverless next.js
v3.7.0
Komponen nol konfigurasi Next.js 10/11 Serverless Component untuk AWS Lambda@Edge AMBUT UNTUK Parity Fitur Lengkap.
Harap tinjau fitur untuk daftar fitur yang saat ini didukung.
️ Readme ini mencerminkan perubahan terbaru pada cabangmaster. Ini mungkin atau mungkin belum dipublikasikan ke rilislatest(stabil) ataualphadi NPM. Silakan pergi ke rilis, temukan versi@sls-next/serverless-componentyang Anda gunakan, dan buka ReadMe untuk rilis itu untuk informasi yang lebih akurat. Jika suatu fitur terdaftar dalam ReadMe ini tetapi tidak berfungsi, pertama -tama coba upgrade ke rilisalphaterbaru di NPM.
Ini saat ini menggunakan komponen tanpa server beta (bukan versi GA) karena proyek dimulai sebelum GA. Kami sedang mengerjakan ulang bagaimana penyebaran akan bekerja di masa depan dan mengeksplorasi solusi IAC yang lebih baik seperti CDK, CDK untuk Terraform, dll. Dan akan membuat pengumuman sebelum akhir tahun pada pembaruan apa pun.
Karena Next.js 8.0, Mode Serverless diperkenalkan yang menyediakan API tingkat rendah baru yang dapat digunakan oleh proyek seperti ini untuk digunakan ke penyedia cloud yang berbeda. Namun, Next.js tidak memberikan logika perutean tanpa server tanpa, maka mengapa proyek ini diperlukan untuk mengisi celah. Visi jangka panjangnya adalah untuk memungkinkan Anda untuk menjadi tuan rumah swadaya dengan berbagai awan, dimulai dengan AWS.
Proyek ini adalah versi yang lebih baik dari plugin tanpa server yang berfokus pada mengatasi masalah inti seperti dukungan 9 berikutnya, pengalaman pengembangan yang lebih baik, batas sumber daya CloudFormation 200 dan kinerja.
Ada sedikit atau tidak ada konfigurasi yang diperlukan. Anda dapat memperluas default berdasarkan kebutuhan aplikasi Anda.
Pengguna komponen ini harus dapat menggunakan alat pengembangan selanjutnya.js, alias next dev . Ini adalah tugas komponen untuk menggunakan aplikasi Anda memastikan paritas dengan semua fitur berikutnya yang kita kenal dan cintai. Kami mencoba meniru semua atau sebagian besar logika perutean dan sisi server dari Next.js dan mengoptimalkannya untuk lingkungan tanpa server. Di bawah ini Anda dapat menemukan daftar fitur yang saat ini didukung.
Dengan arsitektur yang disederhanakan dan tidak ada penggunaan CloudFormation, tidak ada batasan berapa banyak halaman yang dapat Anda miliki dalam aplikasi Anda, ditambah waktu penyebaran sangat cepat! dengan pengecualian waktu perambatan cloudfront tentu saja.
Karena kami meniru logika perutean berikutnya.js, sayangnya kami tidak selalu memiliki paritas penuh. Berikut ini menunjukkan semua fitur yang didukung atau fitur yang direncanakan. Jika kotak centang dicentang, itu berarti fitur tersebut didukung. Kalau tidak, kemungkinan belum didukung atau saat ini dalam tahap perencanaan atau implementasi. Silakan merujuk ke deskripsi item untuk detail spesifik.
Perhatikan bahwa beberapa fitur mungkin hanya pada versi alpha terbaru. Jika suatu fitur terdaftar sebagai didukung tetapi tidak bekerja pada tag latest , kemungkinan besar ada di tag alpha . Jika Anda bisa, tolong bantu kami menguji perubahan alpha terbaru dan mengirimkan laporan bug jika Anda menemukan masalah. Terima kasih!
Apakah ada fitur yang Anda inginkan tetapi belum didukung? Harap buka masalah baru untuk memberi tahu kami!
/_next/* disajikan dari cloudfront. getStaticProps . getServerSideProps . getStaticPaths . _next/static/* dan static/* , karena perilaku cache itu tidak memiliki penangan lambda yang melekat padanya. Perhatikan bahwa yang baru has format pencocokan (https://nextjs.org/docs/api-reference/next.config.js/redirects#header-cookie-and-query-catching) belum didukung. _next/static/* dan static/* , karena perilaku cache itu tidak memiliki penangan lambda yang melekat padanya. Perhatikan bahwa yang baru has format pencocokan (https://nextjs.org/docs/api-reference/next.config.js/redirects#header-cookie-and-query-catching) belum didukung. _next/static/* dan static/* , karena perilaku cache itu tidak memiliki penangan lambda yang melekat padanya. Perhatikan bahwa yang baru has format pencocokan (https://nextjs.org/docs/api-reference/next.config.js/redirects#header-cookie-and-query-catching) belum didukung. next-i18next . Pertama, pastikan Anda memiliki node.js 12+ yang diinstal pada mesin penyebaran karena semua kode sekarang ditranspilasi ke ES2019. Tambahkan aplikasi Anda berikutnya ke 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 Jika Anda menentukan @sls-next/serverless-component dalam file serverless.yml Anda, jangan tambahkan @sls-next/serverless-component ke file package.json Anda, itu tidak digunakan dan hanya versi dalam file serverless.yml yang digunakan, yang ditarik oleh server dari NPM dengan sendirinya. Jika Anda tidak menentukan versi, itu akan menggunakan tag latest , yang mengacu pada versi stabil terbaru di sini (yaitu bukan versi alpha).
Anda juga dapat mengarahkannya ke instalasi lokal, misalnya jika Anda ingin versi menggunakan package.json .
Dalam hal ini, konfigurasikan yang berikut:
# serverless.yml
myNextApplication :
component : " ./node_modules/@sls-next/serverless-component "Kemudian atur kredensial AWS Anda sebagai variabel lingkungan:
AWS_ACCESS_KEY_ID=accesskey
AWS_SECRET_ACCESS_KEY=sshhhDan cukup menyebarkan:
$ serverlessJika Anda memiliki masalah yang digunakan karena versi tanpa server baru, cobalah untuk menyematkan versi tertentu misalnya 2.72.2. Lihat #2320 (komentar)
[Alpha-mungkin buggy] Anda juga dapat menggunakan menggunakan npx @sls-next/serverless-patched (atau serverless-patched jika Anda menginstalnya secara lokal), yang merupakan versi tambalan dari serverless yang memperbaiki beberapa masalah dengan menambal dengan debur yang mendasari @serverless/cli : 1) Continuous "Menyerahkan" Pesan yang Dibuat dengan Devig yang Diberi Devi. (2) Menangani Silent Next.js Membangun Kegagalan.
Ini juga disarankan untuk menambahkan --debug flag untuk mendapatkan log yang lebih berguna dari apa yang terjadi di balik layar.
Jangan mencoba menggunakan dengan menjalankan serverless deploy , hanya menggunakan serverless
Dalam kebanyakan kasus Anda tidak ingin menggunakan domain distribusi CloudFront untuk mengakses aplikasi Anda. Sebaliknya, Anda dapat menentukan nama domain khusus.
Anda dapat menggunakan nama domain apa pun tetapi Anda harus menggunakan AWS Route53 untuk hosting DNS Anda. Untuk memigrasikan catatan DNS dari domain yang ada, ikuti instruksi di sini. Persyaratan untuk menggunakan nama domain khusus:
mydomain.com ) dengan satu set nama server.Komponen serverless next.js akan secara otomatis menghasilkan sertifikat SSL dan membuat catatan baru untuk menunjuk ke distribusi cloudFront Anda.
# 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" Anda juga dapat mengonfigurasi subdomain :
# serverless.yml
myNextApplication :
component : " @sls-next/serverless-component@{version_here} "
inputs :
domain : ["sub", "example.com"] # [ sub-domain, domain ] Untuk menentukan input CloudFront Anda sendiri, cukup tambahkan input AWS-Cloudfront di bawah 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 : val2Ini sangat berguna untuk caching salah satu halaman Anda berikutnya di lokasi Cloudfront's Edge. Lihat ini untuk contoh aplikasi dengan konfigurasi cache khusus. Anda juga dapat memperbarui distribusi CloudFront yang ada menggunakan input CloudFront khusus.
Halaman yang diberikan secara statis (yaitu halaman HTML yang diunggah ke S3) memiliki set kontrol cache berikut:
cache-control: public, max-age=0, s-maxage=2678400, must-revalidate
s-maxage memungkinkan CloudFront untuk menyimpan halaman-halaman di lokasi tepi selama 31 hari. max-age=0 dalam kombinasi dengan must-revalidate memastikan browser tidak pernah men-cache halaman statis. Ini memungkinkan CloudFront untuk mengendalikan penuh caching TTL. Pada setiap penyebaran, pembatalan /* dibuat untuk memastikan pengguna mendapatkan konten segar.
Secara default, format gambar umum ( gif|jpe?g|jp2|tiff|png|webp|bmp|svg|ico ) di bawah /public atau /static memiliki kebijakan Cache-Control satu tahun yang diterapkan ( public, max-age=31536000, must-revalidate ). Anda dapat menyesuaikan value header Cache-Control dan regex dari file mana yang akan test , dengan 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 harus berupa kebijakan dan test Cache-Control yang valid harus menjadi regex yang valid dari jenis file yang ingin Anda uji. Jika Anda tidak ingin browser cache aset dari direktori publik, Anda dapat menonaktifkan ini:
myNextApplication :
component : " @sls-next/serverless-component@{version_here} "
inputs :
publicDirectoryCache : falseSecara default fungsi lambda@edge dijalankan menggunakan awslambdabasicexecutionrole yang hanya memungkinkan mengunggah log ke cloudwatch. Jika Anda memerlukan izin di luar ini, seperti misalnya akses ke DynamoDB atau sumber daya AWS lainnya, Anda akan memerlukan kebijakan khusus atau peran Anda sendiri 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 "Pastikan Anda menambahkan izin log CloudWatch ke kebijakan atau peran khusus Anda. Contoh Kebijakan Minimum 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 " ]
}
]
} Peran harus mencakup hubungan kepercayaan dengan lambda.amazonaws.com dan edgelambda.amazonaws.com .
Catatan : Tentukan bucketName dan berikan izin untuk mengakses ember itu melalui policy atau roleArn sehingga default dan API lambdas dapat mengakses sumber daya statis.
Daftar lengkap tindakan AWS yang diperlukan untuk penempatan:
"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"
Lambdas default , API , dan gambar (untuk Optimasi Gambar Next.js) Lambdas akan diberikan memori 512MB secara default. Nilai ini dapat diubah dengan menetapkan angka ke input memory
# serverless.yml
myNextApplication :
component : " @sls-next/serverless-component@{version_here} "
inputs :
memory : 1024 Nilai untuk default , API , dan gambar lambdas dapat ditentukan secara terpisah dengan menetapkan memory ke objek seperti itu:
# serverless.yml
myNextApplication :
component : " @sls-next/serverless-component@{version_here} "
inputs :
memory :
defaultLambda : 1024
apiLambda : 2048
imageLambda : 2048Pola yang sama dapat diikuti untuk menentukan runtime node.js (nodejs14.x secara default):
# 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 runtimesDemikian pula, batas waktu secara default adalah 10 detik. Untuk menyesuaikan Anda bisa:
# serverless.yml
myNextApplication :
component : " @sls-next/serverless-component@{version_here} "
inputs :
timeout :
defaultLambda : 20
apiLambda : 15
imageLambda : 15Perhatikan batas waktu maksimum yang diizinkan untuk lambda@edge adalah 30 detik. Lihat https://docs.aws.amazon.com/amazoncloudfront/latest/deverdingerguide/lambda-requirements-limits.html
Anda juga dapat mengatur nama khusus untuk default , API , dan gambar lambdas - jika tidak default diatur oleh komponen tanpa server AWS -Lambda ke ID sumber daya:
# serverless.yml
myNextApplication :
component : " @sls-next/serverless-component@{version_here} "
inputs :
name :
defaultLambda : fooDefaultLambda
apiLambda : fooApiLambda
imageLambda : fooImageLambdaAda lambda regenerasi keempat, yang dapat dikonfigurasi dengan cara yang sama dan digunakan untuk regenerasi statis tambahan. Namun, itu tidak menggunakan lamda@edge dan dapat, misalnya, memiliki pengaturan waktu yang lebih lama.
Empat perilaku cache dibuat di CloudFront.
Dua _next/* pertama dan static/* meneruskan permintaan ke S3.
Yang ketiga dikaitkan dengan fungsi Lambda yang bertanggung jawab untuk menangani tiga jenis permintaan.
Halaman Sisi Server yang Diberikan. Halaman apa pun yang mendefinisikan metode getInitialProps akan diberikan pada level ini dan responsnya segera dikembalikan kepada pengguna.
Halaman yang dioptimalkan secara statis. Permintaan ke halaman yang telah dikompilasi sebelumnya oleh HTML diteruskan ke S3.
Sumber Daya Publik. Permintaan ke sumber daya level root seperti /robots.txt , /favicon.ico , /manifest.json , dll. Ini diteruskan ke S3.
Alasan mengapa 2. dan 3. Harus melalui lambda@edge pertama adalah karena rute tidak sesuai dengan pola seperti _next/* atau static/* . Juga, satu perilaku cache per rute adalah ide yang buruk karena CloudFront hanya memungkinkan 25 per distribusi.
Perilaku cache keempat menangani API berikutnya meminta api/* .
| Nama | Jenis | Nilai default | Keterangan |
|---|---|---|---|
| menyebarkan | boolean | true | Saat diatur ke false, itu tidak akan menggunakan aplikasi ke penyedia (misalnya AWS). |
| domain | Array | null | Misalnya ['admin', 'portal.com'] |
| DomainRedirects | object | {} | Menambahkan pengalihan tingkat domain di tepi menggunakan pengalihan 308. Tentukan objek nama domain -> Redirect Destination dengan protokol. Misalnya, www.example.com: https://example.com . Lihat di sini untuk informasi lebih lanjut. |
| Bucketname | string | null | Nama ember khusus di mana aset statis disimpan. Secara default diotogenerasi. |
| Bucketregion | string | null | Wilayah tempat Anda ingin menjadi tuan rumah ember S3 Anda. Pastikan ini secara geografis lebih dekat dengan sebagian besar pengguna akhir Anda untuk mengurangi latensi ketika CloudFront Proxy permintaan ke S3. |
| sucketags | object | undefined | Tag ember khusus untuk disetel untuk ember Anda. Jika tidak terdefinisi, komponen tidak akan memperbarui tag apa pun. Jika diatur ke objek kosong, itu akan menghapus semua tag. |
| nextConfigdir | string | ./ | Direktori di mana aplikasi Anda next.config.js file. Input ini berguna ketika serverless.yml tidak berada di direktori yang sama dengan aplikasi berikutnya.Catatan: nextConfigDir harus diatur jika next.config.js distDir digunakan |
| nextstaticdir | string | ./ | Jika direktori static atau public Anda bukan anak langsung dari nextConfigDir , ini diperlukan |
| keterangan | string | *lambda-type*@Edge for Next CloudFront distribution | Deskripsi yang akan digunakan untuk kedua lambdas. Perhatikan bahwa "(API)" akan ditambahkan ke deskripsi API Lambda. |
| kebijakan | string|object | arn:aws:iam::aws:policy/service-role/AWSLambdaBasicExecutionRole | Kebijakan ARN atau inline yang akan ditugaskan ke kedua Lambdas. |
| rolearn | string|object | batal | ARN peran yang akan ditugaskan ke kedua lambdas. |
| runtime | string|object | nodejs14.x | Saat diberi nilai, baik lambdas default dan API akan diberi runtime yang ditentukan dalam nilai. Saat ditugaskan ke objek, nilai untuk default dan API lambdas dapat didefinisikan secara terpisah |
| ingatan | number|object | 512 | Saat diberi nomor, baik lambdas default dan API akan diberi memori dari nilai itu. Saat ditugaskan ke objek, nilai untuk default dan API lambdas dapat didefinisikan secara terpisah |
| tag | object | undefined | Tag untuk menetapkan ke lambda. Jika tidak terdefinisi, komponen tidak akan memperbarui tag apa pun. Jika diatur ke objek kosong, itu akan menghapus semua tag. |
| Batas waktu | number|object | 10 | Sama seperti di atas |
| pawang | string | index.handler | Saat ditetapkan nilai, timpa penangan fungsi default untuk memungkinkan konfigurasi. Salinan handler.js dalam rute ke folder Lambda. Pawang Anda masih harus memanggil default-handler setelah itu atau fungsi Anda tidak akan berfungsi dengan next.js |
| nama | object | / | Nama untuk semua lambdas dapat didefinisikan secara eksplisit |
| membangun | boolean|object | true | Ketika True membangun dan menggunakan aplikasi, ketika .serverless_nextjs menganggap aplikasi telah dibangun dan menggunakan direktori .next di nextConfigDir untuk digunakan. Jika suatu objek dilewatkan build memungkinkan untuk mengesampingkan skrip apa yang dipanggil dan dengan argumen apa. |
| build.cmd | string | node_modules/.bin/next | Bangun perintah, Anda dapat melewati perintah no-op (misalnya true atau : dalam sistem berbasis unix) yang kemudian akan melewatkan selanjutnya.js build |
| Build.Args | Array|string | ['build'] | Argumen untuk diteruskan ke pembangunan |
| build.cwd | string | ./ | Mengesampingkan direktori kerja saat ini |
| Build.Enabled | boolean | true | Sama seperti melewati build:false tetapi dari dalam konfigurasi |
| build.env | object | {} | Tambahkan variabel lingkungan tambahan ke skrip |
| Build.PostBuildCommands | Array | [] | Perintah apa pun untuk menjalankan post-build dan pra-lebih. Misalnya, Anda dapat menjalankan kode khusus apa pun di direktori .serverless_nextjs misalnya Anda dapat menyalin file tambahan ke lambda: lihat #767 (komentar) untuk contoh untuk next-18n . Hanya berlaku selama pelaksanaan perintah serverless . |
| build.cleanupdotNext | boolean | true | Apakah akan membersihkan direktori .next sebelum menjalankan langkah build |
| build.assetignorepatterns | string[] | [] | Pola Glob untuk diabaikan ketika menemukan file untuk disalin dari _next/static, publik, direktori statis. |
| build.usev2handler | boolean | false | Eksperimental mengatur ini ke true untuk menggunakan penangan v2 yang mulai menggunakan penangan yang digenerisasi. Catatan: Ini memiliki fungsionalitas separateApiLambda dan disableOriginResponseHandler sehingga tidak boleh digunakan bersama. Juga, itu belum sepenuhnya dioptimalkan dalam hal ukuran kode, tetapi harus tetap berkinerja. Di masa depan, kami kemungkinan akan menggunakan mode ini secara default. |
| Cloudfront | object | {} | Input untuk diteruskan ke AWS-cloudfront |
| Certificatearn | string | `` | Sertifikat spesifik ARN untuk digunakan untuk distribusi CloudFront. Bermanfaat jika Anda memiliki sertifikat Wildcard SSL yang ingin Anda gunakan. Ini saat ini hanya berfungsi bersama -sama dengan input domain . Silakan periksa konfigurasi cloudFront khusus untuk cara menentukan certificate tanpa perlu menggunakan input domain (perhatikan bahwa hal itu akan mengganti sertifikat apa pun karena input domain). |
| Domaintype | string | "both" | Bisa menjadi salah satu: "apex" - domain apex saja, jangan membuat subdomain www. "www" - domain www saja, jangan membuat subdomain apex. "both" - Buat domain WWW dan Apex ketika salah satu disediakan. |
| domainminimumprotocolversion | string | "TLSv1.2_2018" | Dapat menjadi salah satu: "SSLv3", "TLSv1", "TLSv1.1_2016", "TLSv1.2_2018", "TLSv1.2_2019", "TLSv1.2_2021" or "TLSv1_2016" . Lihat Referensi. |
| PublicDirectoryCache | boolean|object | true | Kustomisasi Kebijakan Caching Aset Folder public / static . Menetapkan objek dengan value dan/atau test memungkinkan Anda menyesuaikan kebijakan caching dan jenis file yang di -cache. Menetapkan cacat cacat palsu |
| UseRerSlessTracetarget | boolean | false | Gunakan target eksperimental-server-jejak untuk membangun aplikasi Anda berikutnya. Ini adalah target build yang sama yang digunakan Vercel sekarang. Lihat RFC ini untuk detailnya. Catatan: Saat menggunakan ini, Anda mungkin perlu mengatur variabel NODE_ENV ke production . |
| Minifyhandlers | boolean | false | Gunakan penangan minified pre-built untuk mengurangi ukuran kode. Tidak meminimalkan penangan khusus. |
| enableHttpompresi | boolean | false | Ketika diatur ke true fungsi lambda@edge untuk permintaan SSR dan API akan menggunakan GZIP untuk mengompres respons. Perhatikan bahwa Anda tidak perlu mengaktifkan ini karena CloudFront akan menekan respons untuk Anda di luar kotak. |
| otentikasi | object | undefined | Objek otentikasi untuk digunakan dengan otentikasi dasar (tersedia dari 1.19.0-alpha.3). Ini hanya mendukung kombinasi nama pengguna/kata sandi tunggal untuk saat ini dan diinline dalam plaintext di lambda handler. Anda juga harus meneruskan header Authorization untuk perilaku CloudFront, misalnya defaults , api/* , dan _next/data/_ . Catatan: Ini dimaksudkan sebagai cara sederhana untuk melindungi lingkungan seperti situs pengembangan/pengujian, tidak disarankan untuk penggunaan produksi. |
| otentikasi.username | string | undefined | Nama pengguna untuk otentikasi dasar. |
| memungkinkan3acceleration | boolean | true | Apakah akan mengaktifkan akselerasi transfer S3. Ini mungkin berguna untuk menonaktifkan karena beberapa daerah AWS tidak mendukungnya. Lihat Referensi. |
| HapusclambdaVersions | boolean | false | Dukungan dasar untuk menghapus versi Lambda lama setelah digunakan untuk memastikan. Jika diatur ke true, setiap kali Anda menggunakannya akan secara otomatis menghapus hingga ~ 50 versi lama (mulai dari tertua) dari semua lambda yang tidak digunakan/direplikasi. Jika Anda memerlukan strategi yang lebih kompleks, disarankan untuk menulis skrip Anda sendiri untuk menghapus versi lama. |
Input khusus dapat dikonfigurasi seperti ini:
myNextApp :
component : " @sls-next/serverless-component@{version_here} "
inputs :
bucketName : my-bucket(Eksperimental) - Lebih banyak pekerjaan yang diperlukan untuk membawa konstruk ini ke kecepatan dan juga untuk menggunakan kembali beberapa logika tanpa server. Akibatnya konstruk cenderung beradaptasi/berubah sesuai.
Dokumentasi dapat ditemukan di sini.
Saat kami meniru selanjutnya.js routing logika hampir dari awal untuk mengoptimalkannya untuk lingkungan tanpa server, mungkin ada beberapa fitur yang tidak lengkap atau hilang (seperti yang disebutkan sebelumnya). Namun, kami merasa bahwa kami telah membahas sebagian besar fitur dan telah menambahkan unit yang baik dan cakupan uji ujung-ke-ujung untuk memastikan stabilitas (misalnya di 10+ suite uji ujung ke ujung). Beberapa orang menggunakan ini untuk memberi daya startup mereka, situs web pribadi, dll.
Batasan penyedia cloud juga berlaku - misalnya pada AWS lambda@edge, ada awal yang dingin, batas ukuran kode, batas ukuran respons 1 MB, dll untuk beberapa nama. Anda tentu saja juga terikat pada satu platform untuk saat ini (AWS Lambda@Edge; lebih banyak segera hadir!).
Kami juga terus meningkatkan proses penyebaran dengan mempertimbangkan solusi infrastruktur-sebagai-kode yang lebih baik dalam waktu dekat (CDK, CDK Terraform, Pulumi, dll.).
Pastikan serverless.yml Anda menggunakan format serverless-components (beta). Komponen tanpa server berbeda dari kerangka kerja tanpa server asli, meskipun keduanya dapat diakses melalui CLI yang sama.
✅ lakukan
# serverless.yml
myNextApp :
component : " @sls-next/serverless-component@{version_here} "
myTable :
component : serverless/aws-dynamodb
inputs :
name : Customers
# other componentsJangan
# serverless.yml
provider :
name : aws
runtime : nodejs10.x
region : eu-west-1
myNextApp :
component : " @sls-next/serverless-component@{version_here} "
Resources : ... Perhatikan bagaimana YAML yang benar tidak menyatakan provider , Resources , dll.
Untuk digunakan, jangan jalankan serverless deploy . Cukup jalankan serverless dan itu menyebarkan komponen Anda yang dinyatakan dalam file serverless.yml .
Untuk informasi lebih lanjut tentang komponen tanpa server, pergilah ke sini.
Paket penangan API dan pawang default dikerahkan secara terpisah, tetapi masing -masing memiliki batas 50 MB zip atau 250 MB tidak terkompresi per AWS - lihat di sini dan di sini. Dengan desain, saat ini hanya ada satu lambda@edge untuk semua rute halaman dan satu lambda@edge untuk semua rute API. Ini dapat menyebabkan masalah ukuran kode terutama jika Anda memiliki banyak rute API, halaman SSR, dll.
Jika Anda menemukan masalah ukuran kode, silakan coba yang berikut:
Optimalkan Ukuran Kode Anda: Kurangi # Dependensi di Halaman SSR Anda dan Rute API, memiliki lebih sedikit halaman SSR (yaitu tidak menggunakan getInitialProps() atau getServerSideProps() ).
Meminimalkan kode pawang itu sendiri dengan menggunakan input minifyHandlers . Ini akan mengurangi ukuran pawang dari ~ 500 kb menjadi ~ 200 kb.
Meminimalkan/Minimalkan Kode Sisi Server Anda Menggunakan Terser Dengan Menambahkan Konfigurasi Webpack berikut ke next.config.js Anda. Ini menggunakan variabel lingkungan NEXT_MINIMIZE untuk mengatakannya untuk meminimalkan kode SSR. Perhatikan bahwa ini akan meningkatkan waktu pembangunan, dan meminimalkan kode sehingga bisa lebih sulit untuk men -debug kesalahan CloudWatch.
Pertama, tambahkan terser-webpack-plugin ke dependensi Anda. Kemudian perbarui 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 ;
} ;Perhatikan bahwa jika Anda tidak menggunakan rute API apa pun, semua file JS yang digunakan hanya untuk halaman statis prerendering secara otomatis dihapus dari bundel. Namun, jika Anda menggunakan rute API, kami tidak menghapusnya karena dapat digunakan untuk mode pratinjau. Tidak ada cara resmi/tidak menyenangkan untuk mengidentifikasi dan menghapus file JS ini yang tidak digunakan dalam mode pratinjau bahkan ketika rute API digunakan. Tetapi kita dapat menambahkan input baru untuk mengecualikannya secara manual, jika diperlukan.
useServerlessTraceTarget di serverless.yml . Ini akan menyebabkan Next.js tidak menggabungkan dependensi ke dalam setiap halaman (alih-alih membuat halaman ringan) dan kemudian serverless-next.js akan merujuk satu set dependensi tunggal di node_modules . Ini kemungkinan baik karena masalah ukuran kode lambda@edge (lihat di atas untuk solusi potensial. Masalah gitub terkait) atau jika Anda memiliki kecepatan unggahan jaringan yang lambat dan/atau sedang mencoba menggunakan paket lambda besar.
Dalam kasus kedua, paket aws-sdk NPM yang digunakan memiliki batas waktu default 120 detik. Saat ini ini tidak dapat dikonfigurasi, tetapi kami dapat mendukung batas waktu yang lebih lama dalam waktu dekat (mirip dengan serverless/serverless#937, yang hanya berlaku untuk kerangka kerja tanpa server, bukan komponen tanpa server).
Secara default, CloudFront menetapkan header Host ke nama host S3 Origin. Anda perlu meneruskan header Host ke asal. Lihat contoh di bawah ini untuk meneruskannya untuk perilaku cache api/* Anda:
myNextApplication :
component : " @sls-next/serverless-component@{version_here} "
inputs :
cloudfront :
api/* :
forward :
headers : [Host] Pengguna didorong untuk menggunakan komponen ini alih-alih serverless-plugin . Komponen ini dibangun dan dirancang menggunakan pelajaran yang dipetik dari plugin tanpa server.
Lihat examples/dynamodb-crud untuk contoh aplikasi TODO yang berinteraksi dengan DynamoDB. Anda dapat menemukan daftar lengkap contoh di sini
Sayangnya, karena cara komponen tanpa server bekerja (setidaknya versi beta), status penyebaran perlu disinkronkan di luar perintah serverless utama. Jadi Anda dapat mencoba solusi berikut:
.serverless . Meskipun ini tidak disarankan karena tidak bekerja dengan baik untuk beberapa tahap..serverless , lihat contoh di sini, di sini (menggunakan beberapa file serverless.yml ), atau di sini (berbasis tindakan GitHub, menggunakan beberapa file serverless.yml ).distributionId untuk menentukan distribusi CloudFront yang ada untuk digunakan.Di masa depan, kita akan mencari untuk meningkatkan ini dengan mengintegrasikan manajemen tahap yang tepat ke dalam komponen itu sendiri.
Proyek ini dimulai oleh penulis asli ketika komponen tanpa server berada di beta, dan sayangnya komponen GA dirilis tak lama setelah itu. Tetapi ini tumbuh lebih besar dan lebih besar, dengan beberapa sub-komponen yang diimpor ke monorepo ini karena tidak dikelola oleh serverless. Dan kemudian menjadi sulit untuk ditingkatkan.
Ada rencana untuk meningkatkan ke komponen GA, tetapi ditunda karena beberapa alasan:
Kami saat ini sedang mencari solusi IAC yang tepat (seperti CDK untuk Terraform, CDK, Pulumi, dll.) Untuk mengatasi hal ini dan untuk meringankan beban mempertahankan logika penyebaran yang kompleks, sehingga kami dapat fokus pada pengalaman pengembang dan paritas fitur dengan Next.js.
Ya! Blocker utama adalah bahwa logika perutean berikutnya. Dulu sangat digabungkan dengan logika lambda@edge/cloudfront. Namun, kami telah menghasilkan sebagian besar logika inti (ke dalam paket @sls-next/core ) sehingga dapat digunakan kembali di platform lain, hanya dengan membuat pawang pembungkus, menerapkan beberapa klien khusus platform (misalnya untuk mengambil halaman, memicu regenerasi statis, dll.), Dan menciptakan penggalian. Jika Anda jeli, Anda akan memperhatikan paket baru saat ini dalam pekerjaan untuk penyebaran Lambda melalui API Gateway: https://github.com/serverless-nextjs/serverless-next.js/tree/master/packages/libs/lambda. Platform lain seperti Azure dan Google Cloud harus segera mengikuti.
us-east-1 . Bagaimana cara menggunakannya ke wilayah lain? Serverless Next.js tidak ada di wilayah . Dengan desain, aplikasi serverless-next.js akan digunakan di seluruh dunia ke setiap lokasi tepi cloudfront. Lambda mungkin terlihat seperti hanya digunakan ke us-east-1 tetapi di belakang layar, itu direplikasi ke setiap wilayah lainnya.
Lihat sampel di bawah ini untuk pengaturan build canggih yang mencakup melewati argumen tambahan dan variabel lingkungan untuk pembangunan.
# 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} Jika Anda mencoba untuk menggabungkan variabel lingkungan dengan string lain, seperti ${env.VARIABLE}-blah , kerangka kerja serverless tampaknya menyelesaikannya menjadi hanya ${env.VARIABLE} .
Tampaknya menjadi bug dalam komponen tanpa server - mungkin karena tidak menggunakan versi GA terbaru, di mana mungkin telah diperbaiki (ini masih ada di komponen beta, sayangnya). Untuk saat ini, solusi adalah:
serverless.yml terlebih dahulu, lalu concatenate: stage : ${env.STAGE}
my-app :
component : " @sls-next/[email protected] "
inputs :
domain :
- " ${stage}-front-end "
- mydomain.com Anda dapat menggunakan input domainRedirects baru, bersama dengan header Host penerusan dan domainType: both , untuk mengarahkan permintaan ke domain yang benar. Lihat Contoh Konfigurasi di bawah ini yang mengarahkan permintaan www.example.com ke 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 Semua ini terjadi di dalam penangan permintaan Lambda@Edge Origin. Harap dicatat bahwa ini tidak akan memungkinkan Anda untuk mengarahkan permintaan di _next/static/* atau /static/* , karena perilaku cache itu tidak memiliki lambda@edge handler yang terpasang pada mereka.
Jika tidak, Anda juga dapat menggunakan solusi manual menggunakan ember S3 yang diuraikan di sini. Singkatnya, Anda harus membuat ember S3 baru dan mengaturnya dengan hosting situs web statis untuk mengarahkan permintaan ke tipe subdomain yang didukung Anda (ex. "Www.example.com" atau "exampe.com"). Untuk dapat mendukung pengalihan HTTPS, Anda harus mengatur distribusi CloudFront dengan S3 Redirect Bucket sebagai asal. Akhirnya, Anda harus membuat catatan "A" di Rute 53 dengan distribusi CloudFront yang baru dibuat sebagai target alias.
build.env tidak muncul di aplikasi saya Untuk memungkinkan aplikasi Anda mengakses variabel lingkungan yang ditentukan, Anda perlu mengeksposnya melalui next.config.js sebagaimana diuraikan di sini.
Diberi serverless.yml seperti ini
myApp :
inputs :
build :
env :
API_HOST : " http://example.com "Next.config.js Anda akan terlihat seperti itu:
module . exports = {
env : {
API_HOST : process . env . API_HOST
}
} ; Anda mungkin melihat kesalahan seperti di bawah ini:
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)
Biasanya terjadi ketika ukuran respons terlalu besar. Lambda@edge saat ini memang memiliki batasan 1 MB yang dikembalikan oleh penangan permintaan asal. Lihat: https://docs.aws.amazon.com/amazoncloudfront/latest/deverdingerguide/lambda-generating-http-respons-in-requests.html#lambda-generating-http-respons-rors. Sayangnya, mungkin tidak ada solusi selain mencoba memastikan tanggapan Anda lebih kecil.
Pastikan Anda meneruskan header Accept-Language melalui konfigurasi CloudFront, yang lain tidak dapat menentukan bahasa mana yang dipahami oleh pengguna dan/atau lebih disukai. Secara default diteruskan tetapi jika Anda mengganti dengan konfigurasi Anda sendiri, Anda harus menambahkannya kembali.
Jika Anda menggunakan pustaka pihak ketiga (hanya next-i18next untuk saat ini) dan menggunakan jalur default, beberapa file mungkin perlu disalin ke direktori Lambda. Komponen ini akan mencoba mendeteksi file default dan menyalinnya untuk Anda. Namun, jika Anda memiliki konfigurasi kustom, Anda mungkin perlu menulis postBuildCommands Anda sendiri untuk menyalin file, dll.
Lihat readme untuk informasi dan peringatan lebih lanjut.
Anda dapat membuka masalah baru di sini. Jika memposting masalah, silakan ikuti wiki debugging terlebih dahulu untuk beberapa tips yang berguna, dan cobalah untuk memasukkan sebanyak mungkin informasi untuk mereproduksi masalah ini.
Jika Anda melaporkan kerentanan keamanan, silakan ikuti kebijakan keamanan sebagai gantinya.
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.
This project exists thanks to all the people who contribute. [Menyumbang].
Made with contributors-img.
Become a financial contributor and help us sustain our community. [Menyumbang]
Support this project with your organization. Your logo will show up here with a link to your website. [Menyumbang]
