Déploiement d'une application TypeScript sur VPS : guide pas à pas de A à Z

Déploiement d'une application TypeScript sur VPS : guide pas à pas de A à Z

Le développement en TypeScript est un standard moderne pour créer des applications web fiables et évolutives. Cependant, après avoir écrit le code, la question se pose : comment le déployer correctement sur un serveur réel ? Dans cet article, nous allons parcourir le cycle complet de déploiement d'une application TypeScript sur un VPS (Virtual Private Server). Vous apprendrez à configurer l'environnement, compiler TypeScript en JavaScript, organiser le démarrage automatique avec PM2 et configurer un proxy inverse via Nginx. Ce contenu est destiné aux développeurs ayant déjà une compréhension de base de TypeScript et de Linux.

1. Préparation du VPS et installation des logiciels nécessaires

La première étape est la préparation du serveur. Nous utiliserons Ubuntu 22.04 LTS, car c'est l'un des systèmes d'exploitation les plus stables et populaires pour les VPS. Connectez-vous au serveur via SSH :

ssh root@votre-ip-serveur

Mettez à jour le gestionnaire de paquets et installez Node.js (version LTS recommandée) avec le gestionnaire de paquets npm :

apt update && apt upgrade -y\ncurl -fsSL https://deb.nodesource.com/setup_20.x | bash -\napt install -y nodejs git nginx

Vérifiez l'installation :

node -v   # v20.x.x\nnpm -v    # 10.x.x

Maintenant, installons globalement TypeScript et PM2 (gestionnaire de processus pour Node.js) :

npm install -g typescript pm2

Important : TypeScript est compilé en JavaScript, donc il n'est pas nécessaire d'avoir TypeScript lui-même dans l'environnement d'exécution du serveur — il suffit de compiler le code localement ou sur le serveur avant de l'exécuter. Cependant, l'installation globale de ts-node peut être utile pour le débogage.

2. Compilation de TypeScript et configuration de package.json

Supposons que votre application ait la structure suivante :

my-ts-app/\n├── src/\n│   ├── index.ts\n│   ├── routes.ts\n│   └── utils.ts\n├── package.json\n├── tsconfig.json\n└── .gitignore

Le fichier tsconfig.json doit être configuré pour la compilation en production. Exemple de configuration :

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

Ajoutez dans package.json les scripts pour la compilation et le lancement :

{\n  "name": "my-ts-app",\n  "version": "1.0.0",\n  "scripts": {\n    "build": "tsc",\n    "start": "node dist/index.js",\n    "dev": "ts-node src/index.ts"\n  },\n  "dependencies": {\n    "express": "^4.18.2"\n  },\n  "devDependencies": {\n    "typescript": "^5.3.3",\n    "@types/express": "^4.17.21",\n    "ts-node": "^10.9.2"\n  }\n}

Maintenant, lorsque vous exécutez npm run build, TypeScript compile les fichiers du dossier src vers le dossier dist. Exemple d'un serveur simple avec Express (fichier src/index.ts) :

import express, { Request, Response } from 'express';\n\nconst app = express();\nconst PORT = process.env.PORT || 3000;\n\napp.get('/', (req: Request, res: Response) => {\n  res.send('L\'application TypeScript fonctionne sur le VPS !');\n});\n\napp.listen(PORT, () => {\n  console.log(`Serveur démarré sur le port ${PORT}`);\n});

3. Clonage du dépôt et compilation sur le serveur

Copiez votre application sur le serveur. Le moyen le plus pratique est via Git. Si votre code est hébergé sur GitHub/GitLab, exécutez sur le serveur :

cd /var/www\ngit clone https://github.com/votre-username/my-ts-app.git\ncd my-ts-app

Installez les dépendances et effectuez la compilation :

npm install\nnpm run build

Après cela, les fichiers .js compilés apparaîtront dans le dossier dist.