Server und Infrastruktur: Ein VPS als Fundament

Wer schon mal mit All-in-One-Lösungen wie Vercel oder Firebase Hosting gearbeitet hat, kennt die Bequemlichkeit: Ein Klick, ein Deploy, und schon läuft die App im Netz. Klingt gut – hat aber seinen Preis. Spätestens wenn man komplexere Projekte hosten möchte, die aus mehreren Komponenten bestehen (Website, Backend, Mobile App), stößt man schnell an Grenzen.

Darum habe ich mich für einen VPS (Virtual Private Server) entschieden. Ein VPS gibt dir volle Kontrolle über dein System. Du entscheidest, welche Dienste laufen, wie sie miteinander sprechen und wie du deine App skalierst. Klar, es ist ein bisschen mehr Handarbeit – aber genau darin liegt der Lerneffekt und die Flexibilität.

Ich persönlich nutze das Hostinger VPS-Hosting. Ich habe damit sehr gute Erfahrungen gemacht. Die Einrichtung geht schnell, die Preise sind fair, und die Oberfläche ist auch für Einsteiger übersichtlich. Ich kann dir also nur wärmstens empfehlen, es für dieses und weitere eigene Projekte zu nutzen. Für kleinere bis mittlere Projekte wie unseres reicht der günstigste Plan vollkommen aus. Diesen kannst du direkt hier bestellen. Ansonsten findest du hier eine Übersicht über weitere Pakete von Hostinger. Wichtig ist aber, dass du einen VPS-Hosting Plan auswählst.

Während deiner Bestellung musst du angeben, welches Betriebssystem dein VPS nutzen soll. Hier kannst du ein einfaches Betriebssystem mit der neuesten Version von Ubuntu angeben. Dieses wird von allen gängigen Frameworks unterstützt und eignet sich perfekt für unseren Anwendungsfall.

Warum VPS statt All-in-One?

Bevor wir loslegen, kurz ein Vergleich:

• Vercel, Netlify & Co.

  • Schnell aufgesetzt, wenig Konfiguration

  • Ideal für kleine Projekte und reines Frontend-Hosting

  • Wenig Kontrolle über Serverarchitektur, Datenbanken & Security

• VPS (Virtual Private Server)

  • Du bestimmst alles selbst: Routing, Ports, Prozesse

  • Eine Infrastruktur für Web-App, Mobile-App und Backend

  • Günstiger bei steigender Skalierung

  • Bessere Lernkurve (weil du wirklich verstehst, wie Deployment funktioniert)

Natürlich kommt es immer auf deine persönliche Zielsetzung an. Wenn du aber eine wirkliche Infrastruktur aus verschiedenen Apps und einem stabilen backend aufbauen willst, kann ich dir den VPS nur wärmstens empfehlen.

Ich nutze das Hostinger VPS Hosting. Es ist relativ preiswert, schnell und stabil. Für den Anfang und kleinere Projekte reicht der günstigste Plan vollkommen aus. Diesen findest du hier. Vor dem Kauf möchte Hostinger von dir wissen, wie sie deinen Server konfigurieren sollen. Nutze hier am besten ein einfaches Betriebssystem und wähle Ubuntu. Im Popup kannst du dann einfach die neueste Version von Ubuntu auswählen. Dann machst du noch ein paar persönliche Angaben und voilà - dein VPS steht bereit.

VPS aufsetzen

1. Erster Login per SSH

   • Sobald der VPS eingerichtet ist, bekommst du eine IP-Adresse.

   • Diese findest du bei Hostinger unter VPS.

   • In der Übersicht deines VPS bei Hostinger findest du den Befehl zum Herstellen einer SSH-Verbindung unter Root-Zugriff. Dort kannst du außerdem dein Passwort für den SSH-Login ändern. Mit folgendem Befehl kannst du dich verbinden:

   ssh root@[deine Server IP]

   • Passwort eingeben → fertig.

2. System aktualisieren

   sudo apt update && sudo apt upgrade -y

   Damit stellst du sicher, dass alle Pakete auf dem neuesten Stand sind.

Nginx installieren & Domain verbinden

Jetzt installieren wir nginx. Nginx ist ein sogenannter Reverse Proxy Webserver. Er ist im Prinzip der Türsteher deines Servers. Immer wenn jemand eine deiner Domains aufruft, nimmt nginx die Anfrage entgegen und leitet sie dann an die entsprechende Stelle (z.B. dein NestJS-Backend) weiter. So kannst du also dafür sorgen, dass die Inhalte auf bestimmten Ports sichtbar gemacht werden oder ermöglichst beispielsweise Zugriff auf die Dateien in einem bestimmten Ordner auf deinem Server. Nginx ist wirklich ein Allrounder. Später wird nginx auch unsere SSL-Zertifikate (HTTPS) verwalten, um für sichere Zugriffe auf unsere Domains zu sorgen.

1. Installation

   sudo apt install nginx -y

   Danach kannst du sofort prüfen, ob nginx läuft:

   systemctl status nginx

   Öffnest du jetzt im Browser deine Server-IP, solltest du die Standard-nginx-Seite sehen.

   Hurra! Dein Server ist jetzt aus dem Internet erreichbar! 🎊 🎉

2. Domain auf Server zeigen

   Solltest du bereits eine eigene Domain besitzen oder dir eine kaufen, kannst du sie ganz einfach mit deinem Server verbinden. Dazu musst die DNS-Einträge in deinem Domain-Dashboard anpassen. Das findest du normalerweise dort, wo du die Domain gekauft hast, also beispielsweise bei Hostinger.

   Dort musst du jetzt einen neuen A-Eintrag erstellen. Den Namen setzt du einfach auf @ und der neue Eintrag sollte auf die IP-Adresse deines Servers verweisen.

   Nachdem du den neuen Eintrag erstellt hast, musst du ein paar Minuten oder Stunden warten und dann sollte sie im Browser erreichbar sein. Auch hier siehst du erstmal nur die Standard-nginx-Seite.

3. nginx vorbereiten
   Als nächstes legen wir eine einfache Server-Konfiguration an, über die wir später unsere API (Application Programming Interface), also unser Backend erreichen können. Dafür legen wir im Verzeichnis /etc/nginx unseres Servers einen neuen Ordner sites-available an. Dort werden wir später sämtliche Prozesse, die wir über nginx verwalten, auflisten. Also zusammengefasst werden wir dort eine Konfiguration für unsere NestJS-App und eine Konfiguration für unsere NextJS-App hinterlegen. Der Clou an der Sache ist, dass wir hier beliebig viele Prozesse anlegen können, diese aber nicht automatisch von nginx beachtet werden. Wenn wir wollen, dass eine der Konfigurationen von nginx beachtet werden soll, dann können wir später einfach eine Verknüpfung dieser Konfigurationsdatei in /etc/nginx/sites-enabled anlegen. Das gibt uns die Möglichkeit, verschiedene Prozesse zu testen und jederzeit wieder zurückzunehmen, ohne sie vollständig löschen zu müssen. So kannst du ohne Probleme auch weitere Seiten auf deinem Server anlegen.

   Zuerst erstellen wir die Konfigurationsdatei für unsere NestJS-App. Da es sich um eine API für eine ToDo-App handelt, nennen wir sie todo-api.conf. Der Befehl sudo nano sorgt dafür, dass wir die neue Datei in einem Text Editor öffnen und sie somit bearbeiten können.

   sudo nano /etc/nginx/sites-available/todo-api.conf

   Den Inhalt dieser Datei setzen wir wie folgt:

   server {
       listen 80;
       server_name deine-domain.de;
   
       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;
       }
   }

   Hier eine kurze Erläuterung zu den wichtigsten Bestandteilen der Konfigurationsdatei:

   listen 80; --> Diese Zeile sagt nginx, dass es auf den Port 80 hören soll. Das ist der Standard-Port für HTTP

   sever_name --> Ist der Name der Domain, auf die nginx hören soll. Das bedeutet also in diesem Fall für nginx: "deine-domain.de wird aufgerufen, also leite ich diese Anfrage weiter". Falls du keine Domain nutzen möchtest, kannst du auch einfach die IP-Adresse deines Servers hier angeben.

   location / --> Dieser Block definiert, wie Nginx Anfragen an den Stammpfad („/“) behandeln soll. Er richtet einen Reverse-Proxy ein, um Anfragen an einen lokalen Service weiterzuleiten, der (in diesem Fall) auf Port 3000 läuft.

   proxy_pass http://localhost:3000; --> Diese Zeile gibt an, an welchen lokalen Service die Anfrage weitergeleitet werden soll. Wir müssen darauf achten, dass wir unsere NestJS-App später auf dem Port 3000 laufen lassen.

   Zu guter letzt können wir unsere nginx Weiterleitung aktivieren. Das machen wir, wie bereits erwähnt, über eine Verknüpfung unserer Konfigurationsdatei im Ordner sites-enabled. Mit dem zweiten Befehl (sudo nginx -t) überprüfen wir dann die Syntax unserer nginx-Konfiguration. Am Ende starten wir unseren nginx Server neu (sudo systemctl reload nginx) und damit sollte unsere Konfiguration aktiv sein.

   sudo ln -s /etc/nginx/sites-available/todo.conf /etc/nginx/sites-enabled/
   sudo nginx -t
   sudo systemctl reload nginx

   Sobald wir nun Anfragen an deine-domain.de bekommen, werden diese automatisch an http://localhost:3000 auf unserem Server weitergeleitet. Jetzt müssen wir dort nur noch unsere NestJS-App laufen lassen.

Eine erste kleine NestJS-App erstellen

Um den nginx-Setup später zu testen, brauchen wir eine erste App. NestJS ist perfekt dafür, weil es strukturierte APIs in TypeScript ermöglicht und von Haus aus OpenAPI (Swagger) integrieren kann.

Spätestens ab hier würde ich dir empfehlen, mit einem Code-Editor wie Visual Studio Code auf deinen Server zuzugreifen. Visual Studio Code bietet beispielsweise die Remote Verbindung per SSH an, womit du die Programmierung deiner Apps direkt auf dem Server vornehmen kannst.

Bei NestJS handelt es sich um ein NodeJS-Framework. Der erste Schritt ist also, NodeJS auf unserem Server zu installieren. Das machen wir wie folgt:

apt install nodejs npm -y

Um jetzt NestJS nutzen zu können, brauchen wir das NestJS CLI (Command Line Interface). Das installieren wir wie folgt:

npm i -g @nestjs/cli

Jetzt können wir über die Kommandozeile ein neues NestJS-Projekt anlegen. Begib dich dafür am besten in den Ordner /var/www indem du folgenden Befehl eingibst:

cd var/www

Hier erstellen wir jetzt unsere NestJS-App:

nest new todo-api
cd todo-api

Damit wir gleich eine visuelle Bestätigung haben, aktivieren wir Swagger (OpenAPI). Öffne dafür die Datei main.ts und passe sie wie folgt an:

import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';
import { AppModule } from './app.module';
import { NestFactory } from '@nestjs/core';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  const config = new DocumentBuilder()
    .setTitle('ToDo API')
    .setDescription('API Dokumentation für unsere ToDo-App')
    .setVersion('1.0')
    .build();
  const document = SwaggerModule.createDocument(app, config);
  SwaggerModule.setup('api', app, document);

  await app.listen(3000);
}
bootstrap();

Jetzt starten wir die App:

npm run start:dev

Rufst du nun deine Domain über deine-domain.de/api oder die IP-Adresse deines Servers über [IP-Adresse]/api im Browser auf, solltest du die Swagger-Doku sehen. Perfekt! Die API läuft lokal auf dem Server.

Prozesse mit PM2 verwalten

Sobald du dein Terminal schließt, wirst du nicht mehr auf deine Domain zugreifen können. Das liegt daran, dass durch das Schließen der Kommandozeile auch der NestJS-Service beendet wird. Um dem entgegenzuwirken, werden wir PM2 nutzen. PM2 ist darauf ausgelegt mehrere NodeJS-Services im Hintergrund auszuführen und verwalten zu können. Wir können also problemlos sowohl unsere NestJS-App, als auch unsere NextJS-App auf dem Server ausführen, ohne ständig ein Terminal geöffnet zu lassen. Außerdem bietet uns PM2 die Möglichkeit bestimmte Prozesse jederzeit zu deaktivieren, wenn wir sie nicht mehr brauchen, ohne sie komplett löschen zu müssen.

Als erstes installieren wir PM2:

cd ~
sudo npm install -g pm2

Dann begeben wir uns in das Verzeichnis unserer App, falls du dort nicht schon bist:

cd /var/www/todo-api

Jetzt können wir unseren ersten PM2-Prozess starten. Das machen wir mit dem folgenden Befehl:

pm2 start npm --name "todo-api" -- start

Dieser Befehl erstellt wie gesagt einen PM2-Prozess mit dem Namen "todo-api". Du kannst dem Prozess einen beliebigen Namen geben, aber ich würde dir empfehlen, einen aussagekräftigen Namen zu wählen, damit du den Prozess später leicht wiederfindest. Nachdem du den Befehl ausgeführt hast, solltest du eine Übersicht über deine laufenden PM2-Prozesse angezeigt bekommen. Dort ist vermutlich nur dein gerade erstellter Prozess zu sehen und dieser sollte den Status "online" haben.

Über folgenden Befehl kannst du dir jederzeit deine Prozesse anzeigen lassen:

pm2 status

Über den folgenden Befehl kannst du deinen Prozess stoppen:

pm2 stop todo-api

Und über den folgenden Befehl kannst du deinen Prozess wieder starten:

pm2 restart todo-api

Wenn der Prozess gestoppt ist, solltest du die API-Seite im Browser nicht mehr aufrufen können. Spiele am besten etwas mit den verschiedenen Befehlen herum und teste es selbst, um ein besseres Verständnis von der Thematik zu erlangen.

Verschlüssele deine App (Optional)

Wie ich vorher bereits erwähnt habe, verwaltet nginx auch SSL-Zertifikate für deine Domains. Du kannst also jede Domain und Subdomain ganz einfach und kostenlos mit einem SSL-Zertifikat ausstatten, wodurch sie über HTTPS erreichbar sind. Alles, was du dafür benötigst, ist certbot. Installiere es wie folgt:

apt install certbot python3-certbot-nginx -y

Als nächstes führst du folgenden Befehl aus:

sudo certbot --nginx

Hier wählst du zuerst alle Domains aus, für die du SSL-Zertifikate beantragen möchtest und bestätigst deine Auswahl mit Enter. Wenn dann wieder in deine nginx Konfigurationsdatei schaust, wirst du feststellen, dass sich einiges geändert hat. Diese Änderungen wurden automatisch von certbot vorgenommen und sorgen dafür, dass jeglicher Traffic auf deiner Domain auf HTTPS umgeleitet wird. Damit ist deine Domain jetzt erreichbar und sicher! 🎊 🎉

Fazit

Wir haben in diesem Artikel:

• einen VPS eingerichtet,

• nginx als „Türsteher“ für Anfragen installiert,

• eine kleine NestJS-App mit Swagger erstellt,

• PM2 zur Verwaltung deiner NodeJS-Prozesse eingerichtet,

• die API sauber über unsere Domain erreichbar gemacht,

• und ein SSL-Zertifikat für unsere Domain beantragt.

Damit ist die Basis gelegt. Im nächsten Teil kümmern wir uns darum, das Backend Schritt für Schritt auszubauen – mit Authentifizierung über Firebase Authentication und den ersten ToDo-Endpunkten.

👉 Vergiss nicht: Falls du selbst einen VPS ausprobieren möchtest, empfehle ich dir Hostinger VPS Hosting.