Hinzufügen von SSR Funktionen zu einer statischen Next.js App - AWS Amplify Hosten
Aktualisierung der PlattformEine Servicerolle hinzufügenAktualisierung der Build-EinstellungenAktualisierung der Datei package.json

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.

Hinzufügen von SSR Funktionen zu einer statischen Next.js App

Sie können einer vorhandenen statischen (SSG) Next.js App, die mit Amplify bereitgestellt wird, SSR Funktionen hinzufügen. Bevor Sie mit der Konvertierung Ihrer SSG App beginnenSSR, aktualisieren Sie die App so, dass sie Next.js Version 12 oder höher verwendet, und fügen Sie SSR Funktionen hinzu. Dann müssen Sie die folgenden Schritte ausführen.

  1. Verwenden Sie die AWS Command Line Interface , um den Plattformtyp der App zu ändern.

  2. Fügen Sie der App eine Servicerolle hinzu.

  3. Aktualisieren Sie das Ausgabeverzeichnis in den Build-Einstellungen der App.

  4. Aktualisieren Sie die package.json Datei der App, um anzugeben, dass die App sie verwendetSSR.

Aktualisierung der Plattform

Es gibt drei gültige Werte für den Plattformtyp. Eine SSG App ist auf den Plattformtyp eingestelltWEB. Eine SSR App, die Next.js Version 11 verwendet, ist auf den Plattformtyp eingestelltWEB_DYNAMIC. Für Apps, die auf Next.js 12 oder höher mithilfe von SSR Managed by Amplify Hosting Compute bereitgestellt werden, ist der Plattformtyp auf WEB_COMPUTE eingestellt.

Wenn Sie Ihre App als SSG App bereitgestellt haben, hat Amplify den Plattformtyp auf WEB gesetzt. Verwenden Sie die AWS CLI , um die Plattform für Ihre App zu WEB_COMPUTE ändern. Öffnen Sie ein Terminalfenster und geben Sie den folgenden Befehl ein. Aktualisieren Sie dabei den roten Text mit Ihrer eindeutigen App-ID und Region.

aws amplify update-app --app-id abcd1234 --platform WEB_COMPUTE --region us-west-2

Eine Servicerolle hinzufügen

Eine Servicerolle ist die Rolle AWS Identity and Access Management (IAM), die Amplify übernimmt, wenn es in Ihrem Namen andere Dienste anruft. Folgen Sie diesen Schritten, um einer SSG App, die bereits mit Amplify bereitgestellt wurde, eine Servicerolle hinzuzufügen.

Um eine Servicerolle hinzuzufügen

  1. Melden Sie sich bei der an AWS Management Console und öffnen Sie die Amplify-Konsole.

  2. Wenn Sie in Ihrem Amplify-Konto noch keine Servicerolle erstellt haben, finden Sie Informationen unter Hinzufügen einer Servicerolle, um diesen vorausgesetzten Schritt abzuschließen.

  3. Wählen Sie die statische App Next.js aus, zu der Sie eine Servicerolle hinzufügen möchten.

  4. Wählen Sie im Navigationsbereich App-Einstellungen, Allgemein aus.

  5. Wählen Sie auf der Seite mit den App-Details die Option Bearbeiten aus

  6. Wählen Sie unter Servicerolle den Namen einer vorhandenen Servicerolle oder den Namen der Servicerolle, die Sie in Schritt 2 erstellt haben.

  7. Wählen Sie Save (Speichern) aus.

Aktualisierung der Build-Einstellungen

Bevor Sie Ihre App erneut mit SSR Funktionen bereitstellen, müssen Sie die Build-Einstellungen für die App aktualisieren, um das Ausgabeverzeichnis auf .next festzulegen. Sie können die Build-Einstellungen in der Amplify-Konsole oder in einer in Ihrem Repo gespeicherten amplify.yml Datei bearbeiten. Weitere Informationen finden Sie unter Konfiguration der Build-Einstellungen für eine App.

Das Folgende ist ein Beispiel für die Build-Einstellungen für eine App, bei der auf eingestellt baseDirectory ist. .next

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

Aktualisierung der Datei package.json

Nachdem Sie eine Servicerolle hinzugefügt und die Build-Einstellungen aktualisiert haben, aktualisieren Sie die Datei der App. package.json Legen Sie wie im folgenden Beispiel das Build-Skript so fest, dass "next build" es angibt, dass die App Next.js SSG sowohl als auch SSR Seiten unterstützt.

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
},

Amplify erkennt die Änderung an der package.json Datei in Ihrem Repo und stellt die App mit Funktionalität erneut bereit. SSR