Stellen Sie Next.js in AWS Amplify bereit: Eine Schritt-für-Schritt-Anleitung

Black Friday: Enjoy a 25% discount on the starter kits. Use code BLACKFRIDAY2024 at checkout.

LaunchFast Logo LaunchFast

Stellen Sie Next.js in AWS Amplify bereit: Eine Schritt-für-Schritt-Anleitung

Rishi Raj Jain
Deploy Next.js to AWS Amplify

In diesem Leitfaden erfahren Sie, wie Sie ein Nextjs-SSR-Projekt in AWS Amplify bereitstellen. Sie durchlaufen den Prozess der Einrichtung eines neuen Nextjs-Projekts, der Aktivierung des serverseitigen Renderings mithilfe des AWS Amplify-Adapters und der schließlichen Bereitstellung in AWS Amplify

Sponsored AICardify - AI-generated greeting cards

Generate AI Powered Greeting Cards For Every Occasion

Voraussetzungen

Sie benötigen Folgendes:

Erstellen Sie eine neue Nextjs-Anwendung

Beginnen wir mit der Erstellung eines neuen Nextjs-Projekts. Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus:

Terminal window
npx create-next-app@latest my-app

Wenn Sie dazu aufgefordert werden, wählen Sie:

  • „Ja“, wenn Sie aufgefordert werden, TypeScript zu verwenden
  • „Nein“, wenn Sie aufgefordert werden, ESLint zu verwenden
  • „Ja“, wenn Sie aufgefordert werden, Tailwind CSS zu verwenden
  • „Nein“, wenn Sie aufgefordert werden, das Verzeichnis „src/“ zu verwenden
  • „Ja“, wenn Sie aufgefordert werden, App Router zu verwenden
  • „Nein“, wenn Sie aufgefordert werden, den Standard-Importalias („@/*“) anzupassen.

Sobald dies erledigt ist, wechseln Sie in das Projektverzeichnis und starten Sie die App im Entwicklungsmodus, indem Sie den folgenden Befehl ausführen:

Terminal window
cd my-app
npm run dev

Die App sollte auf localhost:3000 ausgeführt werden.

Anschließend müssen Sie die folgende Änderung an Ihrer „nextconfigjs“-Datei vornehmen. Öffnen Sie die Datei und fügen Sie den folgenden Code hinzu:

module.exports = {
output: 'standalone', // [!code ++]
}

Erstellen Sie dann eine „amplifymjs“-Datei im Stammverzeichnis des Repositorys mit dem folgenden Code:

amplify.mjs
import { join } from 'node:path';
import { writeFileSync, mkdirSync, existsSync, cpSync, rmSync } from 'node:fs';
// Define all the Amplify related directories
const amplifyDirectories = [
join(process.cwd(), '.amplify-hosting'),
join(process.cwd(), '.amplify-hosting', 'static'),
join(process.cwd(), '.amplify-hosting', 'static', '_next'),
join(process.cwd(), '.amplify-hosting', 'compute'),
join(process.cwd(), '.amplify-hosting', 'compute', 'default'),
join(process.cwd(), '.amplify-hosting', 'compute', 'default', 'node_modules'),
]
// Create directories if they do no exist already
if (existsSync(amplifyDirectories[0])) rmSync(amplifyDirectories[0], { force: true, recursive: true })
// Create directories if they do no exist already
amplifyDirectories.forEach((i => mkdirSync(i)))
// A general default configuration to fallback to compute if no matching static assets found
const deployManifestConfig = {
version: 1,
routes: [
{
path: `/assets/*`,
target: {
kind: "Static",
},
},
{
path: `/*.*`,
target: {
kind: "Static",
},
fallback: {
kind: "Compute",
src: "default",
},
},
{
path: "/*",
target: {
kind: "Compute",
src: "default",
},
},
],
computeResources: [
{
name: "default",
entrypoint: "server.js",
runtime: "nodejs18.x",
},
],
framework: {
name: "next",
version: "13.5.6",
},
};
// Write the config to .amplify-hosting/deploy-manifest.json
writeFileSync(
join(process.cwd(), ".amplify-hosting", "deploy-manifest.json"),
JSON.stringify(deployManifestConfig),
);
// Copy the static assets generated in .next/static and public to .amplify-hosting/static directory
cpSync(join(process.cwd(), 'public'), amplifyDirectories[1], { recursive: true })
cpSync(join(process.cwd(), '.next', 'static'), amplifyDirectories[2], { recursive: true })
// Copy the static assets generated in .next/standalone to .amplify-hosting/compute directory
cpSync(join(process.cwd(), '.next', 'standalone'), amplifyDirectories[4], { recursive: true })
// Remove .next/static and public from .amplify-hosting/compute/default
rmSync(join(amplifyDirectories[4], '.next', 'static'), { force: true, recursive: true })
rmSync(join(amplifyDirectories[4], 'public'), { force: true, recursive: true })

Erstellen Sie dann eine „amplifyyml“-Datei im Stammverzeichnis des Repositorys mit dem folgenden Code:

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

Der obige Code führt Folgendes aus:

– Verwendet „preBuild“-Befehle, um die Abhängigkeiten Ihres Nextjs-Projekts zu installieren

  • Verwendet „Build“-Befehle, um:
    • Speichern Sie alle Umgebungsvariablen in der Datei „env“ im Stammverzeichnis des Projekts
    • Erstellen Sie Ihre Nextjs-Anwendung
    • Verschieben Sie das Verzeichnis „node_modules“ und die Datei „env“ in das Compute-Verzeichnis von Amplify

Bereitstellung auf AWS Amplify

Der Code kann nun in AWS Amplify bereitgestellt werden. Führen Sie zur Bereitstellung die folgenden Schritte aus:

  • Beginnen Sie mit der Erstellung eines GitHub-Repositorys, das den Code Ihrer App enthält

  • Navigieren Sie dann zum AWS Amplify Dashboard und klicken Sie im Abschnitt Hosten Sie Ihre Web-App auf Erste Schritte

Host your web app in AWS Amplify
  • Wählen Sie GitHub als Quelle Ihres Git-Repositorys aus
GitHub as code source in AWS Amplify
  • Verknüpfen Sie das neue Projekt mit dem GitHub-Repository, das Sie gerade erstellt haben
Link Repo in AWS Amplify
  • Geben Sie Ihrem Projekt einen Namen und klicken Sie auf Erweiterte Einstellungen
Name the project in AWS Amplify
  • Aktualisieren Sie in Erweiterte Einstellungen die Umgebungsvariablen so, dass sie mit denen in Ihrer lokalen „env“-Datei übereinstimmen, und „PORT“ als 3000. Klicken Sie auf Weiter, um fortzufahren
Add Environment Variables in AWS Amplify
  • Klicken Sie auf Speichern und bereitstellen, um Ihre Website bereitzustellen
Deploy to AWS Amplify

– Suchen Sie in den Informationen zum erfolgreichen Build nach der Bereitstellungs-URL unter dem Titel Domäne

Grab Deployment URL in AWS Amplify

Abschluss

Juhuu! Sie haben jetzt ein Nextjs-Projekt, das bei Git-Push automatisch in AWS Amplify bereitgestellt wird

Wenn Sie Fragen oder Kommentare haben, können Sie mich gerne auf Twitter.

Learn More Authentifizieren von Benutzern in Astro mit besserer Authentifizierung: Eine Schritt-für-Schritt-Anleitung
Authentifizieren von Benutzern in Astro mit besserer Authentifizierung: Eine Schritt-für-Schritt-Anleitung November 24, 2024
Astro vs. Next.js: Auswahl des richtigen Frameworks im Jahr 2024
Astro vs. Next.js: Auswahl des richtigen Frameworks im Jahr 2024 October 30, 2024
6 wesentliche Funktionen, die jedes Web-Starter-Kit enthalten sollte
6 wesentliche Funktionen, die jedes Web-Starter-Kit enthalten sollte October 26, 2024