Wie man JavaScript-Entwickler wird: Tipps für Anfänger

Einführung: Vom lokalen Server zur produktionsreifen Lösung

Sie haben eine leistungsstarke JavaScript-Anwendung auf Node.js entwickelt, lokal getestet, und jetzt ist es an der Zeit, sie der Welt zu zeigen. Einfach Dateien auf einen VPS hochzuladen und node app.js auszuführen, ist der Anfängerweg. Auf fortgeschrittenem Niveau umfasst das Deployment die Konfiguration eines Reverse-Proxy-Servers, eines Prozessmanagers, die automatische Erneuerung von SSL-Zertifikaten, ein Continuous-Integration-und-Delivery-System (CI/CD) sowie eine ordnungsgemäße Überwachung und Protokollierung.

In diesem Artikel gehen wir schrittweise durch den Prozess des Deployments einer Node.js-Anwendung auf einem VPS (Ubuntu 22.04) auf fortgeschrittenem Niveau. Wir konfigurieren Nginx als Reverse-Proxy, PM2 für das Prozessmanagement, Let's Encrypt für HTTPS, GitHub Actions für das automatische Deployment bei Push in das Repository und fügen eine grundlegende Überwachung hinzu.

Voraussetzungen

• Ein VPS-Server (Ubuntu 22.04) mit SSH-Zugriff.
• Eine Domain, die auf die IP Ihres Servers zeigt (z. B. myapp.example.com).
• Node.js (v18+) und npm auf dem Server installiert.
• Git auf dem Server installiert.
• Ihr Anwendungs-Repository auf GitHub.

1. Server-Setup und PM2-Prozessmanager

Beginnen wir mit der grundlegenden Vorbereitung der Umgebung. Nachdem Sie sich per SSH mit dem Server verbunden haben, aktualisieren Sie die Pakete und installieren Sie die notwendigen Dienstprogramme:

sudo apt update && sudo apt upgrade -ysudo apt install nginx git curl -y

Stellen Sie sicher, dass Node.js installiert ist. Wenn nicht, installieren Sie es über NodeSource:

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -sudo apt install -y nodejsnode -vnpm -v

Installieren Sie nun PM2 global – einen fortschrittlichen Prozessmanager für Node.js, der die Anwendung bei einem Absturz automatisch neu startet, Logs verwaltet und Clustering handhabt:

sudo npm install -g pm2

Klonen Sie Ihr Anwendungs-Repository und installieren Sie die Abhängigkeiten:

git clone https://github.com/your-username/your-repository.git /var/www/myappcd /var/www/myappnpm install --production

Erstellen Sie eine PM2-Ökosystemdatei (ecosystem.config.js) für die Feinabstimmung:

// ecosystem.config.jsmodule.exports = {  apps: [{    name: 'myapp',    script: 'app.js', // or server.js    instances: 'max', // use all CPU cores    exec_mode: 'cluster',    env: {      NODE_ENV: 'production',      PORT: 3000    },    error_file: '/var/log/node-app/err.log',    out_file: '/var/log/node-app/out.log',    log_date_format: 'YYYY-MM-DD HH:mm Z'  }]};

Erstellen Sie ein Verzeichnis für Logs und starten Sie die Anwendung über PM2:

sudo mkdir -p /var/log/node-appsudo chown -R $USER:$USER /var/log/node-apppm2 start ecosystem.config.jspm2 savepm2 startup systemd

Der Befehl pm2 startup erstellt einen systemd-Dienst, der PM2 beim Systemstart startet. Ihre Anwendung läuft nun auf Port 3000, aber der direkte Zugriff darauf ist nicht sicher. Fahren wir mit der Konfiguration von Nginx fort.

2. Konfiguration von Nginx als Reverse-Proxy und SSL über Let's Encrypt

Nginx eingehende Anfragen auf den Ports 80 (HTTP) und 443 (HTTPS) entgegennehmen, sie an Ihren Node.js-Prozess weiterleiten, der auf Port 3000 läuft, und auch statische Dateien direkt ausliefern – dies reduziert die Last auf Node.js.

Erstellen Sie eine Konfigurationsdatei für unsere Domain:

sudo nano /etc/nginx/sites-available/myapp

Fügen Sie die folgende Konfiguration ein (ersetzen Sie myapp.example.com durch Ihre Domain):

server {    listen 80;    server_name myapp.example.com;    return 301 https://$server_name$request_uri; # Weiterleitung zu HTTPS}

server {    listen 443 ssl http2;    server_name myapp.example.com;

    # SSL-Zertifikate (werden später von Let's Encrypt konfiguriert)    # ssl_certificate /etc/letsencrypt/live/myapp.example.com/fullchain.pem;    # ssl_certificate_key /etc/letsencrypt/live/myapp.example.com/privkey.pem;

    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;        proxy_set_header X-Real-IP $remote_addr;        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;        proxy_set_header X-Forwarded-Proto $scheme;    }

    # Statische Dateien direkt von Nginx ausliefern lassen (optional)    location /static/ {        alias /var/www/myapp/public/;        expires 30d;        add_header Cache-Control "public, immutable";    }

    location /uploads/ {        alias /var/www/myapp/uploads/;        expires 7d;    }}