Von lokaler Entwicklung bis zur Produktion: Deployment von TypeScript-Anwendungen im Jahr 2024

Ihr TypeScript-Code ist bereit, die Welt zu erobern? Zeit, ihn in die Produktion zu schicken

Sie haben die perfekte TypeScript-Anwendung geschrieben. Lokal läuft alles rund, die Typen sind streng, der Code ist schön. Aber sobald die Frage aufkommt: "Wie starte ich das auf einem Server?", geraten viele Entwickler ins Stocken. Kommt Ihnen das bekannt vor?

Das Deployment von TypeScript-Anwendungen ist keine Rocket Science, aber auch nicht einfach "Ordner kopieren". In diesem Artikel behandeln wir drei grundlegende Ansätze: den klassischen VPS, modernes Docker und Cloud-Plattformen. Sie erfahren, wie Sie Ihr TypeScript-Projekt richtig bauen, die Umgebung konfigurieren und Updates automatisieren. Los geht's!

Schritt 1: Vorbereitung der TypeScript-Anwendung für das Deployment

Bevor Sie über Server nachdenken, müssen Sie sicherstellen, dass Ihre Anwendung bereit ist, außerhalb der lokalen Umgebung zu laufen. TypeScript ist ein Overlay, das in JavaScript kompiliert wird. Auf dem Server versteht Node.js .ts-Dateien nicht direkt (es sei denn, Sie verwenden ts-node, was für die Produktion nicht empfohlen wird).

Projekt-Build

Stellen Sie sicher, dass in Ihrer package.json die richtigen Skripte eingetragen sind:

{\n  "scripts": {\n    "build": "tsc",\n    "start": "node dist/index.js",\n    "dev": "ts-node-dev --respawn src/index.ts"\n  },\n  "main": "dist/index.js"\n}

Der Befehl npm run build erstellt einen Ordner dist mit dem fertigen JS-Code. Genau diesen Ordner werden wir deployen.

Tipp: Fügen Sie "outDir": "./dist" in tsconfig.json hinzu und konfigurieren Sie exclude für node_modules:

{\n  "compilerOptions": {\n    "outDir": "./dist",\n    "rootDir": "./src",\n    "target": "ES2020",\n    "module": "commonjs",\n    "strict": true,\n    "esModuleInterop": true\n  },\n  "include": ["src/**/*"],\n  "exclude": ["node_modules", "dist"]\n}

Methode 1: Klassischer VPS – Volle Kontrolle

VPS (Virtual Private Server) ist ein gemieteter Server, auf dem Sie der König sind. Geeignet für Projekte, bei denen Sie die volle Kontrolle über die Umgebung benötigen. Wir betrachten das Deployment auf Ubuntu 22.04.

Server-Einrichtung

\n
• Per SSH verbinden: ssh root@Ihre_IP
\n
• Pakete aktualisieren: apt update && apt upgrade -y
\n
• Node.js 20.x installieren: \n curl -fsSL https://deb.nodesource.com/setup_20.x | bash - && apt install -y nodejs\n
\n
• PM2 installieren – den Prozessmanager für Node.js:\n npm install -g pm2\n
\n

Anwendungs-Deployment

Der einfachste Weg ist das Kopieren von Dateien per SCP oder Git. Ich empfehle Git:

git clone https://github.com/Ihr-Repository/Projekt.git /var/www/myapp\ncd /var/www/myapp\nnpm install\nnpm run build\npm2 start dist/index.js --name "myapp"\npm2 save\npm2 startup

Wichtig: Konfigurieren Sie Nginx als Reverse Proxy, damit die Anwendung über Port 80 erreichbar ist:

server {\n    listen 80;\n    server_name Ihre-Domain.de;\n\n    location / {\n        proxy_pass http://localhost:3000;\n        proxy_http_version 1.1;\n        proxy_set_header Upgrade $http_upgrade;\n        proxy_set_header Connection 'upgrade';\n        proxy_set_header Host $host;\n        proxy_cache_bypass $http_upgrade;\n    }\n}

Vergessen Sie nicht, SSL über Certbot zu konfigurieren – das ist kostenlos und für das moderne Web obligatorisch.

Methode 2: Docker – Containerisierung für Reproduzierbarkeit

Docker löst das Hauptproblem von VPS: "Auf meinem Rechner funktioniert es!". Der Container enthält alles Notwendige – Node.js, Abhängigkeiten, den gebauten Code. Die Umgebung ist auf jedem Betriebssystem identisch.

Dockerfile für TypeScript

Wir erstellen einen Multi-Stage-Build – das reduziert das endgültige Image:

# Stufe 1: TypeScript-Build\nFROM node:20-alpine AS builder\nWORKDIR /app\nCOPY package*.json ./\nRUN npm ci\nCOPY . .\nRUN npm run build\n\n# Stufe 2: Production-Image