Помощь
Гайды

Настройка Code Server или Theia IDE на VPS: как я переехала в облако с комфортом

ГлавнаяНастройка Code Server или Theia IDE на VPS: как я переехала в облако с комфортом

Содержание

Я честно долго сопротивлялась идее писать код через браузер. Привычка открывать VS Code локально была такой же стабильной, как кружка чая у ноутбука. Но в какой-то момент стало слишком много: два компа, один VPS, быстрые фиксы с телефона — и всё это требовало синхронизации, туннелей, вечного

scp
и “где у меня этот файл был вообще?”. Так я пришла к удалённой IDE. Сегодня расскажу, как подняла VS Code Server и Theia IDE на VPS, и почему не жалею ни минуты.

Зачем вообще IDE на сервере?

Если вы тоже фрилансерка или работаете с несколькими машинами, знакомо: переключаешься с одного устройства на другое — и начинается: «тут нет ключа», «а тут не тот Python», «где мой .env?». А ещё бывают ситуации, когда нужно быстро править код — а у тебя только iPad или слабенький ноут.

Вот тут и приходит спасение: кодовая среда в браузере, которая работает прямо на VPS. А значит:

  • всегда одинаковая среда,
  • доступ с любого устройства,
  • никаких зависимостей локально.

VS Code Server (Code-Server): мой выбор #1

Начала я с code-server — это тот же любимый Visual Studio Code, только запускается на сервере и открывается в браузере. Интерфейс тот же, плагины те же, удобство — на месте.

Установка (на Ubuntu VPS):

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

После установки:

sudo systemctl enable --now code-server@$USER

Файл конфигурации:

~/.config/code-server/config.yaml

Там можно задать пароль, порт, автологин и т.п.

Доступ через браузер

По умолчанию code-server крутится на

localhost:8080
. Я прокинула его через Nginx:

server {
    listen 80;
    server_name ide.my-domain.com;

    location / {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection upgrade;
        proxy_set_header Accept-Encoding gzip;
    }
}

И подключила Let’s Encrypt, чтобы не ловить тревогу от браузера при каждой загрузке.

Eclipse Theia — почти VS Code, но со своей атмосферой

Eclipse Theia — это ещё одна веб-IDE, внешне очень похожа на VS Code, но чуть более “академичная”. Она тоже запускается на VPS и работает в браузере. У неё тоже есть плагины, терминал, работа с Git, и даже дебаггер.

Установка (через Docker):

docker run -it \
  -p 3000:3000 \
  -v "$(pwd):/home/project:cached" \
  theiaide/theia:latest

Вот и всё — открываете

http://your-vps-ip:3000
и работаете.

Что мне больше понравилось?

Обе IDE хороши, но я осталась на code-server, потому что:

  • быстрее стартует;
  • более “родной” VS Code UI;
  • проще кастомизировать под себя.

Но у Theia есть свои фишки: например, в enterprise-версиях можно собирать свою сборку с нужными расширениями. Для компаний — топ.

Как это изменило мою работу

Серьёзно, это было как переезд в новую квартиру. Всё организовано, ничего не теряется. Я стала спокойно переключаться между ноутбуком и стационарным ПК. Иногда даже правлю баги прямо с планшета — открыл браузер, подключился к VPS, и всё как на ладони.

Плюс — никакой зависимости от IDE, установленной на железе. Поставила себе на Android-устройство Termux + браузер, и могу пушить фикс прямо из поезда. Ну разве не кайф?

Минусы? Конечно, без них не обошлось

  • Нужно продумать безопасность: обязательно HTTPS, пароль и ограничение доступа по IP.
  • При плохом интернете работать некомфортно.
  • Иногда обновления code-server конфликтуют с расширениями (но это редкость).

Что ещё можно подключить:

  • Docker — чтобы запускать проекты в контейнерах прямо в IDE;
  • Git sync — чтобы пушить коммиты без локального Git;
  • Tailscale — если не хотите открывать порт в интернет вообще.

🛠 Конфигурация для Code-Server на VPS (Ubuntu/Debian)

~/.config/code-server/config.yaml

bind-addr: 127.0.0.1:8080
auth: password
password: mystrongpassword123
cert: false

⚠️ Не забудьте сменить

password
на свой.

🔐 Пример Nginx-конфига для безопасного доступа

Файл:

/etc/nginx/sites-available/code-server.conf

server {
    listen 80;
    server_name ide.my-domain.com;

    location / {
        proxy_pass http://localhost:8080/;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection upgrade;
        proxy_set_header Accept-Encoding gzip;
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Подключение сертификата:

sudo certbot --nginx -d ide.my-domain.com

🧪 Пример .env для проектов

# База данных
DB_HOST=localhost
DB_PORT=5432
DB_NAME=myapp
DB_USER=postgres
DB_PASSWORD=secret

# Прочее
APP_ENV=development
APP_PORT=3000
JWT_SECRET=supersecretkey

📦 Docker-команда для Theia IDE

docker run -d \
  --name theia \
  -p 3000:3000 \
  -v ~/projects:/home/project \
  theiaide/theia:latest

Theia автоматически подхватит директорию с проектом.

Ценим тех, кто надолго

При оплате на год мы добавим ещё месяц.

Месяц в подарок
COPIED
NEWCOMM COPIED