Live server vs code как настроить

Установка Visual Studio Code в облаке

Облачные сервисы давно и плотно вошли в нашу жизнь, сейчас уже немыслимо представить себе без них современное существование в цифровом пространстве, они существенно упрощают жизнь и снижают порог входа в IT для небольших компаний, освобождая их от необходимости закупать и настраивать свою собственную инфраструктуру. К облакам подключены смартфоны и компьютеры, в них переносится все больше данных и сервисов.

Интегрированные среды разработки тоже не избежали переноса в облака. Около десяти лет назад это было диковинкой, Cloud IDE только начинали развиваться, но потом на них обратили внимание самые крупные игроки IT-индустрии.

Amazon выкупили и развивают сервис Cloud9:

Google встроили в свою облачную платформу Cloud Shell Editor:

Microsoft сначала создавали свою собственную облачную платформу для разработки, но потом отказались от нее в пользу решения, которое сейчас готовит GitHub — Codespaces:

Всех их объединяет одна идея: «Пользуйтесь инструментами для разработки в любом месте и на любой платформе!». Производительность IDE больше не зависит от личного компьютера, нет необходимости покупать мощный и дорогой десктоп или еще более дорогой ноутбук — вычислениями будет заниматься облако. А пользователь получит среду для разработки не зависящую от его системы, не требующую локальной настройки, работать в облачной IDE можно даже на планшете, если подключить к нему мышку и клавиатуру. И это будет не vi через скупую консоль, а полноценное GUI-приложение.

Есть и менее распространенные облачные среды для разработки, от простых «песочниц» типа CodePen, до более серьезных, вроде Codenvy, которую взяла под крыло Red Hat.

Но у всех перечисленных решений есть еще несколько общих черт: они работают на своих собственных серверах; некоторые требуют оплаты за часть рабочего функционала; их интерфейс требует привыкания. Решить эти проблемы можно установив привычную Cloud IDE на арендованном VPS. Оплата будет только за аренду сервера нужной мощности, никаких ограничений по возможностям, а интерфейс будет знаком и привычен огромному числу разработчиков, потому что это не что иное — как Microsoft Visual Studio Code. Такая возможность недавно появилась благодаря проекту code-server. В этой статье будет описана пошаговая установка VS Code на виртуальный сервер RuVDS.

Подготовка сервера к установке

Сначала надо выбрать и запустить тестовый VPS. Для демонстрации я выбрал виртуальный сервер RUCLOUD в Москве, чтобы уменьшить ping:

Самый доступный вариант с дисковой системой на SSD:

Этого достаточно, чтобы проверить функционирование Cloud IDE и работы над самыми простыми проектами, не требующими большой вычислительной мощности.

После коннекта в свежему серверу с пользователем root, проведем первоначальную настройку. Сначала заведем нового пользователя и добавим его в группу sudo:

adduser
adduser sudo

Затем отключим авторизацию пользователя root через SSH, для этого в файле /etc/ssh/sshd_config нужно изменить параметр PermitRootLogin yes на no

Для упрощения описания, оставим вход по паролю, не занимаясь генерацией ключей. Потом исправим файл host, добавив в него имя виртуальной машины, чтобы не получать предупреждение «sudo: unable to resolve host ruvds-xx12x: Name or service not known»:

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

завершаем настройку установкой правил для файрвола:

Проверим настройки командой sudo ufw status.

Вывод программы должен быть таким:

Обновим систему и установим веб-сервер nginx:

После этого в файрвол будут добавлено несколько новых профилей, которые можно посмотреть командой sudo ufw app list:

Для проверки настроек веб-сервера нам потребуются оба вида подключения, активируем их:

Убедимся, что все включено правильно:

Проверяем, что веб-сервер запущен:

Вывод должен быть примерно таким:

nginx.service — A high performance web server and a reverse proxy server
Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
Active: active (running) since Fri 2020-04-20 16:08:19 UTC; 3 days ago
Docs: man:nginx(8)
Main PID: 2369 (nginx)
Tasks: 2 (limit: 1153)
Memory: 3.5M
CGroup: /system.slice/nginx.service
├─2369 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
└─2380 nginx: worker process

Проверим в браузере, отдает ли сервер страницу нашего сайта ( — это адрес вашего VPS):

http://

Должен появиться следующий текст:

Первоначальная настройка закончена, приступим к установке среды разработки.

Для начала создадим директорию, где будут храниться все данные IDE и перейдем в нее:

Затем скачаем последнюю версию релиза проекта и распакуем его. Номер релиза можно узнать по адресу: https://github.com/cdr/code-server/releases. На данный момент это v3.8.0, а файл для него называется: code-server-3.8.0-linux-amd64.tar.gz

Получившуюся директорию надо скопировать в /usr/lib/code-server

Потом сделать сим-линк на исполняемый файл IDE и создать директорию, где будут храниться данные пользователя::

Пришло время настройки службы облачной среды разработки. Создайте в редакторе файл code-server.service и добавьте туда следующие строки:

sudo nano /lib/systemd/system/code-server.service

[Unit]
Description=code-server
After=nginx.service

[Service]
Type=simple
Environment=PASSWORD=
ExecStart=/usr/bin/code-server —bind-addr 127.0.0.1:8080 —user-data-dir /var/lib/code-server —auth password
Restart=always

[Install]
WantedBy=multi-user.target

Обязательно установите пароль , по нему будет осуществляться вход в IDE, лучше выбрать не совпадающий с паролем к учетной записи.

Почти все готово, можно запускать службу:

Проверим статус ее работы.

Если все было сделано правильно, то он будет Active: active (running):

code-server.service — code-server
Loaded: loaded (/lib/systemd/system/code-server.service; disabled; vendor preset: enabled)
Active: active (running) since Mon 2020-12-21 07:28:53 MSK; 4s ago
Main PID: 32357 (node)
Tasks: 22 (limit: 1094)
Memory: 55.6M
CGroup: /system.slice/code-server.service
├─32357 /usr/lib/code-server/lib/node /usr/lib/code-server —bind-addr 127.0.0.1:8080 —user-data-dir /var/lib/code-server —aut>
└─32390 /usr/lib/code-server/lib/node /usr/lib/code-server —bind-addr 127.0.0.1:8080 —user-data-dir /var/lib/code-server —aut>

Чтобы служба сама перезапускалась в случае сбоев, выполним следующую команду:

Осталось привязать к нашему серверу домен, защитить его установив сертификат от Let’s Encrypt и настроить Nginx для работы с ним. Бесплатный домен легко получить на сайте https://www.freenom.com, его вполне достаточно для запуска нашей среды. О том, как привязать его, можно прочитать в справочном разделе RuVDS.

Файл конфигурации создаем в редакторе:

И добавляем туда следующие строки:

server <
listen 80;
listen [::]:80;

location / <
proxy_pass http://localhost:8080/;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection upgrade;
proxy_set_header Accept-Encoding gzip;
>
>

На место надо подставить ваш домен, который вы зарегистрировали для IDE. Чтобы конфигурация заработала, надо сделать на нее символическую ссылку в директорию /etc/nginx/sites-enabled.

На всякий случай проверим валидность настроек:

Если все в порядке, то мы увидим в консоли следующий текст:

За последние несколько лет нас приучили к тому, что сайты должны быть защищены и работать по протоколу HTTPS, сайт, который работает без SSL кажется странным и выглядит это неловко, будто админу лень прописать пару строчек в консоли. Потому мы возьмем сертификат от известной компании Let’s Encrypt и облачная IDE будет готова к использованию.

Установим один из самых распространенных ботов по настройке:

А потом, с его помощью, зарегистрируем и установим сертификат для нашего домена :

sudo certbot —nginx -d

В процессе настройки нам придется ответить на несколько вопросов: ввести адрес своей электронной почты, согласиться с правилами сервиса, поделиться (или нет) адресом почты с Electronic Frontier и настроить принудительный редирект на HTTPS (рекомендуется). Вдогонку, можно установить Git:

Откройте в браузере ваш сайт и вы получите приглашение от VS Code на ввод пароля, который указывали в файле конфигурации

Среда запущена, мы видим привычный интерфейс VS Code:

Можно приступать к работе. В качестве теста попробуем отредактировать файл со стандартным приглашением Nginx.

Заменим nginx на VS Code, и обновим страницу, которую выдает сервер в ответ на прямое обращение по IP-адресу:

Это полностью функциональный и привычный VS Code, он будет работать с системой контроля версий:

К нему можно подключать плагины:

IDE ничем не отличается от десктопного приложения, за исключением того, что работает на удаленном сервере и запускается в браузере.

Источник

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

В этом руководстве я расскажу о настройке 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.

Создание Droplet

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

• Образ: Ubuntu 18.04 (по умолчанию).
• Тариф: $15/месяц при 2 GB/2 CPU (оптимально).
• Регион: по умолчанию.
• Настройки: для ознакомления не понадобятся.
• Авторизация: создайте новый ключ SSH и выгрузите его в контрольную панель.

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

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

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

Установка Code Server

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

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

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

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

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

Авторизация

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

Расширения

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

Шрифты

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

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

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

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

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

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

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

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

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

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

Идём дальше

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

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

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

Источник