Live server vs code не работает ubuntu

Обновлено: 03.07.2024

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

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

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

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

Настройка

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

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

Создание Droplet

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

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

Создание Droplet

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

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

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

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

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

Установка Code Server

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

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

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

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

Авторизация

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

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

Расширения

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

Шрифты

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

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

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

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

И добавьте следующее (просто пример):

@reboot cd /root/AwesomeProject && git pull
@reboot /root/code-server[$VERSION]-linux-x86_64/code-server

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

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

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

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

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

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

Идём дальше

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

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

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

В этой статье мы разберемся, как настроить удаленную разработку в VS Code через плагин remote-ssh.

Все последующие действия провожу в операционной системе семейства linux (linux mint 20.1), если вы собираетесь настраивать Remote-SSH в Windows 10, то рекомендуется предварительно настроить WSL, об этом процессе можно прочитать, перейдя по ссылке.

Установка Remote-SSH в редактор VSCode

Перейдите в Расширение и в поиске найдите пакет Remote SSH , разработчиком которого указана компания Microsoft. Нажмите на кнопку «Установить», чтобы установить пакет.

Также автоматически будут установлены дополнительные пакеты.

Настройка SSH-соединения в редакторе VSCode

Есть два способа настроить подключение по SSH.

Аутентификация с вводом пароля.
Аутентификация через SSH ключи.

Рекомендуется использовать аутентификацию на основе ключей SSH, поскольку она более безопасна и уменьшает время, связанное с постоянным вводом паролей. Нажмите F1 или CTRL + SHIFT + P и введите remote-ssh . Он покажет список доступных команд. Выберите Add New SSH Host .

Теперь вам нужно ввести строку состоящую из команды подключения к ssh соединению, точно также как происходит процесс подключения к ssh серверу через консоль.

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

Рекомендуется создать собственный файл конфигурации, выбрав «Настройки» и указав расположение своего файла. Вы также можете добавить параметр remote.SSH.configFile в файл settings.json и обновить расположение пользовательской конфигурации.

Ниже приведены параметры, сохраненные в файле конфигурации как часть предыдущих шагов. Вы можете сразу же настроить этот файл, а не делать это через vscode.

Вот как работает этот файл конфигурации:

Host: указывает имя вашего хоста. Это позволяет использовать короткое имя или аббревиатуру вместо полного IP-адреса либо имя хоста при подключении к серверу.
HostName: фактическое имя хоста сервера, которое представляет собой либо IP-адрес, либо полностью квалифицированное доменное имя.
User: пользователь, от имени которого вы хотите выполнить подключение.
IdentityFile: путь к вашему закрытому ключу SSH. На системах Mac и Linux вы найдете ее в домашнем каталоге в скрытом каталоге .ssh , обычно id_rsa . Если вы используете Windows, у вас будет указано местоположение для сохранения этого файла при его создании с помощью putty-gen .

Подключитесь к удаленному серверу SSH с помощью ввода пароля в VSCode

Теперь давайте подключимся к удаленному хосту, нажав F1 или CTRL + SHIFT + P -> REMOTE-SSH -> CONNECT TO HOST -> CHOOSE HOST IP .

Теперь вам будет предложено проверить fingerprint, поскольку это первое подключение к удаленному компьютеру.

После того, как вы нажмете Continue , вам будет предложено ввести пароль. После ввода пароля он успешно подключится к удаленной машине SSH.

Подключитесь к удаленному серверу SSH с помощью ключа авторизации в VSCode

Для активации SSH key-based authentication, сгенерируйте пару публичного и приватного ssh ключей с помощью следующей команды.

И скопируйте публичный ключ на удаленный сервер с помощью следующей команды (заменив username@host на своё значение)

Теперь войдите на хост вручную, чтобы проверить, нормально ли работает аутентификация на основе ключей. Затем, откройте файл конфигурации SSH в VScode и добавьте параметр ниже. Этот параметр направляет на ваш файл с секретным ключом и указывает vscode использовать аутентификацию на основе ключей вместо аутентификации на основе пароля.

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

Чтобы открыть логи, нажмите F1 или CTRL + SHIFT + P –> REMOTE-SSH –> Show Log .

Чтобы закрыть активное соединение, выберите close remote connection , нажав F1 или CTRL + SHIFT + P -> REMOTE-SSH -> Close Remote Connection , или просто закройте vscode, который отключит сеанс.

ProxyCommand

Иногда вам может потребоваться подключиться с вашего настольного компьютера или ноутбука к удаленному компьютеру через интранет вашей компании или за брандмауэром. В этом случае вы можете использовать промежуточный сервер или jump-box. Этот тип настройки полезен, если вы работаете в защищенной системе, которая настроена на прием SSH-соединений только от фиксированного набора хостов.

Чтобы использовать настройку jump-box с расширением Remote-SSH, вы можете использовать параметр конфигурации ProxyCommand . Эта конфигурация откроет фоновое SSH-соединение с jump-box, а затем подключится через частный IP-адрес к цели.

Вы можете установить параметр конфигурации ProxyCommand в файле конфигурации SSH следующим образом:

ControlMaster

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

Вместо того, чтобы открывать несколько соединений SSH, вы можете использовать опцию ControlMaster (только на клиентах macOS/Linux), чтобы повторно использовать существующее соединение и сократить количество раз, когда вы должны вводить вашу фразу-пароль.

Чтобы использовать эту функцию, добавьте следующее в ваш конфигурационный файл SSH:

Автономный удаленный компьютер

В настоящее время это экспериментальная функция, но она будет включена по умолчанию в следующем выпуске.

Если вы ограничены брандмауэром или ваша компания блокирует ваши виртуальные машины, и они не могут подключиться к Интернету, расширение Remote-SSH не сможет подключиться к вашей виртуальной машине, поскольку VS Code должен загрузить компонент, называемый VS Code Server, на удаленную машину.

Однако теперь вы можете решить эту проблему с помощью нового пользовательского параметра в расширении Remote-SSH. Если вы включите параметр remote.SSH.allowLocalServerDownload , расширение сначала установит VS Code Server на клиент, а затем скопирует его на сервер через SCP.

Настройка Remote-SSH для подключения к хостингу BEGET

Настроить авторизацию к докер контейнеру бегет без ввода пароля
Добавить автоматический вход в докер контейнер при авторизации к ssh

Настройка авторизации к докер контейнеру бегет без ввода пароля

Подключаемся к ssh вашего хостинга бегет, затем вводим команду

Вводим пароль подключения и нажимаем enter.

Теперь проверим, что всё прошло успешно, пробуем подключится к докер контейнеру

Если подключение прошло без ввода пароля, значит всё работает.

Автоматический вход в докер контейнер beget при авторизации к ssh

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

Убеждаемся, что находимся в домашней директории (

). Редактируем файл .bashrc .

Добавляем в самый верх следующие строки

Пробуем подключиться через Remote-SSH.

Заключение

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

Теперь у вас есть Visual Studio Code, настроенный для разработки на удаленном сервере с помощью SSH. Удаленное исполнение при помощи IDE обеспечивает множество преимуществ, в том числе способность быстро тестировать процесс выполнения вашего кода на различных операционных системах и с различными техническими спецификациями оборудования. Если у вас есть подключение к Интернету, вы можете подключаться к вашему серверу и работать над вашим кодом с любого компьютера, а также можете заниматься разработкой в среде Linux, даже если будете использовать Windows в качестве основной операционной системы.

Visual Studio Code - это современная и очень удобная интегрированная среда разработки от Microsoft написанная на основе платформы Electron и NodeJS. Здесь есть встроенный отладчик кода, поддержка контроля версий с помощью Git, подсветка синтаксиса для множества языков, автодополнение кода, интегрированный терминал, поддержка рефракторинга и сниппеты.

В этой статье мы рассмотрим, как установить Visual Studio Code на Ubuntu 18.04 или более поздних версий. Для этого лучше всего использовать официальный репозиторий от Microsoft. Однако можно также воспользоваться snap-пакетом или центром приложений Ubuntu.

Установка Visual Studio Code на Ubuntu

Для работы репозитория нужно установить несколько пакетов. Для этого выполните команду:

Затем установите ключ репозитория:

И добавьте сам репозиторий:

sudo add-apt-repository "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main"

После этого остается обновить списки пакетов и установить VS Code:

sudo apt update
sudo apt install code

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

Главное окно программы будет выглядеть вот так:

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

Также можно установить программу с помощью менеджера пакетов snap. Для этого выполните:

sudo snap install --classic code

А ещё программа есть в центре приложений Ubuntu:

Удаление Visual Studio Code в Ubuntu

Удалять программу надо так, как вы её устанавливали. Если установка Visual Studio Code Ubuntu 18.04 выполнялась из репозитория Microsoft, то для удаления выполните:

sudo apt purge code

Затем можно отключить репозиторий с помощью утилиты Программы и обновления:

А если установка выполнялась через менеджер пакетов snap или центр приложений, то для удаления достаточно выполнить:

sudo snap remove code

Выводы

Теперь у вас есть успешно установленная VS Code Ubuntu 18.04, и вы можете переходить к её настройке, а затем к программированию. Далее вам нужно настроить внешний вид среды, а также установить необходимые дополнения. Но об этом поговорим в следующих статьях.

Нет похожих записей

Статья распространяется под лицензией Creative Commons ShareAlike 4.0 при копировании материала ссылка на источник обязательна.

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

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

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

Настройка

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

Создание Droplet

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

Создание Droplet

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

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

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

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

Установка Code Server

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

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

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

Авторизация

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

Расширения

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

Шрифты

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

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

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

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

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

Идём дальше

Читайте также: