Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

SSRunterstützte Funktionen

Dieser Abschnitt enthält Informationen zur Unterstützung von SSR Funktionen durch Amplify.

Amplify bietet Versionsunterstützung für Node.js, die der Version von Node.js entspricht, die zum Erstellen Ihrer App verwendet wurde.

Amplify bietet eine integrierte Bildoptimierungsfunktion, die alle SSR Apps unterstützt. Wenn Sie die Standard-Bildoptimierungsfunktion nicht verwenden möchten, können Sie einen benutzerdefinierten Bildoptimierungs-Loader implementieren.

Unterstützung der Version Node.js für Apps von Next.js

Wenn Amplify eine Next.js Compute-App erstellt und bereitstellt, verwendet es die Node.js Laufzeitversion, die der Hauptversion von entspricht Node.js das wurde verwendet, um die App zu erstellen.

Sie können die angeben Node.js Version, die in der Funktion zum Überschreiben von Live-Paketen in der Amplify-Konsole verwendet werden soll. Weitere Informationen zur Konfiguration von Live-Paket-Updates finden Sie unterVerwenden bestimmter Paket- und Abhängigkeitsversionen im Build-Image. Sie können auch Folgendes angeben Node.js Version, die andere Mechanismen verwendet, wie nvm Befehle. Wenn Sie keine Version angeben, verwendet Amplify standardmäßig die aktuelle Version, die vom Amplify-Build-Container verwendet wird.

Bildoptimierung für Apps SSR

Amplify Hosting bietet eine integrierte Bildoptimierungsfunktion, die alle SSR Apps unterstützt. Mit der Bildoptimierung von Amplify können Sie qualitativ hochwertige Bilder im richtigen Format, der richtigen Größe und Auflösung für das Gerät, das auf sie zugreift, liefern und gleichzeitig die kleinstmögliche Dateigröße beibehalten.

Derzeit können Sie entweder die Bildkomponente Next.js verwenden, um Bilder bei Bedarf zu optimieren, oder Sie können einen benutzerdefinierten Bildlader implementieren. Wenn Sie Next.js 13 oder höher verwenden, müssen Sie keine weiteren Maßnahmen ergreifen, um die Bildoptimierungsfunktion von Amplify zu verwenden. Wenn Sie einen benutzerdefinierten Loader implementieren, lesen Sie das folgende Thema Verwenden eines benutzerdefinierten Image-Loaders.

Verwenden eines benutzerdefinierten Image-Loaders

Wenn Sie einen benutzerdefinierten Bildlader verwenden, erkennt Amplify den Loader in der next.config.js Datei Ihrer Anwendung und nutzt die integrierte Bildoptimierungsfunktion nicht. Weitere Informationen zu den benutzerdefinierten Loadern, die Next.js unterstützt, finden Sie in der Bilddokumentation zu Next.js.

Amazon CloudWatch Logs für SSR Apps

Amplify sendet Informationen über Ihre SSR Laufzeit an Amazon CloudWatch Logs in Ihrem AWS-Konto. Wenn Sie eine SSR App bereitstellen, benötigt die App eine IAM Servicerolle, die Amplify übernimmt, wenn Sie andere Dienste in Ihrem Namen aufrufen. Sie können entweder Amplify Hosting Compute erlauben, automatisch eine Servicerolle für Sie zu erstellen, oder Sie können eine Rolle angeben, die Sie erstellt haben.

Wenn Sie Amplify erlauben, eine IAM Rolle für Sie zu erstellen, verfügt die Rolle bereits über die Berechtigungen zum Erstellen von CloudWatch Protokollen. Wenn Sie Ihre eigene IAM Rolle erstellen, müssen Sie Ihrer Richtlinie die folgenden Berechtigungen hinzufügen, damit Amplify auf Amazon CloudWatch Logs zugreifen kann.

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

Weitere Informationen zu Servicerollen finden Sie unter Hinzufügen einer Servicerolle zu einer Amplify-App.

Unterstützung von Amplify Next.js 11 SSR

Wenn Sie vor der Veröffentlichung von Amplify Hosting Compute am 17. November 2022 eine Next.js App für Amplify bereitgestellt haben, verwendet Ihre App den vorherigen SSR Anbieter von Amplify, Classic (nur Next.js 11). Die Dokumentation in diesem Abschnitt gilt nur für Apps, die mit dem Classic-Anbieter (nur Next.js 11) bereitgestellt wurden. SSR

In der folgenden Liste werden die spezifischen Funktionen beschrieben, die der Amplify SSR Classic-Anbieter (nur Next.js 11) unterstützt.

Preise für Next.js SSR 11-Apps

Bei der Bereitstellung Ihrer Next.js SSR 11-App erstellt Amplify zusätzliche Backend-Ressourcen in Ihrem AWS Konto, darunter:

AWS Identity and Access Management Berechtigungen für Next.js 11-Apps SSR

Amplify benötigt AWS Identity and Access Management (IAM) -Berechtigungen, um eine SSR App bereitzustellen. Ohne die erforderlichen Mindestberechtigungen erhalten Sie eine Fehlermeldung, wenn Sie versuchen, Ihre SSR App bereitzustellen. Um Amplify die erforderlichen Berechtigungen zu gewähren, müssen Sie eine Servicerolle angeben.

Informationen zum Erstellen einer IAM Servicerolle, die Amplify übernimmt, wenn Sie in Ihrem Namen andere Dienste aufrufen, finden Sie unterHinzufügen einer Servicerolle zu einer Amplify-App. Diese Anweisungen zeigen, wie Sie eine Rolle erstellen, die die AdministratorAccess-Amplify verwaltete Richtlinie anhängt.

Die AdministratorAccess-Amplify verwaltete Richtlinie bietet Zugriff auf mehrere AWS Dienste, einschließlich IAM Aktionen. Sie sollte als ebenso leistungsfähig wie die Richtlinie angesehen werden. AdministratorAccess Diese Richtlinie bietet mehr Berechtigungen, als für die Bereitstellung Ihrer SSR App erforderlich sind.

Es wird empfohlen, die bewährte Methode der Gewährung der geringsten Rechte zu befolgen und die der Servicerolle gewährten Berechtigungen zu reduzieren. Anstatt Administratorzugriffsberechtigungen für Ihre Servicerolle zu gewähren, können Sie Ihre eigene, vom Kunden verwaltete IAM Richtlinie erstellen, die nur die für die Bereitstellung Ihrer SSR App erforderlichen Berechtigungen gewährt. Anweisungen zur Erstellung einer IAM vom Kunden verwalteten Richtlinie finden Sie unter Richtlinien erstellen im IAMBenutzerhandbuch.

Wenn Sie Ihre eigene Richtlinie erstellen, finden Sie in der folgenden Liste die Mindestberechtigungen, die für die Bereitstellung einer SSR App erforderlich sind.

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

Problembehandlung bei SSR Bereitstellungen von Next.js 11

Wenn bei der Bereitstellung einer SSR Classic-App (nur Next.js 11) mit Amplify unerwartete Probleme auftreten, lesen Sie sich die folgenden Themen zur Fehlerbehebung durch.

Das Ausgabeverzeichnis meiner Anwendung wurde überschrieben

Das Ausgabeverzeichnis für eine mit Amplify bereitgestellte App Next.js muss auf .next eingestellt sein. Wenn das Ausgabeverzeichnis Ihrer App überschrieben wird, überprüfen Sie die Datei. next.config.js Wenn das Build-Ausgabeverzeichnis standardmäßig den Wert haben soll.next, entfernen Sie die folgende Zeile aus der Datei:

distDir: 'build'

Stellen Sie sicher, dass das Ausgabeverzeichnis .next in Ihren Build-Einstellungen auf eingestellt ist. Informationen zum Anzeigen der Build-Einstellungen Ihrer App finden Sie unterKonfiguration der Build-Einstellungen für eine App.

Im Folgenden finden Sie ein Beispiel für die Build-Einstellungen für eine App, für die die Einstellung auf festgelegt baseDirectory ist.next.

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

Nach der Bereitstellung meiner SSR Website erhalte ich eine 404-Fehlermeldung

Wenn Sie nach der Bereitstellung Ihrer Website einen 404-Fehler erhalten, könnte das Problem daran liegen, dass Ihr Ausgabeverzeichnis überschrieben wurde. Gehen Sie wie im vorherigen Thema beschrieben vor, um Ihre next.config.js Datei und das richtige Build-Ausgabeverzeichnis in der Build-Spezifikation Ihrer App zu überprüfen. Das Ausgabeverzeichnis meiner Anwendung wurde überschrieben

In meiner Anwendung fehlt die Rewrite-Regel für Distributionen CloudFront SSR

Wenn Sie eine SSR App bereitstellen, erstellt Amplify eine Rewrite-Regel für Ihre CloudFront SSR Distributionen. Wenn Sie in einem Webbrowser nicht auf Ihre App zugreifen können, stellen Sie sicher, dass die CloudFront Rewrite-Regel für Ihre App in der Amplify-Konsole existiert. Wenn sie fehlt, können Sie sie entweder manuell hinzufügen oder Ihre App erneut bereitstellen.

Um die Umschreib- und Umleitungsregeln einer App in der Amplify-Konsole anzuzeigen oder zu bearbeiten, wählen Sie im Navigationsbereich App-Einstellungen und dann Umschreibungen und Weiterleitungen aus. Der folgende Screenshot zeigt ein Beispiel für die Rewrite-Regeln, die Amplify für Sie erstellt, wenn Sie eine SSR App bereitstellen. Beachten Sie, dass in diesem Beispiel eine CloudFront Rewrite-Regel existiert.

Meine Anwendung ist zu groß für die Bereitstellung

Amplify begrenzt die Größe einer SSR Bereitstellung auf 50 MB. Wenn Sie versuchen, eine Next.js SSR App für Amplify bereitzustellen und eine RequestEntityTooLargeException Fehlermeldung erhalten, ist Ihre App zu groß für die Bereitstellung. Sie können versuchen, dieses Problem zu umgehen, indem Sie Ihrer next.config.js Datei Code zur Cache-Bereinigung hinzufügen.

Im Folgenden finden Sie ein Beispiel für Code in der next.config.js Datei, der die Cache-Bereinigung durchführt.

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

Mein Build schlägt mit einem Fehler wegen unzureichenden Speichers fehl

Next.js ermöglicht es Ihnen, Build-Artefakte zwischenzuspeichern, um die Leistung bei nachfolgenden Builds zu verbessern. Darüber hinaus komprimiert der AWS CodeBuild Container von Amplify diesen Cache und lädt ihn in Ihrem Namen auf Amazon S3 hoch, um die nachfolgende Build-Leistung zu verbessern. Dies könnte dazu führen, dass Ihr Build mit einem Fehler wegen unzureichenden Speichers fehlschlägt.

Führen Sie die folgenden Aktionen aus, um zu verhindern, dass Ihre App das Speicherlimit während der Erstellungsphase überschreitet. Entfernen Sie es zunächst .next/cache/**/* aus dem Abschnitt cache.paths Ihrer Build-Einstellungen. Als Nächstes entfernen Sie die NODE_OPTIONS Umgebungsvariable aus Ihrer Build-Einstellungsdatei. Stellen Sie stattdessen die NODE_OPTIONS Umgebungsvariable in der Amplify-Konsole ein, um das maximale Speicherlimit für den Knoten zu definieren. Weitere Informationen zum Einstellen von Umgebungsvariablen mit der Amplify-Konsole finden Sie unterUmgebungsvariablen setzen.

Nachdem Sie diese Änderungen vorgenommen haben, versuchen Sie es erneut mit Ihrem Build. Wenn dies erfolgreich ist, fügen Sie .next/cache/**/* dem Abschnitt cache.paths Ihrer Build-Einstellungsdatei etwas hinzu.

Weitere Informationen zur Cache-Konfiguration von Next.js zur Verbesserung der Build-Leistung finden Sie AWS CodeBuildauf der Website Next.js.

Meine Anwendung hat SSR sowohl SSG Verzweigungen als auch

Sie können keine App bereitstellen, die SSR sowohl als auch SSG Verzweigungen hat. Wenn Sie SSR sowohl SSG Branches als auch Branches bereitstellen müssen, müssen Sie eine App bereitstellen, die nur SSR Branches verwendet, und eine andere App, die nur SSG Branches verwendet.

Meine Anwendung speichert statische Dateien in einem Ordner mit einem reservierten Pfad

Next.js kann statische Dateien aus einem Ordner mit dem Namen public bereitstellen, der im Stammverzeichnis des Projekts gespeichert ist. Wenn Sie eine Next.js App mit Amplify bereitstellen und hosten, darf Ihr Projekt keine Ordner mit dem Pfad public/static enthalten. Amplify behält sich den public/static Pfad für die Verwendung bei der Verteilung der App vor. Wenn Ihre App diesen Pfad enthält, müssen Sie den static Ordner umbenennen, bevor Sie ihn mit Amplify bereitstellen.

Meine Anwendung hat ein CloudFront Limit erreicht

CloudFront Servicekontingenten beschränken Ihr AWS Konto auf 25 Distributionen mit angehängten Lambda @Edge -Funktionen. Wenn Sie dieses Kontingent überschreiten, können Sie entweder alle ungenutzten CloudFront Distributionen aus Ihrem Konto löschen oder eine Erhöhung des Kontingents beantragen. Weitere Informationen finden Sie unter Beantragen einer Kontingenterhöhung im Service-Quotas-Benutzerhandbuch.

Umgebungsvariablen werden nicht in Lambda-Funktionen übertragen

Umgebungsvariablen, die Sie in der Amplify-Konsole für eine SSR App angeben, werden nicht in die AWS Lambda Funktionen der App übernommen. Ausführliche Anweisungen zum Hinzufügen von UmgebungsvariablenUmgebungsvariablen für serverseitige Laufzeiten zugänglich machen, auf die Sie in Ihren Lambda-Funktionen verweisen können, finden Sie unter,.

Lambda @Edge -Funktionen werden in der Region USA Ost (Nord-Virginia) erstellt

Wenn Sie eine Next.js App bereitstellen, erstellt Amplify Lambda @Edge -Funktionen, um den bereitgestellten Inhalt anzupassen. CloudFront Lambda @Edge -Funktionen werden in der Region USA Ost (Nord-Virginia) erstellt, nicht in der Region, in der Ihre App bereitgestellt wird. Dies ist eine Lambda @Edge -Beschränkung. Weitere Informationen zu Lambda @Edge -Funktionen finden Sie unter Einschränkungen für Edge-Funktionen im Amazon CloudFront Developer Guide.

Meine Anwendung Next.js verwendet Funktionen, die nicht unterstützt werden

Mit Amplify bereitgestellte Apps unterstützen die Hauptversionen von Next.js bis Version 11. Eine ausführliche Liste der Funktionen von Next.js, die von Amplify unterstützt und nicht unterstützt werden, finden Sie unter. supported features

Wenn Sie eine neue Next.js App bereitstellen, verwendet Amplify standardmäßig die neueste unterstützte Version von Next.js. Wenn Sie über eine bestehende Next.js App verfügen, die Sie mit einer älteren Version von Next.js auf Amplify bereitgestellt haben, können Sie die App zum Amplify SSR Hosting-Rechenanbieter migrieren. Detaillierte Anweisungen finden Sie unter Migrieren einer Next.js SSR 11-App auf Amplify Hosting Compute.

Bilder in meiner Next.js -Anwendung werden nicht geladen

Wenn Sie Ihrer App Next.js mithilfe der next/image Komponente Bilder hinzufügen, darf die Größe des Bilds 1 MB nicht überschreiten. Wenn Sie die App auf Amplify bereitstellen, geben Bilder, die größer als 1 MB sind, einen 503-Fehler zurück. Dies wird durch ein Lambda @Edge -Limit verursacht, das die Größe einer Antwort, die von einer Lambda-Funktion generiert wird, einschließlich Header und Hauptteil, auf 1 MB beschränkt.

Das Limit von 1 MB gilt für andere Artefakte in Ihrer App, z. B. PDF für Dokumentdateien.

Nicht unterstützte Regionen

Amplify unterstützt die klassische SSR App-Bereitstellung (nur Next.js 11) nicht in jeder AWS Region, in der Amplify verfügbar ist. Classic (nur Next.js 11) wird in den folgenden Regionen SSR nicht unterstützt: Europa (Mailand) eu-south-1, Naher Osten (Bahrain) me-south-1 und Asien-Pazifik (Hongkong) ap-east-1.