Установка облачной IDE-платформы code-server в Ubuntu 18.04

Development, Ubuntu | Amber | Комментировать запись

С переходом инструментов разработки в облачную среду начала расти потребность в создании и внедрении облачных платформ IDE (Integrated Development Environment, интегрированная среда разработки). Облачные IDE-среды позволяют большим командам разработчиков совместно развивать проект в режиме реального времени. При этом они используют единую среду, что сводит к минимуму несовместимости и повышает производительность. Облачные IDE, доступные в веб-браузерах, работают с любого типа современного устройства.

code-server – это среда Microsoft Visual Studio Code, работающая на удаленном сервере и доступная в простом браузере. Visual Studio Code – это современный редактор кода со встроенной поддержкой Git, отладчиком кода, умным автозаполнением и настраиваемыми и расширяемыми функциями. Это означает, что вы можете использовать различные устройства под управлением разных операционных систем и при этом всегда иметь под рукой согласованную среду разработки.

В этом мануале вы узнаете, как настроить облачную IDE-платформу на своем сервере Ubuntu 18.04 и открыть к ней доступ на своем домене, используя бесплатные сертификаты Let’s Encrypt. В результате у вас будет установка Microsoft Visual Studio Code, доступная по вашему домену и защищенная паролем.

Требования

• Сервер Ubuntu 18.04, настроенный по этому мануалу.
• 2 Гб оперативной памяти минимум.
• Веб-сервер Nginx (установить его поможет этот мануал).
• Две DNS-записи А (для your-domain и www.your-domain), направленные на ваш внешний IP-адрес.
• Полностью зарегистрированное доменное имя для хоста code-server, указывающее на ваш сервер. В этом мануале будет использоваться домен code-server.your-domain.

1: Установка code-server

Сначала мы установим code-server на своем сервере. Для этого нужно загрузить последнюю версию и создать сервис systemd, который будет постоянно поддерживать code-server в фоновом режиме. Также необходимо настроить политику перезапуска сервиса, чтобы code-server восстанавливался после возможных сбоев или перезагрузок.

Все данные, относящиеся к code-server, будут храниться в папке ~/code-server. Создайте эту папку, выполнив следующую команду:

mkdir ~/code-server

Перейдите в нее:

cd ~/code-server

Вам нужно перейти на страницу релизов code-server на Github и выбрать последнюю сборку для Linux (файл будет содержать «linux» в названии). На момент написания статьи последняя версия – это 2.1692. Загрузите ее с помощью инструмента wget, выполнив следующую команду:

wget https://github.com/cdr/code-server/releases/download/2.1692-vsc1.39.2/code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz

Затем распакуйте архив:

tar -xzvf code-server2.1692-vsc1.39.2-linux-x86_64.tar.gz

Вы получите папку с именем, точно совпадающим с исходным файлом code-server, который вы скачали. Перейдите в эту папку:

cd code-server2.1692-vsc1.39.2-linux-x86_64

Скопируйте исполняемый файл code-server в /usr/local/bin, чтобы сделать его общедоступным в системе, выполнив следующую команду:

sudo cp code-server /usr/local/bin

Затем создайте папку для code-server, где будут храниться пользовательские данные:

sudo mkdir /var/lib/code-server

Теперь, когда вы скачали code-server и сделали приложение доступным во всей системе, вы можете создать сервис systemd – это позволяет постоянно поддерживать работу code-server в фоновом режиме.

Конфигурацию сервиса нужно хранить в файле code-server.service, в каталоге /lib/systemd/system, где systemd хранит другие свои сервисы. Создайте такой файл:

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

Вставьте в него такие строки:

[Unit] Description=code-server
After=nginx.service
[Service] Type=simple
Environment=PASSWORD=your_password
ExecStart=/usr/local/bin/code-server --host 127.0.0.1 --user-data-dir /var/lib/code-server --auth password
Restart=always
[Install] WantedBy=multi-user.target

Сначала в этом файле идет описание сервиса. Затем указывается, что сервис nginx должен быть запущен раньше, чем данный сервис. После раздела [Unit] определяется тип сервиса (simple означает, что процесс нужно просто запустить) и задается команда, которую нужно выполнить.

Также здесь сказано, что глобальный исполняемый файл code-server должен запускаться с несколькими специальными аргументами. Флаг –host 127.0.0.1 привязывает его к localhost, поэтому он доступен только внутри вашего сервера. Флаг –user-data-dir /var/lib/code-server устанавливает каталог пользовательских данных, а –auth password настраивает парольную аутентификацию посетителей (она происходит с помощью пароля, указанного в переменной среды PASSWORD, объявленной в строке выше).

Не забудьте заменить your_password на сложный пароль. Затем сохраните и закройте файл.

Следующая строка позволяет systemd перезапускать code-server при любых событиях сбоя (например, в случае остановки процесса). Раздел [Install] рассказывает systemd, как запускать этот сервис при запуске сервера.

Запустите сервис code-server, выполнив следующую команду:

sudo systemctl start code-server

Убедитесь, что он запустился:

sudo systemctl status code-server
code-server.service - code-server
Loaded: loaded (/lib/systemd/system/code-server.service; disabled; vendor preset: enabled)
Active: active (running) since Mon 2019-12-09 20:07:28 UTC; 4s ago
Main PID: 5216 (code-server)
Tasks: 23 (limit: 2362)
CGroup: /system.slice/code-server.service
├─5216 /usr/local/bin/code-server --host 127.0.0.1 --user-data-dir /var/lib/code-server --auth password
└─5240 /usr/local/bin/code-server --host 127.0.0.1 --user-data-dir /var/lib/code-server --auth password
Dec 09 20:07:28 code-server-ubuntu-1804 systemd[1]: Started code-server.
Dec 09 20:07:29 code-server-ubuntu-1804 code-server[5216]: info  Server listening on http://127.0.0.1:8080
Dec 09 20:07:29 code-server-ubuntu-1804 code-server[5216]: info    - Using custom password for authentication
Dec 09 20:07:29 code-server-ubuntu-1804 code-server[5216]: info    - Not serving HTTPS

Чтобы code-server запускался автоматически после перезагрузки сервера, включите сервис, выполнив следующую команду:

sudo systemctl enable code-server

Итак, вы загрузили code-server и сделали его доступным глобально. Затем вы создали для него системный сервис и включили его, что добавило code-server в автозагрузку. Сейчас мы откроем доступ к нему на своем домене, настроив Nginx в качестве обратного прокси-сервера между посетителями и code-server.

2: Настройка доступа к code-server в интернете

В этом разделе вы узнаете, как настроить Nginx в качестве обратного прокси-сервера для code-server.

Как вы уже знаете, неактивные конфигурации сайта в Nginx хранятся в /etc/nginx/sites-available; чтобы включить эти файлы, нужно создать симлинк в /etc/nginx/sites-enabled.

Вы будете хранить конфигурацию code-server для настройки доступа к нему по вашему домену в файле code-server.conf, в каталоге /etc/nginx/sites-available. Начните с создания этого файла:

sudo nano /etc/nginx/sites-available/code-server.conf

Вставьте в него:

server {
listen 80;
listen [::]:80;
server_name code-server.your-domain;
location / {
proxy_pass http://localhost:8080/;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection upgrade;
proxy_set_header Accept-Encoding gzip;
}
}

Замените code-server.your-domain вашим доменом, а затем сохраните и закройте файл.

В этом файле вы определили HTTP порт 80, который должен прослушивать Nginx. Затем вы указали параметр server_name, который сообщает Nginx, для какого домена принимать запросы и применять эту конкретную конфигурацию. В следующем блоке location (/) вы указали, что запросы должны передаваться для code-server, работающего на localhost:8080. Следующие три строки (начиная с proxy_set_header) позволяют Nginx переносить некоторые заголовки HTTP-запросов, необходимые для правильного функционирования веб-сокетов, которые широко использует code-server.

Чтобы активировать эту конфигурацию, вам нужно создать симлинк на нее в /etc/nginx/sites-enabled, выполнив такую команду:

sudo ln -s /etc/nginx/sites-available/code-server.conf /etc/nginx/sites-enabled/code-server.conf

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

sudo nginx -t

Вы увидите следующий вывод:

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Чтобы настройки вступили в силу, нужно перезапустить Nginx:

sudo systemctl restart nginx

Теперь code-server доступен на вашем домене. На следующем этапе мы защитим его, установив бесплатный TLS сертификат Let’s Encrypt.

3: Установка сертификата Let’s Encrypt

В этом разделе вы защитите свой домен с помощью сертификата Let’s Encrypt, который вы получите с помощью клиента Certbot.

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

sudo add-apt-repository ppa:certbot/certbot

Чтобы подтвердить установку, нажмите ввод.

Затем установите Certbot и его плагин для Nginx.

sudo apt install python-certbot-nginx

Во время начальной настройки сервера вы, вероятно, включили ufw (Uncomplicated Firewall) и настроили поддержку незашифрованного HTTP-трафика. Чтобы иметь доступ к защищенному сайту, необходимо настроить брандмауэр на прием зашифрованного трафика, выполнив следующую команду:

sudo ufw allow https
Rule added
Rule added (v6)

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

sudo ufw reload
Firewall reloaded

Затем в вашем браузере откройте домен, который вы использовали для code-server. Вы увидите форму входа на code-server.

code-server запросит ваш пароль. Введите тот пароль, который вы установили ранее, и нажмите Enter IDE. Вы получите доступ к code-server и увидите его графический редактор.

Теперь, когда вы убедились, что code-server правильно настроен и работает по вашему домену, вы можете установить сертификаты Let’s Encrypt для его защиты с помощью Certbot.

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

sudo certbot --nginx -d code-server.your-domain

Эта команда запускает certbot для запроса сертификатов для вашего домена: в команде вы передаете домен с параметром -d. Флаг –nginx позволяет клиенту автоматически изменять конфигурацию сайта Nginx для поддержки HTTPS. Не забудьте заменить условный домен code-server.your-domain своим доменом.

Если вы впервые запускаете Certbot, он попросит указать адрес электронной почты для срочных уведомлений и принять условия обслуживания EFF. Затем Certbot запросит сертификаты для вашего домена у Let’s Encrypt и спросит, хотите ли вы перенаправить весь HTTP-трафик на HTTPS:

Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1: No redirect - Make no further changes to the webserver configuration.
2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for
new sites, or if you're confident your site works on HTTPS. You can undo this
change by editing your web server's configuration.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Select the appropriate number [1-2] then [enter] (press 'c' to cancel):

Рекомендуем выбрать вариант 2, он безопаснее. Сделав свой выбор, нажмите ввод.

Вы получите такой вывод:

IMPORTANT NOTES:
- Congratulations! Your certificate and chain have been saved at:
/etc/letsencrypt/live/code-server.your-domain/fullchain.pem
Your key file has been saved at:
/etc/letsencrypt/live/code-server.your-domain/privkey.pem
Your cert will expire on ... To obtain a new or tweaked
version of this certificate in the future, simply run certbot again
with the "certonly" option. To non-interactively renew *all* of
your certificates, run "certbot renew"
- Your account credentials have been saved in your Certbot
configuration directory at /etc/letsencrypt. You should make a
secure backup of this folder now. This configuration directory will
also contain certificates and private keys obtained by Certbot so
making regular backups of this folder is ideal.
- If you like Certbot, please consider supporting our work by:
Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
Donating to EFF:                    https://eff.org/donate-le

Это означает, что Certbot успешно сгенерировал сертификаты TLS и применил их к конфигурации Nginx для вашего домена. Теперь вы можете перезагрузить страницу code-server в браузере: сейчас вы увидите зеленый замочек в адресной строке (слева от адреса сайта), что означает, что ваше соединение надежно защищено.

4: Использование интерфейса сервера кода

В этом разделе мы попробуем использовать некоторые функции интерфейса code-server. Поскольку code-server представляет собой Visual Studio Code, работающий в облаке, он имеет тот же интерфейс, что и версия Visual Studio Code для настольных компьютеров.

С левой стороны панели IDE расположен вертикальный ряд из шести кнопок, они представляют наиболее часто используемые функции боковой панели (Activity Bar).

Эту панель вы можете настроить самостоятельно: при желании можно легко изменить порядок этих кнопок, переместить или удалить их из панели. По умолчанию первая кнопка открывает общее меню, а вторая – панель Explorer, которая предоставляет древовидную навигацию по структуре проекта. Здесь вы можете управлять своими папками и файлами, создавая, удаляя, перемещая и переименовывая их по мере необходимости. Следующее представление предоставляет доступ к функциям поиска и замены.

После этого по умолчанию идет система контроля версий (например, Git). Visual Studio Code также поддерживает других провайдеров для управления исходным кодом, вы можете найти дополнительные инструкции по рабочим процессам управления исходным кодом в этой документации.

Опция отладчика в Activity Bar предоставляет все общие действия для отладки. Visual Studio Code поставляется со встроенной поддержкой отладчика среды выполнения Node.js и любого языка, который переносится в Javascript. Для других языков вы можете установить расширения отладчика. Настройки отладки можно сохранить в файле launch.json.

Последняя кнопка в Activity Bar содержит меню для доступа к расширениям на Marketplace.

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

После создания нового файла через меню File  в новой вкладке откроется пустой файл, а после сохранения его имя будет отображаться на боковой панели Explorer. Создание папок происходит при помощи клика правой кнопкой мыши по боковой панели Explorer; здесь выберите New Folder. Вы можете развернуть папку, кликнув на ее имя; перетащив файлы и папки в верхние части иерархии, вы переместите их в новое место.

Вы можете получить доступ к терминалу с помощью сочетания клавиш CTRL+SHIFT+`. Также можно нажать Terminal в раскрывающемся меню вверху и выбрать New Terminal. Терминал откроется в нижней панели. Его рабочий каталог будет находиться в рабочей области проекта, которая содержит файлы и папки, показанные на боковой панели Explorer.

 Заключение

Теперь у вас есть code-server, универсальная облачная платформа IDE. Вы защитили ее доверенным сертификатом от Let’s Encrypt и можете открыть ее в браузере. Теперь вы можете работать над проектами индивидуально и в команде, используя единую среду. Установка облачной среды IDE освобождает ресурсы на локальном компьютере и позволяет масштабировать их при необходимости. За дополнительной информацией и подробными инструкциями по другим компонентам code-server обращайтесь к документации по Visual Studio Code.