Пишите код везде. Настройте сервер кода с помощью VS Code Server

В этом коротком гайде я хочу показать, как легко и просто можно настроить Visual Studio Code Server на виртуальной машине и получить к ней доступ с любого вашего устройства и в любое время. Вы можете использовать ваш iPad, ноутбук и, в некоторых случаях, даже смартфон, чтобы внести изменения в ваш проект. Это очень удобно, а также удобно иметь одну среду разработки. Вы сможете подключаться к вашему виртуальному серверу как с клиента VS Code, так и через браузерную версию vscode.dev.

Для этого примера я буду использовать виртуальную машину с Ubuntu 22.04, 2 vCPUs, 2 GB RAM. Я рекомендую выполнить первоначальную настройку виртуальной машины: создать non-root пользователя, настроить вход по SSH, отключить вход для root и выполнить базовые настройки брандмауэра. Всю эту информацию вы легко сможете найти в интернете.

Установка VS Code CLI

Теперь перейдём к настройке сервера кода. Для создания туннеля нам потребуется VS Code CLI, чтобы его установить выполните следующую команду:

$ curl -Lk 'https://code.visualstudio.com/sha/download?build=stable&os=cli-alpine-x64' --output vscode_cli.tar.gz
$ tar -xf vscode_cli.tar.gz

Далее просто выполните:

$ ./code tunnel

Если вы используете автономную установку или установку через терминал, команды будут начинаться с ./code вместо code.

И вы получите ссылку https://vscode.dev/tunnel/<machine_name>, привязанную к вашему удалённому компьютеру. При первом открытии данного URL вас попросят авторизоваться через GitHub или Microsoft Account.

Это аутентифицирует вас в службе туннелирования, чтобы гарантировать, что у вас есть доступ к нужному набору удалённых компьютеров. Поздравляю, вы уже можете приступать к работе!

Запуск в качестве службы

Чтобы ваш туннель постоянно работал и не завершался после разрыва соединения вашего non-root пользователя с виртуальной машиной, выполните следующие команды:

$ ./code tunnel service install
$ sudo loginctl enable-linger $USER

Чтобы просмотреть журнал сервиса, запустите ./code tunnel service log; а для удаления сервиса — ./code tunnel service uninstall.

Доступ для клиентов веб-API

При разработке вам часто приходится делать тесты через такие веб-клиенты, как Postman, Thunder и так далее. Допустим, вы запустили Node.js-сервер на порту 4000 из вашего сервера кода. После этого произойдёт перенаправление порта (port forwarding) на порт 4000, но вы не сможете выполнить запрос через Postman, так как все туннели защищены. В VS Code CLI нет способа получить токен доступа, но мы можем это сделать через Dev tunnels CLI. Давайте его установим:

$ curl -sL https://aka.ms/DevTunnelCliInstall | bash
$ source ~/.bashrc

Далее нам необходимо пройти авторизацию той же учётной записью, что и в VS Code CLI, вывести список активных туннелей на нашей виртуальной машине и получить токен доступа для этого туннеля:

$ devtunnel user login -d -g # device login with github
$ devtunnel list # get tunnels list
$ devtunnel token <tunnel-id> --scopes connect # create token

После этого мы можем использовать полученный токен в нашем веб-клиенте, передавая его в заголовке запроса как X-Tunnel-Authorization: tunnel <TOKEN>

Заключение

Разработка с использованием VS Code действительно стала удобнее: вы можете подключаться к туннелю через браузер или используя VS Code Desktop с расширением Remote - Tunnels. Это можно делать безопасно с любого устройства и из любого места. Буду рад комментариям и желаю удачи!