View a markdown version of this page

Stellen Sie eine Next.js App auf Amplify Hosting bereit - AWS Amplify Hosting
Schritt 1: Verbinde ein RepositorySchritt 2: Bestätigen Sie die Build-EinstellungenSchritt 3: Stellen Sie die Anwendung bereitSchritt 4: (Optional) Ressourcen bereinigenFüge Funktionen zu deiner App hinzu

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.

Stellen Sie eine Next.js App auf Amplify Hosting bereit

Dieses Tutorial führt Sie durch die Erstellung und Bereitstellung einer Next.js Anwendung aus einem Git-Repository.

Bevor Sie mit diesem Tutorial beginnen, müssen Sie die folgenden Voraussetzungen erfüllen.

Erstellen einer Anwendung

Erstellen Sie eine Next.js Basisanwendung, die Sie für dieses Tutorial verwenden können. Verwenden Sie dazu die Anweisungen zur Erstellung der nächsten App in der Dokumentation. Next.js

Erstellen Sie ein Git-Repository

Amplify unterstützt GitHub, Bitbucket und GitLab. AWS CodeCommit Pushen Sie Ihre create-next-app Anwendung in Ihr Git-Repository.

Schritt 1: Verbinde ein Git-Repository

In diesem Schritt verbinden Sie Ihre Next.js Anwendung in einem Git-Repository mit Amplify Hosting.

Um eine App in einem Git-Repository zu verbinden

  1. Öffnen Sie die Amplify-Konsole.

  2. Wenn Sie Ihre erste App in der aktuellen Region bereitstellen, beginnen Sie standardmäßig mit der AWS Amplify Serviceseite.

    Wählen Sie oben auf der Seite App bereitstellen aus.

  3. Wähle auf der Seite „Mit Amplify erstellen“ deinen Git-Repository-Anbieter aus und wähle dann Weiter aus.

    Für GitHub Repositorys verwendet Amplify die GitHub Apps-Funktion, um den Amplify-Zugriff zu autorisieren. Weitere Informationen zur Installation und Autorisierung der App finden Sie unter. GitHub Amplify-Zugriff auf Repositorys einrichten GitHub

    Anmerkung

    Nachdem Sie die Amplify-Konsole mit Bitbucket oder AWS CodeCommit autorisiert haben GitLab, ruft Amplify ein Zugriffstoken vom Repository-Anbieter ab, speichert das Token jedoch nicht auf den Servern. AWS Amplify greift auf Ihr Repository nur mit Bereitstellungsschlüsseln zu, die in einem bestimmten Repository installiert sind.

  4. Gehen Sie auf der Seite Repository-Branch hinzufügen wie folgt vor:

    1. Wählen Sie den Namen des Repositorys aus, mit dem Sie eine Verbindung herstellen möchten.

    2. Wählen Sie den Namen des Repository-Zweigs aus, mit dem eine Verbindung hergestellt werden soll.

    3. Wählen Sie Weiter aus.

Schritt 2: Bestätigen Sie die Build-Einstellungen

Amplify erkennt automatisch die Reihenfolge der Build-Befehle, die für den Branch ausgeführt werden müssen, den Sie bereitstellen. In diesem Schritt überprüfen und bestätigen Sie Ihre Build-Einstellungen.

Um die Build-Einstellungen für eine App zu bestätigen

  1. Suchen Sie auf der Seite mit den App-Einstellungen nach dem Abschnitt Build-Einstellungen.

    Stellen Sie sicher, dass der Frontend-Build-Befehl und das Build-Ausgabeverzeichnis korrekt sind. Für diese Next.js Beispiel-App ist das Build-Ausgabeverzeichnis auf .next festgelegt.

  2. Das Verfahren zum Hinzufügen einer Servicerolle hängt davon ab, ob Sie eine neue Rolle erstellen oder eine vorhandene verwenden möchten.

    • So erstellen Sie eine neue Rolle:

      1. Wählen Sie Neue Servicerolle erstellen und verwenden aus.

    • Um eine bestehende Rolle zu verwenden:

      1. Wählen Sie Eine bestehende Rolle verwenden aus.

      2. Wählen Sie in der Liste der Servicerollen die Rolle aus, die Sie verwenden möchten.

  3. Wählen Sie Weiter aus.

Schritt 3: Stellen Sie die Anwendung bereit

In diesem Schritt stellen Sie Ihre App im AWS globalen Content Delivery Network (CDN) bereit.

Um eine App zu speichern und bereitzustellen

  1. Vergewissern Sie sich auf der Seite „Überprüfen“, dass Ihre Repository-Details und App-Einstellungen korrekt sind.

  2. Wählen Sie Save and deploy (Speichern und Bereitstellen) aus. Ihr Frontend-Build dauert in der Regel 1 bis 2 Minuten, kann aber je nach Größe der App variieren.

  3. Wenn die Bereitstellung abgeschlossen ist, können Sie Ihre App über den Link zur amplifyapp.com Standarddomain anzeigen.

Anmerkung

Um die Sicherheit Ihrer Amplify-Anwendungen zu erhöhen, ist die Domain amplifyapp.com in der Public Suffix List (PSL) registriert. Aus Sicherheitsgründen empfehlen wir Ihnen, Cookies mit einem __Host- Präfix zu verwenden, falls Sie jemals vertrauliche Cookies im Standard-Domainnamen für Ihre Amplify-Anwendungen setzen müssen. Diese Vorgehensweise trägt dazu bei, Ihre Domain vor CSRF-Versuchen (Cross-Site Request Forgery Attempts, Anforderungsfälschung zwischen Websites) zu schützen. Weitere Informationen finden Sie Set-Cookie auf der Seite im Mozilla Developer Network.

Schritt 4: (Optional) Ressourcen bereinigen

Wenn Sie die App, die Sie für das Tutorial bereitgestellt haben, nicht mehr benötigen, können Sie sie löschen. Mit diesem Schritt wird sichergestellt, dass Ihnen keine Ressourcen in Rechnung gestellt werden, die Sie nicht nutzen.

Um eine App zu löschen

  1. Wählen Sie im Navigationsbereich im Menü mit den App-Einstellungen die Option Allgemeine Einstellungen aus.

  2. Wählen Sie auf der Seite mit den allgemeinen Einstellungen die Option App löschen aus.

  3. Geben Sie im Bestätigungsfenster eindelete. Wählen Sie dann App löschen.

Füge Funktionen zu deiner App hinzu

Nachdem Sie nun eine App auf Amplify bereitgestellt haben, können Sie einige der folgenden Funktionen erkunden, die für Ihre gehostete Anwendung verfügbar sind.

Umgebungsvariablen

Anwendungen benötigen zur Laufzeit häufig Konfigurationsinformationen. Bei diesen Konfigurationen kann es sich um Datenbankverbindungsdetails, API-Schlüssel oder Parameter handeln. Umgebungsvariablen bieten eine Möglichkeit, diese Konfigurationen zum Zeitpunkt der Erstellung verfügbar zu machen. Weitere Informationen finden Sie unter Umgebungsvariablen.

Benutzerdefinierte Domänen

In diesem Tutorial hostet Amplify Ihre App für Sie auf der amplifyapp.com Standarddomain mit einer URL wiehttps://branch-name.d1m7bkiki6tdw1.amplifyapp.com. Wenn Sie Ihre App mit einer benutzerdefinierten Domain verbinden, sehen Benutzer, dass Ihre App auf einer benutzerdefinierten URL gehostet wird, z. B. https://www.example.com Weitere Informationen findest du unter Benutzerdefinierte Domains einrichten.

Vorschauen von Pull-Requests

Web-Pull-Request-Vorschauen bieten Teams die Möglichkeit, eine Vorschau der Änderungen aus Pull Requests (PRs) anzuzeigen, bevor sie Code mit einem Produktions- oder Integrationszweig zusammenführen. Weitere Informationen finden Sie unter Webvorschauen für Pull Requests.

Verwalten mehrerer Umgebungen

Weitere Informationen dazu, wie Amplify mit Feature-Branches und GitFlow Workflows arbeitet, um mehrere Bereitstellungen zu unterstützen, finden Sie unter Feature-Branch-Bereitstellungen und Team-Workflows.