Next.js-Anwendung auf Ubuntu mit Nginx, Node.js und PM2

In diesem Blogbeitrag werde ich dir Schritt für Schritt zeigen, wie du eine Next.js-Anwendung auf einem Ubuntu-VPS-Server hochlädst, wie du Nginx als Reverse Proxy konfigurierst, wie du deine Anwendung mit PM2 verwaltest und wie du eine SSL-Verschlüsselung mit Certbot einrichtest. Zusätzlich werde ich erläutern, warum es vorteilhaft sein kann, deine Anwendung auf einem VPS anstatt bei Vercel zu hosten.

Warum ein VPS anstatt Cloud-Anbietern wie (Vercel, Netlify)?

• Kostenkontrolle bei Cloud-Anbietern: Bei der Nutzung von Cloud-Anbietern besteht das Risiko, dass du enorme Rechnungen erhalten kannst, insbesondere wenn deine Anwendung automatisch skaliert wird, um plötzliche Spitzen im Traffic zu bewältigen. Cloud-Plattformen bieten oft automatische Skalierungsfunktionen, die dazu beitragen können, die Leistung und Verfügbarkeit deiner Anwendung zu verbessern. Jedoch kann dies auch dazu führen, dass die Kosten unerwartet steigen, da du für die zusätzlichen Ressourcen bezahlen musst, die deine Anwendung verwendet.
• Flexibilität: Du hast die volle Kontrolle über die Serverumgebung und kannst diese nach deinen Bedürfnissen anpassen, was bei Plattformen wie Vercel eingeschränkt sein kann.
• Performance: Mit einem VPS kannst du spezifische Serverressourcen dedizieren, was die Performance deiner Anwendung verbessern kann, insbesondere wenn du spezielle Optimierungen benötigst.
• Lernkurve: Das Verwalten eines eigenen Servers gibt dir wertvolle Erfahrungen und Kenntnisse im Bereich der Serveradministration und DevOps.

Voraussetzungen

Bevor wir beginnen, stelle sicher, dass du die folgenden Voraussetzungen erfüllst:

• Ein Ubuntu VPS-Server (mit root-Zugriff)
• Node.js und npm installiert
• Grundlegende Kenntnisse im Umgang mit der Kommandozeile
• Eine registrierte Domain, die auf deinen VPS-Server verweist

Schritt 1: Next.js-Anwendung hochladen

Zunächst musst du deine Next.js-Anwendung auf deinen VPS-Server übertragen. Das kannst du am einfachsten mit Git.

Verbinde dich per SSH mit deinem Server:

ssh username@server_ip

Mit Git (unter Verwendung eines GitHub Personal Access Tokens):

Erstelle ein Git-Repository für dein Projekt (falls noch nicht geschehen). Push dein Projekt auf ein Remote-Repository (z.B. GitHub). Auf deinem Server klonst du das Repository wie folgt:

1. Gehe zu deinem GitHub-Profil und navigiere zu Settings > Developer settings > Personal access tokens.
2. Klicke auf Generate new token und folge den Anweisungen, um einen neuen Token zu erstellen. Vergib einen Namen und wähle die Berechtigungen aus, die dein Token haben soll, z.B. repo für den vollen Zugriff auf private und öffentliche Repositories.
3. Kopiere den generierten Token.
4. Öffne ein Terminal auf deinem lokalen Rechner.
5. Führe den folgenden Befehl aus, um dein GitHub-Konto mit dem Token zu authentifizieren (ersetze your_token_here durch deinen generierten Token):

Warum wir einen Access Token brauchen:

GitHub hat aus Sicherheitsgründen die Authentifizierung über Benutzername und Passwort für Git-Operationen eingeschränkt. Insbesondere für private Repositories ist die Verwendung eines Access Tokens erforderlich, um den Zugriff zu authentifizieren. Selbst für öffentliche Repositories wird die Verwendung eines Tokens empfohlen, um die Sicherheit zu erhöhen und den Zugriff auf das GitHub-Konto zu kontrollieren.

Indem wir einen Access Token verwenden, können wir sicherstellen, dass der Zugriff auf unser Git-Repository nur mit einem spezifischen Token erfolgt, das bestimmte Berechtigungen hat, anstatt unser sensibles Passwort zu verwenden. Dies erhöht die Sicherheit unserer GitHub-Konten und schützt unsere Projekte vor unautorisiertem Zugriff.

git clone https://username:your_token_here@github.com/username/my_nextjs_app.git /tmp/my_nextjs_app
 

Stelle sicher, dass du das Verzeichnis /var/www verwendest, da dies oft das Standardverzeichnis für Webanwendungen auf Ubuntu-Servern ist. Dies ermöglicht einen einfachen Zugriff und eine einfache Konfiguration der Webserver-Software.

sudo mv /tmp/my_nextjs_app /var/www
 

Schritt 2: Anwendung auf dem Server einrichten

Verbinde dich per SSH mit deinem Server:

ssh username@server_ip

Navigiere zu dem Verzeichnis, in das du deine Anwendung kopiert hast.

cd /var/www/my_nextjs_app

Installiere die Abhängigkeiten deiner Next.js-Anwendung:

npm install

Baue deine Anwendung:

npm run build

Starte deine Anwendung:

npm start

Teste deine Anwendung, indem du die IP-Adresse deines Servers und den richtigen Port in deinem Browser eingibst, z.B. http://server_ip:3000.

http://server_ip:my_nextjs_app_port

Schritt 3: Nginx als Reverse Proxy konfigurieren

Was ist ein Reverse Proxy?

Ein Reverse Proxy ist ein Server, der Client-Anfragen entgegennimmt und sie an einen oder mehrere Backend-Server weiterleitet. Dabei fungiert der Reverse Proxy als Vermittler zwischen dem Client (z.B. einem Webbrowser) und dem Server, auf dem die eigentliche Anwendung läuft. Der Reverse Proxy leitet die Antworten des Servers zurück an den Client. Diese Architektur bietet mehrere Vorteile:

• Lastverteilung: Ein Reverse Proxy kann den eingehenden Traffic auf mehrere Backend-Server verteilen, um die Last gleichmäßig zu verteilen und die Performance zu verbessern.
• Sicherheit: Ein Reverse Proxy kann als zusätzliche Sicherheitsbarriere fungieren, indem er den direkten Zugriff auf die Backend-Server verhindert und zusätzliche Sicherheitsfunktionen wie SSL-Verschlüsselung und Web Application Firewalls integriert.
• Caching: Ein Reverse Proxy kann häufig angeforderte Inhalte zwischenspeichern (cachen), um die Antwortzeiten zu verkürzen und die Last auf den Backend-Servern zu reduzieren.
• Anonymisierung: Durch den Reverse Proxy bleibt die IP-Adresse des Backend-Servers für den Client verborgen, was die Anonymität und den Schutz des Backend-Servers erhöht.

Nginx als Reverse Proxy konfigurieren

Nginx wird als Reverse Proxy fungieren, um Anfragen an deine Next.js-Anwendung weiterzuleiten.

Installiere Nginx:

sudo apt update
sudo apt install nginx

Erstelle eine neue Konfigurationsdatei für deine Anwendung:

sudo nano /etc/nginx/sites-available/yourdomain.com

Füge die folgende Konfiguration hinzu: Ersetze yourdomain.com durch deine Domain.

server {
    listen 80;
    server_name www.yourdomain.com yourdomain.com ;
 
    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Aktiviere die neue Konfiguration:

sudo ln -s /etc/nginx/sites-available/yourdomain.com /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

Schritt 4: Anwendung mit PM2 verwalten

PM2 (Process Manager 2) ist ein fortschrittlicher Prozessmanager für Node.js-Anwendungen. Er ermöglicht es, Node.js-Anwendungen im Hintergrund auszuführen, zu überwachen und zu verwalten. PM2 bietet eine Reihe von Funktionen, die die Bereitstellung und Verwaltung von Node.js-Anwendungen erleichtern:

• Starten und Überwachen von Anwendungen: PM2 kann verwendet werden, um Node.js-Anwendungen zu starten, zu überwachen und im Hintergrund laufen zu lassen. Es stellt sicher, dass die Anwendung auch nach einem Neustart des Servers weiterläuft und automatisch neu gestartet wird, falls sie abstürzen sollte.
• Logging und Fehlerbehandlung: PM2 ermöglicht es, Logs von Node.js-Anwendungen zu verfolgen und Fehlermeldungen aufzuzeichnen. Dies erleichtert die Fehlerbehebung und das Debugging von Anwendungen.
• Skalierung von Anwendungen: PM2 ermöglicht es, mehrere Instanzen einer Anwendung auf verschiedenen Ports oder Servern zu starten, um die Last zu verteilen und die Skalierbarkeit zu verbessern.
• Hot Reload: PM2 bietet die Möglichkeit, Änderungen im Quellcode einer Anwendung zu erkennen und automatisch die entsprechenden Prozesse neu zu starten, ohne die gesamte Anwendung neu zu laden.
• Integration mit Systemd und Init-Systemen: PM2 kann in Verbindung mit Systemd oder anderen Init-Systemen verwendet werden, um Anwendungen als Dienste zu registrieren und automatisch beim Start des Servers zu starten.
• Überwachung der Ressourcennutzung: PM2 überwacht die Ressourcennutzung von Node.js-Anwendungen, einschließlich CPU-Auslastung, Speicherbelegung und Laufzeitstatistiken. Dies ermöglicht es, Engpässe und Leistungsprobleme frühzeitig zu erkennen und zu beheben.

Installiere PM2:

sudo npm install -g pm2

cd /var/www/my_nextjs_app

Starte deine Anwendung mit PM2:

pm2 start npm --name "nextjs-app" -- start

Stelle sicher, dass PM2 beim Systemstart automatisch gestartet wird:

pm2 startup
pm2 save

Schritt 5: DNS-Einstellungen aktualisieren

Nachdem du die Konfigurationsdateien für deine Website erstellt und aktiviert hast, musst du möglicherweise auch die DNS-Einstellungen bei deinem Domainanbieter aktualisieren. Dies bedeutet, dass du die IP-Adresse deines VPS als Ziel für deine Domain festlegst. Es ist wichtig, sowohl einen "A Record" für die Domain ohne "www" als auch einen für die Domain mit "www" einzurichten.

Logge dich in dein Konto bei deinem Domainanbieter ein und suche nach den DNS-Einstellungen oder dem DNS-Verwaltungsbereich. Dort solltest du zwei Einträge für deine Domain erstellen:

Einen "A Record" für die Domain ohne "www", wobei die IP-Adresse auf die IP-Adresse deines VPS zeigt. Einen weiteren "A Record" für die Domain mit "www", der ebenfalls auf die IP-Adresse deines VPS zeigt. Durch das Einrichten dieser beiden Einträge wird sichergestellt, dass sowohl Anfragen an deine Domain mit "www" als auch ohne "www" korrekt zu deinem Nginx-Server weitergeleitet werden. Nachdem du diese Änderungen vorgenommen hast, kann es einige Zeit dauern, bis die DNS-Änderungen weltweit propagiert sind. Danach sollte deine Website über beide Varianten der Domain erreichbar sein und die Anfragen werden auf deinen Nginx-Server geleitet.

Schritt 6: SSL mit Certbot einrichten

Um die Sicherheit deiner Website zu erhöhen, kannst du ein SSL-Zertifikat mit Certbot einrichten. Certbot ist ein Tool, das kostenlose SSL-Zertifikate von Let’s Encrypt automatisch installiert und erneuert.

Installiere Certbot und das Nginx-Plugin:

sudo apt update
sudo apt install certbot python3-certbot-nginx

Fordere ein SSL-Zertifikat an und konfiguriere Nginx automatisch:

sudo certbot --nginx -d www.yourdomain.com -d yourdomain.com

sudo systemctl restart nginx

Befolge die Anweisungen auf dem Bildschirm. Certbot wird Nginx neu konfigurieren und das Zertifikat automatisch abrufen und installieren.

Teste die Zertifikatserneuerung:

sudo certbot renew --dry-run

Bonus (Neue Version der Webseite hochladen)

Wenn du eine neue Version deiner Webseite auf den Server hochladen möchtest, kannst du dies mit git pull durchführen.

Navigiere zum Verzeichnis deiner Next.js-Anwendung:

Führe einen git pull aus, um die neueste Version deines Git-Repositorys abzurufen und deine Webseite zu aktualisieren:

cd /var/www/my_nextjs_app
git pull origin master

Nachdem die Änderungen heruntergeladen wurden, führe den Build-Prozess erneut aus, um sicherzustellen, dass die Anwendung aktualisiert wird: Dieser Befehl kompiliert den Quellcode erneut und generiert die Dateien, die für die Ausführung der Anwendung benötigt werden.

npm run build

Starte PM2 neu, um sicherzustellen, dass die neueste Version der Anwendung ausgeführt wird:

pm2 restart nextjs-app

Fazit

Das Hosten deiner Next.js-Anwendung auf einem Ubuntu-VPS-Server bietet dir mehr Kontrolle und Flexibilität. Mit den richtigen Tools wie Nginx, PM2 und Certbot kannst du eine stabile, sichere und skalierbare Umgebung für deine Anwendung schaffen. Während Vercel eine hervorragende Plattform für das schnelle Deployment von Anwendungen ist, bietet ein VPS dir mehr Möglichkeiten zur Anpassung und Optimierung.

Meine Webentwicklungsdienstleistungen