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

Введение: Почему VPS — идеальное место для вашего TypeScript проекта?

Вы написали классное приложение на TypeScript — будь то Express сервер, Next.js сайт или NestJS API. Локально всё работает идеально, но пришло время показать проект миру. Многие новички боятся этапа деплоя, считая его сложным и запутанным. На самом деле, разобраться в этом процессе один раз — и вы сможете развёртывать любые TypeScript проекты за 15-20 минут.

В этом руководстве мы разберём полный цикл деплоя TypeScript приложения на VPS (Virtual Private Server) — от подготовки сервера до настройки домена и HTTPS. Статья ориентирована на Node.js экосистему, так как TypeScript чаще всего используется именно с ней.

Что вы узнаете:

• Как подготовить VPS к работе (Ubuntu 22.04)
• Как настроить Node.js, TypeScript и менеджер процессов PM2
• Как собрать (скомпилировать) TypeScript в production-режиме
• Как настроить Nginx в качестве reverse proxy
• Как бесплатно подключить SSL сертификат через Let's Encrypt

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

1.1 Первичная настройка сервера

Предположим, вы арендовали VPS (например, у DigitalOcean, Timeweb или Reg.ru) с Ubuntu 22.04. Первым делом подключитесь к серверу через SSH:

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

Создайте отдельного пользователя (безопаснее, чем работать под root):

adduser deployer
usermod -aG sudo deployer
su - deployer

1.2 Установка Node.js и npm

Для TypeScript приложения нам понадобится Node.js версии 18 или 20 (LTS). Используем официальный NodeSource PPA:

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

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

node -v
npm -v

1.3 Установка TypeScript глобально (опционально)

Хотя TypeScript обычно идёт как локальная зависимость проекта, для быстрой проверки компиляции можно установить его глобально:

sudo npm install -g typescript

1.4 Клонирование вашего проекта

Скопируйте репозиторий с GitHub/GitLab на сервер:

git clone https://github.com/ваш-username/ваш-проект.git
cd ваш-проект

Установите зависимости:

npm install

2. Сборка TypeScript и настройка PM2

2.1 Компиляция TypeScript в JavaScript

В вашем package.json должен быть скрипт сборки. Обычно он выглядит так:

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

Запускаем сборку:

npm run build

После выполнения в папке dist появится скомпилированный JavaScript код. Если у вас Next.js, команда сборки будет npm run build (Next.js сам компилирует TypeScript).

2.2 Установка и настройка PM2

PM2 — это менеджер процессов, который держит ваше приложение запущенным, перезапускает его при падении и управляет логами. Устанавливаем:

sudo npm install -g pm2

Запускаем приложение через PM2 (указываем путь к скомпилированному файлу):

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

Если у вас Next.js, команда будет другой:

pm2 start npm --name "next-app" -- start

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

pm2 startup systemd
pm2 save

Теперь ваше приложение работает на локальном порту (например, 3000). Давайте сделаем его доступным по домену.

3. Настройка Nginx как reverse proxy

3.1 Установка Nginx

sudo apt-get install -y nginx
sudo systemctl start nginx
sudo systemctl enable nginx

3.2 Создание конфигурационного файла

Создайте файл для вашего домена (замените your-domain.com на ваш реальный домен):

sudo nano /etc/nginx/sites-available/your-domain.com

Добавьте следующую конфигурацию (пример для Node.js приложения на порту 3000):

server {
    listen 80;
    server_name your-domain.com www.your-domain.com;

    location / {
        proxy_pass http://127.0.0.1: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;
    }
}

Если у вас Next.js, порт будет 3000 по умолчанию. Для Express/NestJS порт может быть другим — укажите тот, который слушает ваше приложение.

Активируйте конфигурацию:

sudo ln -s /etc/nginx/sites-available/your-domain.com /etc/nginx/sites-enabled/
sudo nginx -t  # проверка синтаксиса
sudo systemctl reload nginx

4. Подключение SSL сертификата (HTTPS)

Без HTTPS ваш сайт будет помечен как небезопасный, а многие API и браузеры будут блокировать запросы. Используем бесплатный Certbot от Let's Encrypt.

4.1 Установка Certbot

sudo apt-get install -y certbot python3-certbot-nginx

4.2 Получение сертификата

sudo certbot --nginx -d your-domain.com -