code-server: VS Code в браузере на своём VPS

Сайты и веб-серверы
code-server: VS Code в браузере на своём VPS

Представьте: ваша среда разработки — со всеми расширениями, терминалом и открытыми файлами — доступна из любого браузера. Слабый ноутбук, планшет, чужой компьютер — неважно: тяжёлую работу делает сервер, а устройство лишь рисует интерфейс. Именно это даёт code-server — опенсорсная сборка VS Code, работающая как веб-приложение на вашем VPS. В этой статье поставим его с нуля, закроем HTTPS-доступом через Nginx и настроим так, чтобы среда переживала перезагрузки.

Как это работает и зачем нужно

code-server — проект компании Coder, который упаковывает редактор VS Code в серверное приложение. Сам редактор, языковые серверы, отладчик, терминал — всё выполняется на VPS; браузер получает готовый интерфейс по HTTP(S). Отсюда главные сценарии:

  • Разработка со слабых устройств. Сборка проекта, индексация кода, языковые серверы TypeScript или Python съедают гигабайты RAM — теперь это забота сервера, а не вашего ноутбука.
  • Единая среда с нескольких устройств. Дом, офис, поездка — открыли вкладку и продолжили ровно с того места, где остановились: сессия живёт на сервере.
  • Разработка прямо на целевой площадке. Код редактируется там же, где запускается: никакой синхронизации файлов, деплой — просто перезапуск сервиса в соседней вкладке терминала.
  • Онбординг и обучение. Готовое окружение для студента или стажёра — по одной ссылке, без «у меня не собирается».

В отличие от облачных IDE по подписке, здесь всё на вашем сервере: код не покидает машину, лимитов на время работы нет, а цена — это цена VPS.

Сколько ресурсов нужно

Сам code-server скромен, но он лишь оболочка: реальный аппетит определяют языковые серверы и ваши сборки.

СценарийRAMCPU
Правка конфигов, скрипты, Markdown1–2 ГБ1–2 vCPU
Python/Go-проект средних размеров3–6 ГБ2–4 vCPU
Node/TypeScript-монорепа, Docker рядом8–16 ГБ6–12 vCPU

Для комфортной работы с настоящим проектом смотрите в сторону 8–16 ГБ RAM. Быстрый диск тоже важен: индексация тысяч файлов и npm install — сплошные мелкие операции ввода-вывода, на которых NVMe кратно быстрее SATA (почему — разбирали в статье что такое NVMe в VPS).

Шаг 1. Подготовка сервера

Понадобится VPS с Ubuntu/Debian, домен, направленный A-записью на IP сервера (для HTTPS), и доступ по SSH — если подключаетесь впервые, вот пошаговая инструкция.

Работать будем не из-под root — создадим пользователя:

adduser dev
usermod -aG sudo dev
su - dev

Шаг 2. Установка code-server

Официальный скрипт определяет дистрибутив и ставит пакет из репозитория проекта:

curl -fsSL https://code-server.dev/install.sh | sh

(Параноикам — уважение: скрипт можно сначала скачать и прочитать: curl -fsSL https://code-server.dev/install.sh -o install.sh && less install.sh.)

Запускаем как сервис systemd от имени нашего пользователя:

sudo systemctl enable --now code-server@dev
systemctl status code-server@dev

При первом старте создаётся конфиг ~/.config/code-server/config.yaml. Приведём его к такому виду:

nano ~/.config/code-server/config.yaml
bind-addr: 127.0.0.1:8080
auth: password
password: придумайте-длинный-надёжный-пароль
cert: false

Ключевой момент — bind-addr: 127.0.0.1:8080: code-server слушает только localhost и недоступен из интернета напрямую. Наружу его будет отдавать Nginx с HTTPS. Никогда не публикуйте code-server на 0.0.0.0 без TLS: пароль и весь трафик пойдут открытым текстом, а веб-IDE с терминалом — это полный доступ к серверу.

Применяем конфиг:

sudo systemctl restart code-server@dev

Шаг 3. HTTPS через Nginx и Let's Encrypt

sudo apt update && sudo apt install -y nginx certbot python3-certbot-nginx
sudo nano /etc/nginx/sites-available/code-server

Конфиг проксирования (замените code.example.com на свой домен):

server {
    listen 80;
    server_name code.example.com;

    location / {
        proxy_pass http://127.0.0.1:8080/;
        proxy_set_header Host $host;
        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;

        # WebSocket — обязательно, иначе редактор не заработает
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";

        # Долгие соединения для терминала и языковых серверов
        proxy_read_timeout 86400s;
        proxy_send_timeout 86400s;
    }
}

Включаем сайт и выпускаем сертификат:

sudo ln -s /etc/nginx/sites-available/code-server /etc/nginx/sites-enabled/
sudo nginx -t && sudo systemctl reload nginx
sudo certbot --nginx -d code.example.com

Certbot сам добавит HTTPS-блок и редирект с 80-го порта. Открываем https://code.example.com, вводим пароль из config.yaml — и перед вами знакомый интерфейс VS Code, только в браузере.

Шаг 4. Обживаемся: расширения, терминал, проекты

Внутри всё привычно: Ctrl+P — быстрый переход по файлам, ` Ctrl+ `` — терминал, слева — панель расширений. code-server использует реестр расширений Open VSX: подавляющее большинство популярных плагинов (Python, ESLint, Prettier, GitLens и т.д.) там есть, хотя отдельные проприетарные расширения из магазина Microsoft могут отсутствовать.

Расширения можно ставить и из терминала:

code-server --install-extension ms-python.python
code-server --install-extension esbenp.prettier-vscode
code-server --list-extensions

Терминал внутри code-server — полноценная shell-сессия на сервере: git, docker, ssh на другие машины — всё работает. Кстати, про удобную работу с несколькими серверами из этого терминала — см. статью про ~/.ssh/config.

Практический пример: разворачиваете Django-проект по нашему гайду деплой Django на VPS — и правите код прямо на сервере в code-server, а в соседней вкладке терминала перезапускаете Gunicorn. Цикл «правка — проверка» сжимается до секунд.

Пара настроек для комфорта (File → Preferences → Settings или settings.json):

{
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "terminal.integrated.persistentSessionReviveProcess": "onExitAndWindowClose"
}

Автосохранение особенно уместно в браузерной среде: случайно закрытая вкладка не унесёт несохранённые правки.

Безопасность: короткий чек-лист

Веб-доступная IDE с терминалом равна SSH-доступу — защищаем соответственно:

  1. Только HTTPS. Уже сделано: локальный bind + Nginx + Let's Encrypt.
  2. Длинный пароль в config.yaml — это единственный рубеж аутентификации code-server.
  3. Firewall: наружу открыты только 22, 80, 443 (sudo ufw allow 22,80,443/tcp && sudo ufw enable).
  4. Fail2ban для SSH и, при желании, дополнительный Basic Auth в Nginx поверх пароля code-server.
  5. Обновления: sudo apt upgrade не забываем — code-server обновляется тем же пакетным менеджером.

Если домена нет или не хочется публиковать IDE в интернет вообще, есть вариант ещё безопаснее — SSH-туннель:

# На локальной машине; порт 8080 сервера станет localhost:8080
ssh -L 8080:127.0.0.1:8080 dev@ip-сервера

Открываете http://localhost:8080 — трафик идёт внутри шифрованного SSH-соединения, наружу code-server не выставлен совсем.

Частые вопросы

Чем code-server отличается от обычного VS Code с Remote-SSH?

Remote-SSH требует установленного VS Code на клиенте — это отличный вариант для вашего основного ноутбука. code-server же нужен только браузер: подойдёт планшет, чужой компьютер, машина, где нельзя ставить софт. Серверная часть в обоих случаях выполняет работу на VPS; многие используют оба способа параллельно на одном сервере.

Это законная сборка? Отличается ли она от «настоящего» VS Code?

Да, code-server — открытый проект на основе опенсорсной кодовой базы VS Code (MIT-лицензия). Практические отличия: расширения ставятся из реестра Open VSX вместо магазина Microsoft (некоторых проприетарных плагинов там нет), и недоступны фирменные сервисы Microsoft вроде Settings Sync — настройки живут на вашем сервере, что для сценария «одна среда с любого устройства» даже логичнее.

Насколько заметна задержка при наборе текста?

При пинге до сервера в пределах 20–50 мс набор ощущается как локальный: интерфейс рендерится в браузере, на сервер уходят события и обратно — обновления. Поэтому имеет смысл брать VPS географически ближе к себе — для пользователей из России и СНГ хорошо подходит площадка в Москве.

Можно ли работать вдвоём в одной среде?

code-server рассчитан на одного пользователя: одновременная правка одного файла с двух устройств не синхронизируется в реальном времени, как в Google Docs. Для команды правильнее запустить по экземпляру на каждого (разные системные пользователи и порты — code-server@alice, code-server@bob) за одним Nginx.

Что делать, если вкладка «отваливается» или редактор виснет?

Сначала смотрите ресурсы сервера: htop покажет, не съел ли языковой сервер всю память (OOM-killer убивает процессы тихо). Затем проверьте, что в Nginx настроен проброс WebSocket (блок Upgrade/Connection из нашего конфига) — без него редактор подключается, но работает нестабильно. Логи самого сервиса: journalctl -u code-server@dev -e.

Итог

code-server превращает VPS в персональную облачную IDE: полноценный VS Code, доступный по одной ссылке с любого устройства, с кодом и вычислениями на сервере, а не на ноутбуке. Установка — один скрипт, HTTPS — один конфиг Nginx, и среда разработки всегда с вами.

Комфорт здесь напрямую зависит от ресурсов: языковым серверам и сборкам нужны ядра, память и быстрый диск. Тариф Pro за 750₽/мес у Cheap-Host — 12 vCPU, 16 ГБ RAM и 128 ГБ NVMe на KVM в Москве — уверенно тянет code-server с TypeScript-монорепой и Docker в придачу. Сервер выдаётся за 45–60 секунд: https://cheap-host.onl/ — и уже через пару минут можно открывать свою IDE в браузере.

Читайте также