Ви закриваєте ноутбук, ідете до кав’ярні й відкриваєте браузер на планшеті. Ваш повний редактор VS Code просто тут, із терміналом, що виконує Claude Code поряд, на сервері, який ви контролюєте. Ніякого локального інструментарію, ніякої синхронізації, ніякого очікування, доки ноутбук прокинеться.
Це поєднання і є те, що будує цей посібник: Code Server (VS Code у браузері) і Claude Code (AI-CLI для кодування від Anthropic) на єдиному Linux VPS. Багато туторіалів охоплюють одне чи інше, але запуск обох на одній машині дає вам IDE у стилі Codespaces з підтримкою ШІ, доступне з будь-якого пристрою, за ціну VPS і з повним root-доступом. Одне уточнення перед початком: Сервер коду тут означає проєкт з відкритим кодом від Coder (coder/code-server), а не VS Code Server від Microsoft і не окрему корпоративну платформу Coder. Вони мають однакову назву й постійно плутаються, тож варто це зафіксувати зараз.
До кінця у вас буде робоче середовище розробки на основі браузера з підтримкою ШІ, що працює на VPS, який вам належить, захищене HTTPS і налаштоване так, щоб пережити обірваний зв’язок.
Коротко
- Стек: Code Server дає вам VS Code у вкладці браузера; Claude Code додає AI-помічник для кодування від Anthropic на тому самому сервері. Ви дістаєтеся всього цього з будь-якого пристрою з браузером.
- Реальна межа RAM — 4 GB, і причина цьому — Claude Code. Code Server сам по собі працює в 1 GB, але Claude Code потребує 4 GB+, тож комбінований стек потребує щонайменше 4 GB RAM, 2 vCPU і 120 GB сховища. Плануйте 8 GB, якщо хочете комфорту.
- Порядок встановлення важить менше за крок автентифікації. Нативні інсталятори для обох інструментів — по одному рядку кожен. Автентифікація Claude Code на сервері без браузера — це та частина, на якій застрягає більшість налаштувань. Ви копіюєте URL входу до свого локального браузера або використовуєте токен чи ключ API.
- Claude Code не безкоштовний. Він потребує платного плану Claude (Pro, Max, Team або Enterprise) чи ключа API Anthropic. Безкоштовний план Claude.ai його не включає.
Що вам знадобиться
Перш ніж почати, переконайтеся, що маєте наведене нижче на місці. Кожне з цього згадується в подальшому кроці, тож варто підтвердити їх зараз, а не виявити прогалину на півдорозі.
- Linux VPS , що відповідає межі розмірів нижче. Ubuntu 22.04 LTS використовується протягом усього цього посібника; команди майже ідентичні на Debian та інших релізах Ubuntu.
- Правильний розмір: щонайменше 4 GB RAM, 2 vCPU, and 120 GB of NVMe storage. Мінімум 4 GB походить від Claude Code, а не Code Server (розділ про розміри пояснює чому).
- Доменне ім’я (необов’язково, але рекомендовано) , якщо ви хочете HTTPS зі справжнім сертифікатом. Ви можете запускати Code Server на IP-адресі, але домен робить крок зі зворотним проксі чистішим.
- Платний план Claude чи ключ API Anthropic. Claude Code потребує підписки Pro, Max, Team або Enterprise чи облікового запису Claude Console (API). Безкоштовний план Claude.ai не включає доступ до Claude Code. Підтвердьте, який із них у вас є, перед кроком встановлення, бо це вирішує, як ви автентифікуєтеся.
- Базовий SSH-доступ до сервера з користувачем, що має права sudo.
Вибір вашого VPS
Перше рішення — розмір, і поширена порада, яку ви знайдете для Code Server, неправильна для цього стека. Більшість посібників із Code Server наводять мінімум 1 GB RAM, що точно для Code Server самого по собі. Щойно ви додаєте Claude Code, ця межа зсувається.
Власний список системних вимог Claude Code 4 GB+ RAM (за документацією з налаштування Claude Code). Code Server потребує приблизно 1 GB. Запуск обох, плюс ваших розширень редактора, активного проєкту й пам’яті, яку використовує агентна сесія Claude Code під час роботи, означає, що реалістична межа комбінованого стека:
| Ресурс | Мінімум | Рекомендовано |
|---|---|---|
| RAM | 4 GB | 8 GB |
| vCPU | 2 | 4 |
| Сховище | 120 GB NVMe | 240 GB NVMe |
| OS | Ubuntu 22.04 LTS | Ubuntu 22.04 LTS |
Стовпець «рекомендовано» — це там, де ви хочете бути, якщо встановлюєте кілька розширень, тримаєте великі проєкти з чималими каталогами node_modules на сервері або запускаєте Claude Code на агентних завданнях, які торкаються багатьох файлів водночас. Мінімум запустить стек; рекомендована специфікація зберігає його комфортним.
Два моменти, що заощаджують вам гроші й плутанину:
GPU не потрібен. Claude Code надсилає свою роботу до API Anthropic, тож увесь інференс моделі відбувається віддалено. Ви не запускаєте модель на своєму сервері. Стандартний CPU VPS — правильний вибір, і оплата за інстанс із GPU тут не купує вам нічого.
Оберіть датацентр близько до вас. Браузерне IDE чутливе до мережевої затримки так, як звичайний вебзастосунок ні, тому що кожне натискання клавіші й редагування файлу подорожує через з’єднання WebSocket до сервера й назад. Чим ближче сервер до того, де ви фізично сидите, тим більше редактор відчувається локальним. Якщо ви кодите з одного регіону більшість часу, оберіть локацію, найближчу до нього.
Ключовий висновок розділу: Розраховуйте розмір під Claude Code, а не Code Server. Вимога Claude Code в 4 GB задає вашу межу. Цифра Code Server в 1 GB не застосовується, щойно обидва інструменти ділять машину.
Встановлення Code Server
Цей крок дає робочий редактор VS Code, доступний у вашому браузері на порту 8080. Code Server постачається зі скриптом встановлення, який виконує налаштування пакета за вас.
Запустіть офіційний інсталятор:
curl -fsSL https://code-server.dev/install.sh | shСкрипт визначає ваш дистрибутив і встановлює Code Server як службу systemd. Щойно він завершиться, запустіть службу й увімкніть її, щоб вона поверталася після перезавантаження:
sudo systemctl enable --now code-server@$USERCode Server за замовчуванням прив’язується до 127.0.0.1:8080 і генерує випадковий пароль при першому запуску. Вам потрібен цей пароль, щоб увійти. Він міститься в згенерованому файлі конфігурації:
cat ~/.config/code-server/config.yamlОчікуваний вивід виглядає так:
bind-addr: 127.0.0.1:8080
auth: password
password: 5f3a9c1b2e8d7460a1f2c3b4
cert: falseСкопіюйте значення пароля. Ви введете його на екрані входу Code Server, щойно сервер стане доступним у вашому браузері, чого зараз немає, бо він прив’язаний до 127.0.0.1 (лише localhost). Це навмисно: безпечне відкриття Code Server — це пізніший крок, зроблений через зворотний проксі, а не відкриттям порту 8080 в інтернет.
Примітка: Code Server обмежує швидкість спроб входу. Якщо ви кілька разів промахнетеся з паролем і вас ненадовго заблокує, це обмежувач швидкості, а не зламане встановлення. Зачекайте хвилину й спробуйте знову.
Якщо ви радше повністю пропустите ручне встановлення, маркетплейс Cloudzy має розгортання Code Server в один клік, яке провізіонує сервер із уже встановленим Code Server. Це швидший шлях, якщо ви обираєте хост зараз; ручні кроки вище працюють на будь-якому Ubuntu VPS, тож решта цього посібника залишається незалежною від постачальника.
Встановлення Claude Code
Цей крок додає AI-помічник для кодування на той самий сервер. Claude Code встановлюється як єдиний бінарник і запускається з термінала: того самого термінала, який ви пізніше відкриєте всередині браузерного IDE.
Використайте нативний інсталятор, який є рекомендованим методом Anthropic:
curl -fsSL https://claude.ai/install.sh | bashПідтвердьте, що він встановлений:
claude --versionЯкщо ви вже запускаєте Node.js 18 чи новішу й віддаєте перевагу керуванню інструментом через npm, цей шлях існує як альтернатива:
npm install -g @anthropic-ai/claude-codeThe native installer is the primary path in Anthropic's current documentation, and it auto-updates in the background. The npm package can also auto-update, but that depends on the npm global directory being writable; if it isn't, Claude Code shows a one-time notice instead of updating silently. Choose the native installer unless you have a specific reason to prefer npm.
Claude Code підтримує Ubuntu 20.04+, Debian 10+ і Alpine 3.19+, тож VPS, який ви розрахували вище, уже кваліфікується. Він потребує платного плану Claude чи ключа API Anthropic, який ви підтвердили в передумовах, а безкоштовний план Claude.ai його не включає.
Для авторитетного довідника зі встановлення поточна документація живе за адресою code.claude.com. (Старіші посилання на docs.anthropic.com перенаправляють туди; використовуйте адресу code.claude.com безпосередньо.)
Автентифікація Claude Code на безголовому сервері
Виконайте claude вперше, і він намагається відкрити вікно браузера, щоб завершити вхід. На віддаленому сервері, до якого дістаються через SSH, немає браузера, який можна відкрити. Це єдиний крок, який зупиняє більшість серверних налаштувань, і він має три чисті рішення.
Прямий метод: скопіюйте URL входу до вашого локального браузера. Коли ви запускаєте claude на сервері, він друкує URL входу (натисніть c , щоб скопіювати його до буфера обміну, якщо він не відкривається автоматично). Відкрийте цей URL у браузері на власній машині, увійдіть і завершіть авторизацію. Якщо браузер показує код входу замість перенаправлення, вставте цей код назад у термінал за запитом Paste code here if prompted. Це нормально для сесій SSH і контейнерів. Це стандартний інтерактивний шлях для підписки Pro чи Max.
Постійний метод: довготривалий токен. Якщо ви не хочете періодично повторно автентифікувати сервер, згенеруйте однорічний токен OAuth:
claude setup-tokenКоманда проводить вас через авторизацію OAuth один раз і друкує токен. Вона не зберігає токен за вас, тож скопіюйте його й установіть як змінну середовища, щоб Claude Code підхоплював його при кожному запуску:
export CLAUDE_CODE_OAUTH_TOKEN=your-token-hereДодайте цей рядок export до профілю вашої оболонки (наприклад, ~/.bashrc), щоб він зберігався між сесіями. Цей токен автентифікується проти вашої підписки й потребує плану Pro, Max, Team або Enterprise.
Метод з ключем API. Якщо ви використовуєте обліковий запис Claude Console (API), а не підписку, установіть свій ключ API натомість:
export ANTHROPIC_API_KEY=sk-ant-your-key-hereОдне зауваження щодо точності, щоб вас не здивував рахунок: ключ API виставляє рахунок за токен через Claude Console, що є окремим шляхом виставлення рахунків від підписки Pro чи Max. Якщо у вас є і підписка, і ANTHROPIC_API_KEY встановлений, ключ API має пріоритет, щойно схвалений. Тож якщо ви маєте намір використовувати свою підписку, не залишайте випадковий ключ API у своєму середовищі.
Ключовий висновок розділу: Три маршрути до автентифікації на безголовій машині: скопіювати URL входу до вашого локального браузера, запустити claude setup-token для довготривалого токена підписки чи встановити ANTHROPIC_API_KEY для прямого виставлення рахунків через API.
Безпечне відкриття Code Server з HTTPS
Зараз Code Server прив’язаний до localhost і обслуговує звичайний HTTP. Ви не хочете відкривати порт 8080 в інтернет і входити через незашифроване з’єднання, тому що будь-хто на мережевому шляху міг би прочитати вашу сесію. Стандартне виправлення — це зворотний проксі, який завершує HTTPS перед Code Server.
Є одне жорстке обмеження, що формує цей крок: Code Server залежить від WebSockets (за вимогами Coder). Редактор використовує постійне з’єднання WebSocket для живого зв’язку з сервером, тож ваш зворотний проксі мусить правильно пересилати оновлення WebSocket. Ось чому вибір проксі має значення.
Використовуйте Caddy чи Nginx. Обидва надійно обробляють проксіювання WebSocket, і обидва доступні як застосунки в один клік у маркетплейсі Cloudzy, якщо ви хочете пропустити їх ручне встановлення. Caddy — коротший шлях, тому що він отримує й поновлює сертифікат Let's Encrypt автоматично. Мінімальний Caddyfile для Code Server:
# /etc/caddy/Caddyfile
code.example.com {
reverse_proxy 127.0.0.1:8080
}Це вся конфігурація. Caddy виявляє оновлення WebSocket і пересилає його без додаткових директив, і він провізіонує HTTPS для code.example.com самостійно. Перезавантажте Caddy за допомогою sudo systemctl reload caddy і перейдіть до https://code.example.com, і ви дістанетеся екрана входу Code Server через зашифроване з’єднання.
Якщо ви віддаєте перевагу Nginx, конфіг довший, тому що ви встановлюєте заголовки оновлення WebSocket явно й отримуєте сертифікат окремо за допомогою Certbot:
# /etc/nginx/sites-available/code-server
server {
listen 80;
listen [::]:80;
server_name code.example.com;
location / {
proxy_pass http://127.0.0.1:8080/;
proxy_set_header Host $host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection upgrade;
proxy_set_header Accept-Encoding gzip;
}
}Примітка: Nginx і Caddy — це два проксі, які документує офіційна документація Coder, і обидва є надійними виборами тут. Apache теж може проксіювати Code Server, але його пересилання WebSocket потребує додаткової конфігурації модуля (proxy_wstunnel плюс правила rewrite), яку офіційна документація не охоплює, і налаштування, що пропускають ці модулі, схильні закінчуватися налагодженням обірваних з’єднань редактора. Якщо ви вже запускаєте Apache для інших сайтів, найпростіший шлях — поставити Code Server за Nginx чи Caddy на окремому vhost, а не налаштовувати Apache на його проксіювання.
Підтримання ваших сесій живими
Дві різні речі працюють на цьому сервері, і вони поводяться по-різному, коли ваш зв’язок обривається. Варто знати, що є що, перш ніж ви втратите годину агентного запуску Claude Code через закриту кришку ноутбука.
Сам Code Server переживає обриви, тому що ви встановили його як службу systemd. Закриття вкладки браузера чи обрив SSH не зупиняє службу Code Server. При звичайних повторних підключеннях ви повертаєтеся до тієї самої сесії браузерного IDE, хоча дуже довгі обриви можуть вимагати перезавантаження вікна залежно від поведінки повторного підключення Code Server.
Claude Code — інакший. Коли ви запускаєте claude в інтерактивному терміналі через SSH, він прив’язаний до тієї сесії термінала. Закрийте вкладку браузера, що тримає той термінал, або обірвіть з’єднання SSH, і процес помирає разом із ним, посеред завдання, якщо він працював. Виправлення — запускати Claude Code всередині мультиплексора термінала, щоб сесія від’єдналася від вашого з’єднання й продовжувала працювати.
tmux — стандартний інструмент для цього. Якщо ви не використовували його раніше, три команди охоплюють те, що вам потрібно:
# Start a new named session
tmux new -s claude
# Run claude inside it as normal, then detach without stopping it:
# press Ctrl-b, then d
# Reattach later, from any new SSH session:
tmux attach -t claudeПочати claude всередині сесії tmux, від’єднайтеся за допомогою Ctrl-b, потім d, і агентний запуск продовжується на сервері. Приєднайтеся знову за допомогою tmux attach -t claude щоразу, коли повторно підключаєтеся (з іншого пристрою, якщо хочете), і ви знову в тій самій живій сесії.
Примітка: screen працює так само, якщо ви вже його використовуєте (screen -S claude для запуску, Ctrl-a, потім d для від’єднання, screen -r claude для повторного приєднання). Будь-який інструмент вирішує ту саму проблему; оберіть той, який знаєте.
Використання Claude Code всередині браузерного IDE
Щойно обидва інструменти на машині, є два способи дістатися Claude Code з браузерного IDE: інтегрований термінал і розширення VS Code. Один із них надійний сьогодні; інший потребує тестування, перш ніж ви на нього покладетеся.
Шлях через термінал працює, за конструкцією. Відкрийте Code Server у своєму браузері, відкрийте його інтегрований термінал (Terminal > New Terminal, або Ctrl+`) і запустіть:
claudeТепер у вас є повний CLI Claude Code, що працює всередині браузерного IDE, у тому самому каталозі, що й проєкт, який ви відкрили. Це надійний шлях: термінал — це справжня оболонка на сервері, а Claude Code — це CLI, встановлений на тому сервері, тож він працює. Поєднайте його з кроком tmux вище, і сесія переживе обірваний зв’язок.
Шлях через розширення VS Code можливий, але шлях через термінал усе ще безпечніша база для цього налаштування. Anthropic публікує розширення Claude Code для VS Code, і її поточна документація каже, що його можна встановити з Open VSX, що має значення, тому що Code Server використовує Open VSX, а не VS Code Marketplace від Microsoft. Спробуйте пошукати «Claude Code» у поданні Extensions Code Server або встановіть розширення Anthropic.claude-code з Open VSX, якщо воно з’являється у вашому інстансі. Якщо розширення не встановлюється чисто, або якщо інтеграція з IDE поводиться інакше, ніж у десктопному VS Code, поверніться до інтегрованого термінала. CLI працює в будь-якому терміналі, і для цього налаштування VPS це надійний шлях.
Розгорніть власне браузерне AI IDE
Тепер у вас є повна картина: доступний у браузері редактор VS Code із Claude Code поряд, захищений HTTPS і налаштований так, щоб пережити обірваний зв’язок, на VPS, який ви контролюєте.
Єдина частина цього, яка є чистою настроювальною роботою, — це початок: провізіонування сервера й встановлення Code Server, перш ніж ви зможете зробити щось цікаве. Якщо ви хочете це пропустити, ми пропонуємо розгортання Code Server в один клік у маркетплейсі Cloudzy, яке провізіонує VPS із уже запущеним Code Server, тож ви приземляєтеся прямо на екрані входу й переходите безпосередньо до встановлення Claude Code й автентифікації. Для регулярного щоденного використання все ж поставте інстанс за HTTPS із Caddy чи Nginx, як показано вище, замість того щоб трактувати сирий http://<server-ip>:8080 вхід як кінцевий продакшн-шлях доступу.
Те саме Linux VPS хостить увесь стек (редактор, AI CLI і зворотний проксі) з root-доступом, якого потребує це налаштування. Звідти кроки вище — це все, що стоїть між вами й кодуванням із ШІ з будь-якого браузера.
Якщо ви все ще зважуєте, на якому AI-CLI для кодування зупинитися, перш ніж будувати це, наші порівняння OpenCode проти Claude Code і ширше протистояння агентних CLI для кодування охоплюють компроміси.
Часті запитання
Які специфікації VPS мені потрібні для Code Server і Claude Code?
Вам потрібно щонайменше 4 GB RAM, 2 vCPU і 120 GB сховища для комбінованого стека. Мінімум 4 GB зумовлений Claude Code, а не Code Server (Code Server сам по собі працює приблизно в 1 GB). Для комфортного використання з розширеннями й більшими проєктами рекомендований розмір — 8 GB RAM і 4 vCPU.
Чи безкоштовний Claude Code?
Ні. Claude Code потребує платного плану Claude (Pro, Max, Team або Enterprise) чи ключа API Anthropic через Claude Console. Безкоштовний план Claude.ai не включає доступ до Claude Code.
Як мені автентифікувати Claude Code на сервері без браузера?
Запустіть claude й скопіюйте URL входу, який він друкує, у браузер на вашій локальній машині, щоб завершити вхід, вставивши код назад у термінал, якщо буде запит. Для постійного сервера запустіть claude setup-token, щоб згенерувати однорічний токен OAuth, і встановіть його як CLAUDE_CODE_OAUTH_TOKEN, або встановіть ANTHROPIC_API_KEY для автентифікації ключем API Claude Console.
Чи працює розширення Claude Code для VS Code всередині Code Server?
CLI Claude Code працює повністю всередині інтегрованого термінала Code Server, що є найнадійнішим способом використати його в цьому браузерному налаштуванні IDE. Розширення VS Code також варто спробувати, тому що Anthropic каже, що його можна встановити з Open VSX, а Code Server використовує Open VSX, а не VS Code Marketplace від Microsoft. Якщо розширення не встановлюється чисто чи поводиться інакше у вашому інстансі, використайте шлях через інтегрований термінал натомість.
Чи можу я використовувати це з iPad або телефона?
Так. Code Server працює на основі браузера, тож будь-який пристрій із сучасним браузером (зокрема iPad чи телефон) дістається повного IDE. Цей незалежний від пристрою доступ — головна перевага браузерного IDE над VS Code Remote SSH, який потребує локального встановлення VS Code для підключення.
