Деплой TypeScript приложения на VPS: пошаговое руководство от А до Я

Деплой TypeScript приложения на VPS: пошаговое руководство от А до Я

Разработка на TypeScript — это современный стандарт для создания надежных и масштабируемых веб-приложений. Однако после написания кода встает вопрос: как правильно развернуть его на реальном сервере? В этой статье мы разберем полный цикл деплоя TypeScript приложения на VPS (Virtual Private Server). Вы узнаете, как настроить окружение, скомпилировать TypeScript в JavaScript, организовать автозапуск с помощью PM2 и настроить обратный прокси через Nginx. Материал рассчитан на разработчиков, которые уже имеют базовое понимание TypeScript и Linux.

1. Подготовка VPS и установка необходимого ПО

Первый шаг — подготовка сервера. Мы будем использовать Ubuntu 22.04 LTS, так как это одна из самых стабильных и популярных ОС для VPS. Подключитесь к серверу через SSH:

ssh root@ваш-ip-сервера

Обновите пакетный менеджер и установите Node.js (рекомендуется LTS версия) вместе с менеджером пакетов npm:

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

Проверьте установку:

node -v   # v20.x.x
npm -v    # 10.x.x

Теперь установим глобально TypeScript и PM2 (процесс-менеджер для Node.js):

npm install -g typescript pm2

Важно: TypeScript компилируется в JavaScript, поэтому на сервере не обязательно иметь сам TypeScript в рантайме — достаточно скомпилировать код локально или на сервере перед запуском. Однако глобальная установка ts-node может пригодиться для отладки.

2. Компиляция TypeScript и настройка package.json

Предположим, ваше приложение имеет следующую структуру:

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

Файл tsconfig.json должен быть настроен для production сборки. Пример конфигурации:

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

Добавьте в package.json скрипты для сборки и запуска:

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

Теперь, когда вы запускаете npm run build, TypeScript компилирует файлы из папки src в папку dist. Пример простого сервера на Express (файл src/index.ts):

import express, { Request, Response } from 'express';

const app = express();
const PORT = process.env.PORT || 3000;

app.get('/', (req: Request, res: Response) => {
  res.send('TypeScript приложение работает на VPS!');
});

app.listen(PORT, () => {
  console.log(`Сервер запущен на порту ${PORT}`);
});

3. Клонирование репозитория и сборка на сервере

Скопируйте ваше приложение на сервер. Самый удобный способ — через Git. Если ваш код хранится в GitHub/GitLab, выполните на сервере:

cd /var/www
git clone https://github.com/ваш-username/my-ts-app.git
cd my-ts-app

Установите зависимости и выполните сборку:

npm install
npm run build

После этого в папке dist появятся скомпилированные .js файлы. Проверьте, что сборка прошла успешно:

ls dist/
# index.js  routes.js  utils.js

Теперь можно запустить приложение вручную для теста:

node dist/index.js

Откройте второй терминал и выполните curl http://localhost:3000 — вы должны увидеть ответ сервера. Если всё работает, остановите процесс (Ctrl+C) и переходите к настройке PM2.

4. Настройка PM2 для автозапуска и мониторинга

PM2 — это продвинутый процесс-менеджер для Node.js приложений. Он обеспечивает автоматический перезапуск при падении, логирование и управление несколькими процессами. Запустите ваше приложение через PM2:

pm2 start dist/index.js --name "my-ts-app"

Проверьте статус:

pm2 status
# ┌─────┬──────────────┬──────────┬──────┬───────────┬──────────┐
# │ id │ name         │ mode     │ ↺    │ status    │ cpu      │
# ├─────┼──────────────┼──────────┼──────┼───────────┼──────────┤
# │ 0  │ my-ts-app    │ fork     │ 0    │ online    │ 0%       │
# └─────┴──────────────┴──────────┴──────┴───────────┴──────────┘

Настройте автозапуск PM2 при перезагрузке сервера:

pm2 startup systemd

Скопируйте и выполните команду, которая появится в выводе (обычно это что-то вроде sudo env PATH=$PATH:/usr/bin pm2 startup systemd -u root --hp /root). Затем сохраните список процессов:

pm2 save

Теперь ваше приложение будет автоматически запускаться при старте VPS. Для просмотра логов используйте pm2 logs my