Настройте удалённую разработку с VS Code в браузере

VSCode

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

Code Server выполняет Visual Studio Code на удалённом сервере, доступном через браузер.

Зачем мне это нужно?

  • Согласованная среда: вы можете писать код на хромбуке, планшете или ноутбуке с согласованной средой разработки, пользуясь “домашними” настройками.
  • Мультиплатформенность: все преимущества VS Code будут доступны из любого браузера, включая планшеты.
  • Производительность сервера: вы можете пользоваться возможностями крупных облачных серверов для ускорения тестов, компиляции, загрузок и прочего. С помощью DigitalOcean сервера могут быть масштабированы до любого размера.
  • Экономия заряда батареи: вы сэкономите энергию заряда, т.к. все вычисления будут производиться на сервере.

Настройка

Представленный ниже вариант настройки очень эффективный с точки зрения гибкости, производительности и экономии:

  1. С мобильного устройства на основе заготовленного образа создайте Droplet (виртуальный сервер).
  2. Произведите обновление с GitHub.
  3. Установите VS Code в браузере вместе с Code Server.
  4. Выполните необходимую работу.
  5. Отправьте на GitHub.
  6. Уничтожьте Droplet.

Создание Droplet

Для написания руководства я предпочёл использовать DigitalOcean, т.к. в нём процесс настройки прост и интуитивно понятен. Тем не менее другие платформы также подойдут.

Регистрация

Для начала нужно создать аккаунт на DigitalOcean.

Настройте удалённую разработку с VS Code в браузере — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

Создание Droplet

Теперь можно приступить к созданию виртуального сервера, на котором будет выполняться VS Code Server, соответственно, и ваш проект тоже.

Настройте удалённую разработку с VS Code в браузере — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020
  • Образ: Ubuntu 18.04 (по умолчанию).
  • Тариф: $15/месяц при 2 GB/2 CPU (оптимально).
  • Регион: по умолчанию.
  • Настройки: для ознакомления не понадобятся.
  • Авторизация: создайте новый ключ SSH и выгрузите его в контрольную панель.

Теперь можете жать кнопку “create”.

Подключение через SSH

Лично я использую Terminus, но и любой другой SSH-клиент также подойдёт.

Установка Code Server

Для его установки идите на страницу последних версий и скопируйте ссылку на последний выпуск для Linux.

Настройте удалённую разработку с VS Code в браузере — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

Выполните в консоли следующие команды:

# Скачать последнюю версию Github (вставьте скопированную ссылку)
wget https://github.com/cdr/code-server/releases/download/{version}/code-server{version}-linux-x64.tar.gz
# Распаковать tar
tar -xvzf code-server{version}-linux-x64.tar.gz# Run Code Server
cd code-server{version}-linux-x64
./code-server

Извлеките ваш публичный IP-адрес созданного виртуального сервера из панели управления DigitalOcean и укажите браузеру: http://{публичный ip}:8080.

Скопируйте сгенерированный пароль из вывода консоли и залогиньтесь в Code Server. Теперь полная функциональность VS Code будет доступна вам прямо из браузера.

Настройте удалённую разработку с VS Code в браузере — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

Кастомизация

Авторизация

По умолчанию установлена авторизация через произвольно сгенерированный пароль. Вы же можете изменить переменную среды password, чтобы использовать свой собственный:

sudo nano /etc/environmentand append the following:
PASSWORD= “Your Password”sudo reboot

Расширения

Так как официальный маркетплейс VS Code не может использоваться, у Coder есть свой собственный, который предоставляет открытые расширения.

Настройте удалённую разработку с VS Code в браузере — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

Шрифты

Все шрифты будут работать нормально при условии, что они установлены на локальный компьютер, т.к. отображает текст именно ваш браузер. Например, FiraCode:

Настройте удалённую разработку с VS Code в браузере — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

Создание образа

Запуск при загрузке

Для настройки я добавил задачи планировщика, чтобы при загрузке получать последнюю версию кода с GitHub и изначально использовать её в код-сервере.

crontab -e

И добавьте следующее (просто пример):
 
@reboot cd /root/AwesomeProject && git pull
@reboot /root/code-server[$VERSION]-linux-x86_64/code-server

Снимок состояния

DigitalOcean предоставляет простой способ создания образов серверов, на основе которых Droplet могут быть созданы позднее. Переименуйте сервер и сделайте снимок состояния. Как только закончите, можете уничтожить текущий Droplet.

Настройте удалённую разработку с VS Code в браузере — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

Восстановление

В процессе создания Droplet нажмите на “Snapshots” (снимки состояний) и выберите ранее созданный образ.

Настройте удалённую разработку с VS Code в браузере — IT-МИР. ПОМОЩЬ В IT-МИРЕ 2020

Обратите внимание, что установки региона и тарифного плана ограничены установками виртуального сервера, с которого был сделан снимок состояния.

После создания Droplet у вас, как и ранее, появится возможность доступа к код-серверу с того же места, где вы закончили.

Идём дальше

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

Лично для меня очень удобно получать доступ к контрольной панели DigitalOcean с моего мобильного телефона. Также есть неофициальные приложения, использующие свой собственный API, но с ограниченной функциональностью (Android и iOS).

Протестировав клиент на Android, я сделал вывод, что он полноценно подходит только для создания виртуальных серверов.

Рекомендации

  • Установите с помощью API автоматическое уничтожение Droplet через 24 часа после отправки кода на GitHub, чтобы избежать лишней платы за рабочие часы Droplet.
  • Используйте блочное хранилище для программ, чтобы сохранять последнее состояние, динамически передаваемое новым Droplet при создании, избегая тем самым постоянной передачи данных на GitHub.

Специально для сайта ITWORLD.UZ. Новость взята с сайта NOP::Nuances of programming