Next.js auf einem Managed Server betreiben

Einführung

In diesem Tutorial werden wir eine Next.js Anwendung auf einem Managed Server für produktive Workloads bereitstellen. Wir werden PM2 und eine "Reverse Proxy"-Konfiguration aufsetzen.

Voraussetzungen

SSH Zugriff
hos-nodejs ist bereits installiert (Sende hierzu eine Supportanfrage über konsoleH)
Prozessfreigaben für PM2*, next-server* und sh (Sende hierzu eine Supportanfrage über konsoleH)

Schritt 1 - Node.js Version festlegen

Je nachdem, welche Node.js Version deine Next.js Anwendung benötigt, führe einen der folgenden Befehle aus:

# für v18
echo 18 > ~/.nodeversion

# für v20
echo 20 > ~/.nodeversion

# für v22
echo 22 > ~/.nodeversion

Verwende v22 falls du eine neue Anwendung erstellst.

Du kannst die aktuell genutzte Version mit node -v prüfen.

Schritt 2 - PM2 installieren

Passe die $PATH Variable an

echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc

Installiere PM2 mit

npm install -g pm2

und prüfe, ob PM2 korrekt installiert wurde

pm2 --version

Das sollte dir die Version von PM2 anzeigen.

Schritt 3 - Next.js Anwendung erstellen

Wechsle in dein Home-Verzeichnis und erstelle eine neue Next.js Anwendung über folgenden Befehl:

cd "$HOME"
npx create-next-app@latest
cd example-app/ # Ersetze example-app mit dem Namen deiner Anwendung

Alternativ kannst du auch eine vorhandene Anwendung über FTP oder SFTP hochladen oder von deinem Git Repository klonen.

Schritt 4 - Baue deine Next.js Anwendung

Passe deine next.config.ts an und stelle sicher, dass die Option output auf standalone gesetzt ist.

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
    output: 'standalone',
};

export default nextConfig;

Erstelle jetzt einen Production Build mit

npm run build

Schritt 5 - Kopiere statische Dateien in das Startverzeichnis

Damit statische Dateien direkt von Apache ausgeliefert werden, müssen wir diese Dateien in einen Ordner verschieben, auf den Apache zugreifen kann.

In diesem Beispiel ist das Startverzeichnis der Domain direkt auf den public_html Ordner über die konsoleH gesetzt.

Führe die folgenden Befehle innerhalb des Ordners deiner Anwendung aus.

Ersetzte holu mit dem tatsächlichen Benutzernamen deines aktuellen Benutzers.

cp -r public/* /usr/www/users/holu
mkdir /usr/www/users/holu/_next
cp -r .next/static/ /usr/www/users/holu/_next

Dieser Schritt muss jedes mal wiederholt werden, wenn du deine Anwendung über npm run build neu baust. Alte Dateien solltest du zuvor löschen.

Schritt 6 - Starte Next.js mit PM2

Starte deine Anwendung im 'Cluster' Modus:

pm2 start --name example-app -i max .next/standalone/server.js

und speichere die PM2 Prozessliste mit:

pm2 save

Um zu überprüfen, ob deine Anwendung läuft, führe pm2 status aus. Die Ausgabe sollte wie folgt aussehen:

$ pm2 status
┌────┬────────────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐
│ id │ name           │ namespace   │ version │ mode    │ pid      │ uptime │ ↺    │ status    │ cpu      │ mem      │ user     │ watching │
├────┼────────────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤
│ 0  │ example-app    │ default     │ 0.1.0   │ cluster │ 78638    │ 85s    │ 0    │ online    │ 0%       │ 97.1mb   │ holu     │ disabled │
│ 1  │ example-app    │ default     │ 0.1.0   │ cluster │ 78645    │ 85s    │ 0    │ online    │ 0%       │ 96.9mb   │ holu     │ disabled │
│ 2  │ example-app    │ default     │ 0.1.0   │ cluster │ 78652    │ 85s    │ 0    │ online    │ 0%       │ 94.3mb   │ holu     │ disabled │
│ 3  │ example-app    │ default     │ 0.1.0   │ cluster │ 78659    │ 85s    │ 0    │ online    │ 0%       │ 94.9mb   │ holu     │ disabled │
│ 4  │ example-app    │ default     │ 0.1.0   │ cluster │ 78670    │ 85s    │ 0    │ online    │ 0%       │ 95.0mb   │ holu     │ disabled │
│ 5  │ example-app    │ default     │ 0.1.0   │ cluster │ 78681    │ 85s    │ 0    │ online    │ 0%       │ 95.0mb   │ holu     │ disabled │
│ 6  │ example-app    │ default     │ 0.1.0   │ cluster │ 78692    │ 85s    │ 0    │ online    │ 0%       │ 95.2mb   │ holu     │ disabled │
│ 7  │ example-app    │ default     │ 0.1.0   │ cluster │ 78703    │ 85s    │ 0    │ online    │ 0%       │ 95.0mb   │ holu     │ disabled │
└────┴────────────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘

Schritt 7 - Erstelle eine .htaccess

Füge in deinem Startverzeichnis folgende .htaccess Datei hinzu (z.B. public_html):

DirectoryIndex disabled

RewriteEngine On

RewriteCond %{REQUEST_URI} !^/?$
RewriteCond %{QUERY_STRING} ^$
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^.*$ - [NC,L]

RewriteRule ^(.*)$ http://localhost:3000/$1 [P,L]

Falls deine Anwendung einen anderen Port verwendet, musst du 3000 mit deinem Port ersetzen.

Schritt 8 - Erstelle einen @reboot cronjob

Damit PM2 und deine Anwendung nach einem Server Neustart automatisch gestartet wird, musst du über den Cronjob-Manager in der konsoleH folgenden Cronjob einrichten:

@reboot "$HOME/.local/bin/pm2" resurrect

Schritt 9 - Test

Öffne deine Domain in deinem Browser und du solltest deine Next.js Anwendung sehen.

Ergebnis

Du hast nun ein 'production ready' Deployment deiner Next.js Anwendung auf deinem Managed Server.

Next.js auf einem Managed Server betreiben

Author

Published

Time to read

Table of Contents