Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

SSRfitur yang didukung

Bagian ini memberikan informasi tentang dukungan Amplify untuk SSR fitur.

Amplify menyediakan dukungan versi Node.js agar sesuai dengan versi Node.js yang digunakan untuk membangun aplikasi Anda.

Amplify menyediakan fitur pengoptimalan gambar bawaan yang mendukung semua SSR aplikasi. Jika Anda tidak ingin menggunakan fitur pengoptimalan gambar default, Anda dapat menerapkan pemuat pengoptimalan gambar khusus.

Dukungan versi Node.js untuk aplikasi Next.js

Saat Amplify membuat dan menerapkan aplikasi komputasi Next.js, Amplify akan menggunakan aplikasi komputasi Node.js versi runtime yang cocok dengan versi utama Node.js yang digunakan untuk membangun aplikasi.

Anda dapat menentukan Node.js versi yang akan digunakan dalam fitur penggantian paket Live di konsol Amplify. Untuk informasi selengkapnya tentang mengonfigurasi pembaruan paket langsung, lihatMenggunakan versi paket dan dependensi tertentu dalam image build. Anda juga dapat menentukan Node.js versi menggunakan mekanisme lain, seperti nvm perintah. Jika Anda tidak menentukan versi, Amplify default untuk menggunakan versi saat ini yang digunakan oleh container build Amplify.

Pengoptimalan gambar untuk SSR aplikasi

Amplify Hosting menyediakan fitur pengoptimalan gambar bawaan yang mendukung semua SSR aplikasi. Dengan optimasi gambar Amplify, Anda dapat memberikan gambar berkualitas tinggi dalam format, dimensi, dan resolusi yang tepat untuk perangkat yang mengaksesnya, sambil mempertahankan ukuran file sekecil mungkin.

Saat ini, Anda dapat menggunakan komponen Gambar Next.js untuk mengoptimalkan gambar sesuai permintaan atau Anda dapat mengimplementasikan pemuat gambar khusus. Jika Anda menggunakan Next.js 13 atau yang lebih baru, Anda tidak perlu mengambil tindakan lebih lanjut untuk menggunakan fitur pengoptimalan gambar Amplify. Jika Anda menerapkan pemuat kustom, lihat berikut ini Menggunakan topik pemuat gambar kustom.

Menggunakan pemuat gambar khusus

Jika Anda menggunakan pemuat gambar khusus, Amplify mendeteksi loader di next.config.js file aplikasi Anda dan tidak menggunakan fitur pengoptimalan gambar bawaan. Untuk informasi selengkapnya tentang pemuat kustom yang didukung Next.js, lihat dokumentasi gambar Next.js.

Amazon CloudWatch Log untuk SSR aplikasi

Amplify mengirimkan informasi tentang SSR runtime Anda ke Amazon CloudWatch Logs di Anda. Akun AWS Saat Anda menerapkan SSR aplikasi, aplikasi memerlukan peran IAM layanan yang diasumsikan Amplify saat memanggil layanan lain atas nama Anda. Anda dapat mengizinkan komputasi Amplify Hosting untuk secara otomatis membuat peran layanan untuk Anda atau Anda dapat menentukan peran yang telah Anda buat.

Jika Anda memilih untuk mengizinkan Amplify membuat IAM peran untuk Anda, peran tersebut sudah memiliki izin untuk membuat Log. CloudWatch Jika membuat IAM peran sendiri, Anda perlu menambahkan izin berikut ke kebijakan agar Amplify dapat mengakses Log Amazon CloudWatch .

logs:CreateLogStream
logs:CreateLogGroup
logs:DescribeLogGroups
logs:PutLogEvents

Untuk informasi selengkapnya tentang peran layanan, lihat Menambahkan peran layanan ke aplikasi Amplify.

Amplify dukungan Next.js 11 SSR

Jika Anda menerapkan aplikasi Next.js ke Amplify sebelum rilis komputasi Amplify Hosting pada 17 November 2022, aplikasi Anda menggunakan penyedia Amplify SSR sebelumnya, Classic (khusus Next.js 11). Dokumentasi di bagian ini hanya berlaku untuk aplikasi yang digunakan menggunakan SSR penyedia Classic (hanya Next.js 11).

Daftar berikut menjelaskan fitur spesifik yang didukung oleh SSR penyedia Amplify Classic (hanya Next.js 11).

Harga untuk SSR aplikasi Next.js 11

Saat menerapkan SSR aplikasi Next.js 11, Amplify membuat resource backend tambahan di AWS akun Anda, termasuk:

AWS Identity and Access Management izin untuk aplikasi Next.js 11 SSR

Amplify memerlukan izin AWS Identity and Access Management (IAM) untuk menerapkan aplikasi. SSR Tanpa izin minimum yang diperlukan, Anda akan mendapatkan kesalahan saat mencoba menerapkan aplikasiSSR. Untuk memberikan Amplify dengan izin yang diperlukan, Anda harus menentukan peran layanan.

Untuk membuat peran IAM layanan yang diasumsikan Amplify saat memanggil layanan lain atas nama Anda, lihat. Menambahkan peran layanan ke aplikasi Amplify Instruksi ini menunjukkan cara membuat peran yang melekat pada kebijakan AdministratorAccess-Amplify terkelola.

Kebijakan AdministratorAccess-Amplify terkelola menyediakan akses ke beberapa AWS layanan, termasuk IAM tindakan. dan harus dianggap sekuat kebijakan. AdministratorAccess Kebijakan ini memberikan lebih banyak izin daripada yang diperlukan untuk menerapkan aplikasi AndaSSR.

Disarankan agar Anda mengikuti praktik terbaik pemberian hak istimewa paling sedikit dan mengurangi izin yang diberikan untuk peran layanan. Alih-alih memberikan izin akses administrator ke peran layanan Anda, Anda dapat membuat IAM kebijakan terkelola pelanggan sendiri yang hanya memberikan izin yang diperlukan untuk menerapkan aplikasi Anda. SSR Lihat, Membuat IAM kebijakan di Panduan IAM Pengguna untuk petunjuk tentang cara membuat kebijakan yang dikelola pelanggan.

Jika Anda membuat kebijakan sendiri, lihat daftar izin minimum yang diperlukan untuk menerapkan aplikasi SSR berikut.

acm:DescribeCertificate
acm:ListCertificates
acm:RequestCertificate
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
cloudfront:UntagResource
cloudfront:ListTagsForResource
cloudfront:DeleteDistribution
iam:AttachRolePolicy
iam:CreateRole
iam:CreateServiceLinkedRole
iam:GetRole
iam:PutRolePolicy
iam:PassRole
iam:UpdateAssumeRolePolicy
iam:DeleteRolePolicy
lambda:CreateFunction
lambda:EnableReplication
lambda:DeleteFunction
lambda:GetFunction
lambda:GetFunctionConfiguration
lambda:PublishVersion
lambda:UpdateFunctionCode
lambda:UpdateFunctionConfiguration
lambda:ListTags
lambda:TagResource
lambda:UntagResource
lambda:ListEventSourceMappings
lambda:CreateEventSourceMapping
route53:ChangeResourceRecordSets
route53:ListHostedZonesByName
route53:ListResourceRecordSets
s3:CreateBucket
s3:GetAccelerateConfiguration
s3:GetObject
s3:ListBucket
s3:PutAccelerateConfiguration
s3:PutBucketPolicy
s3:PutObject
s3:PutBucketTagging
s3:GetBucketTagging
sqs:CreateQueue
sqs:DeleteQueue
sqs:GetQueueAttributes
sqs:SetQueueAttributes
amplify:GetApp
amplify:GetBranch
amplify:UpdateApp
amplify:UpdateBranch

Memecahkan masalah penerapan Next.js 11 SSR

Jika Anda mengalami masalah tak terduga saat menerapkan SSR aplikasi Classic (hanya Next.js 11) dengan Amplify, tinjau topik pemecahan masalah berikut.

Direktori keluaran aplikasi saya diganti

Direktori output untuk aplikasi Next.js yang di-deploy dengan Amplify harus diatur ke .next. Jika direktori output aplikasi Anda ditimpa, periksa file next.config.js. Untuk mengatur secara default direktori output build ke .next, hapus baris berikut dari file:

distDir: 'build'

Verifikasi bahwa direktori output diatur ke .next di pengaturan build Anda. Untuk informasi seputar melihat pengaturan build aplikasi Anda, lihat Mengonfigurasi setelan build untuk aplikasi.

Berikut contoh pengaturan build untuk aplikasi dengan baseDirectory diatur ke .next.

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Saya mendapatkan kesalahan 404 setelah menerapkan situs saya SSR

Jika Anda menerima pesan kesalahan 404 setelah men-deploy situs, masalah tersebut dapat terjadi karena direktori output Anda ditimpa. Untuk memeriksa file next.config.js dan memverifikasi direktori output build yang benar dalam spesifikasi build aplikasi Anda, ikuti langkah-langkah di topik sebelumnya, Direktori keluaran aplikasi saya diganti.

Aplikasi saya tidak memiliki aturan penulisan ulang untuk distribusi CloudFront SSR

Saat Anda menerapkan SSR aplikasi, Amplify membuat aturan penulisan ulang untuk distribusi Anda. CloudFront SSR Jika Anda tidak dapat mengakses aplikasi di browser web, verifikasi bahwa aturan CloudFront penulisan ulang ada untuk aplikasi Anda di konsol Amplify. Jika aturan tersebut tidak ada, Anda dapat menambahkannya secara manual atau men-deploy ulang aplikasi.

Untuk melihat atau mengedit aturan penulisan ulang dan pengalihan aplikasi di konsol Amplify, pilih Pengaturan aplikasi di panel navigasi, lalu pilih Penulisan ulang dan pengalihan. Screenshot berikut menunjukkan contoh aturan penulisan ulang yang Amplify buat untuk Anda saat Anda menerapkan SSR aplikasi. Perhatikan bahwa dalam contoh ini, aturan CloudFront penulisan ulang ada.

Aplikasi saya terlalu besar untuk diterapkan

Amplify membatasi ukuran SSR penerapan hingga 50 MB. Jika Anda mencoba menerapkan SSR aplikasi Next.js ke Amplify dan mendapatkan RequestEntityTooLargeException error, aplikasi Anda terlalu besar untuk diterapkan. Untuk mengatasinya, Anda dapat menambahkan kode pembersihan cache ke file next.config.js.

Berikut contoh kode di file next.config.js untuk melakukan pembersihan cache.

module.exports = {
    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
        config.optimization.splitChunks.cacheGroups = { }
        config.optimization.minimize = true;
        return config
      },
}

Build saya gagal dengan kesalahan kehabisan memori

Next.js memungkinkan Anda untuk menyimpan artefak build cache untuk meningkatkan kinerja pada build berikutnya. Selain itu, AWS CodeBuild container Amplify mengompres dan mengunggah cache ini ke Amazon S3, atas nama Anda, untuk meningkatkan performa build berikutnya. Ini dapat menyebabkan build Anda gagal dengan kesalahan kehabisan memori.

Lakukan tindakan berikut untuk mencegah aplikasi Anda melebihi batas memori selama fase build. Pertama, hapus .next/cache/**/* dari bagian cache.paths dari pengaturan build Anda. Selanjutnya, hapus variabel NODE_OPTIONS lingkungan dari file setelan build Anda. Sebagai gantinya, atur variabel NODE_OPTIONS lingkungan di konsol Amplify untuk menentukan batas memori maksimum Node. Untuk informasi selengkapnya tentang menyetel variabel lingkungan menggunakan konsol Amplify, lihat. Mengatur variabel lingkungan

Setelah melakukan perubahan ini, coba build Anda lagi. Jika berhasil, tambahkan .next/cache/**/* kembali ke bagian cache.paths dari file pengaturan build Anda.

Untuk informasi selengkapnya tentang konfigurasi cache Next.js untuk meningkatkan performa build, lihat AWS CodeBuilddi situs web Next.js.

Aplikasi saya memiliki keduanya SSR dan SSG cabang

Anda tidak dapat menerapkan aplikasi yang memiliki keduanya SSR dan SSG cabang. Jika Anda perlu menerapkan keduanya SSR dan SSG cabang, Anda harus menerapkan satu aplikasi yang hanya menggunakan SSR cabang dan aplikasi lain yang hanya SSG menggunakan cabang.

Aplikasi saya menyimpan file statis dalam folder dengan jalur yang dicadangkan

Next.js dapat melayani file statis dari folder bernama public yang disimpan di direktori root proyek. Ketika Anda men-deploy dan meng-host aplikasi Next.js dengan Amplify, proyek Anda tidak dapat menyertakan folder dengan path public/static. Amplify mengatur agar path public/static digunakan saat mendistribusikan aplikasi. Jika aplikasi Anda mencakup path ini, Anda harus mengubah nama folder static sebelum men-deploy dengan Amplify.

Aplikasi saya telah mencapai CloudFront batas

CloudFront kuota layanan membatasi AWS akun Anda hingga 25 distribusi dengan fungsi Lambda @Edge terlampir. Jika Anda melebihi kuota ini, Anda dapat menghapus CloudFront distribusi yang tidak terpakai dari akun Anda atau meminta peningkatan kuota. Untuk informasi selengkapnya, lihat Meminta peningkatan kuota di Panduan Pengguna Service Quotas.

Variabel lingkungan tidak dibawa ke fungsi Lambda

Variabel lingkungan yang Anda tentukan di konsol Amplify untuk SSR aplikasi tidak dibawa ke fungsi aplikasi. AWS Lambda Lihat,Membuat variabel lingkungan dapat diakses oleh runtime sisi server, untuk petunjuk rinci tentang cara menambahkan variabel lingkungan yang dapat Anda referensikan dari fungsi Lambda Anda.

Fungsi Lambda @Edge dibuat di Wilayah AS Timur (Virginia N.)

Saat Anda menerapkan aplikasi Next.js, Amplify membuat fungsi Lambda @Edge untuk menyesuaikan konten yang dikirimkan. CloudFront Fungsi Lambda @Edge dibuat di Wilayah AS Timur (Virginia N.), bukan Wilayah tempat aplikasi Anda digunakan. Ini adalah pembatasan Lambda @Edge. Untuk informasi selengkapnya tentang fungsi Lambda @Edge, lihat Pembatasan fungsi edge di Panduan CloudFront Pengembang Amazon.

Aplikasi Next.js saya menggunakan fitur yang tidak didukung

Aplikasi yang digunakan dengan Amplify mendukung versi utama Next.js hingga versi 11. Untuk daftar detail fitur Next.js yang didukung dan tidak didukung oleh Amplify, lihat. supported features

Ketika Anda men-deploy aplikasi Next.js baru, Amplify menggunakan versi Next.js terbaru yang didukung secara default. Jika Anda memiliki aplikasi Next.js yang sudah digunakan untuk Amplify dengan versi Next.js yang lebih lama, Anda dapat memigrasikan aplikasi ke penyedia komputasi Amplify Hosting. SSR Untuk petunjuk, silakan lihat Migrasi SSR aplikasi Next.js 11 ke komputasi Amplify Hosting.

Gambar di aplikasi Next.js saya tidak dimuat

Jika Anda menambahkan gambar ke aplikasi Next.js menggunakan next/image komponen, ukuran gambar tidak boleh melebihi 1 MB. Saat Anda menerapkan aplikasi ke Amplify, gambar yang lebih besar dari 1 MB akan menampilkan kesalahan 503. Ini disebabkan oleh batas Lambda @Edge yang membatasi ukuran respons yang dihasilkan oleh fungsi Lambda, termasuk header dan badan, hingga 1 MB.

Batas 1 MB berlaku untuk artefak lain di aplikasi Anda, seperti PDF dan file dokumen.

Wilayah yang Tidak Didukung

Amplify tidak mendukung penerapan SSR aplikasi Classic (hanya Next.js 11) di setiap wilayah AWS tempat Amplify tersedia. Klasik (hanya Next.js 11) SSR tidak didukung di Wilayah berikut: Eropa (Milan) eu-south-1, Timur Tengah (Bahrain) me-south-1, dan Asia Pasifik (Hong Kong) ap-east-1.