Поиск по сайту:

Как настроить облачную IDE-платформу код-сервера в Ubuntu 22.04

Автор выбрал программу Write for DOnations.

Введение

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

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

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

Предпосылки

  • Сервер под управлением Ubuntu 22.04 с оперативной памятью не менее 2 ГБ, доступом root и учетной записью sudo без полномочий root. Вы можете настроить это, следуя этому руководству по начальной настройке сервера.
  • Nginx установлен на вашем сервере. Чтобы получить руководство о том, как это сделать, выполните шаги с 1 по 4 в разделе Как установить Nginx в Ubuntu 22.04.
  • Полное зарегистрированное доменное имя для размещения кода-сервера, указывающего на ваш сервер. В этом руководстве будет использоваться code-server.ваш-домен. Вы можете приобрести доменное имя в этом введении в DNS DigitalOcean для получения подробной информации о том, как их добавить.

Шаг 1 — Установка код-сервера

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

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

  1. mkdir ~/code-server

Затем перейдите к нему:

  1. cd ~/code-server

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

  1. wget https://github.com/coder/code-server/releases/download/v4.8.2/code-server-4.8.2-linux-amd64.tar.gz

Затем распакуйте архив, выполнив:

  1. tar -xzvf code-server-4.8.2-linux-amd64.tar.gz

Вы получите папку с таким же именем, как и исходный файл, который вы загрузили, который содержит исходный код сервера кодов. Выполните следующую команду, чтобы скопировать его в /usr/lib/code-server, чтобы вы могли получить к нему доступ по всей системе:

  1. sudo cp -r code-server-4.8.2-linux-amd64 /usr/lib/code-server

Затем создайте символическую ссылку в /usr/bin/code-server, указывающую на исполняемый файл code-server:

  1. sudo ln -s /usr/lib/code-server/bin/code-server /usr/bin/code-server

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

  1. sudo mkdir /var/lib/code-server

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

Вы сохраните конфигурацию службы в файле с именем code-server.service в каталоге /lib/systemd/system, где systemd хранит его услуги. Создайте его с помощью текстового редактора (в этом руководстве используется nano):

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

Добавьте следующие строки:

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

[Service]
Type=simple
Environment=PASSWORD=your_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

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

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

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

Не забудьте заменить ваш_пароль на желаемый пароль. Следующая строка указывает systemd перезапустить code-server во всех случаях сбоя (например, когда происходит сбой или процесс завершается).

Раздел [Install] приказывает systemd запустить эту службу, когда станет возможным войти на ваш сервер.

Сохраните и закройте файл.

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

  1. sudo systemctl start code-server

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

  1. sudo systemctl status code-server

Вы получите вывод, подобный этому:

Output

● code-server.service - code-server
     Loaded: loaded (/lib/systemd/system/code-server.service; disabled; preset: enabled)
     Active: active (running) since Thu 2022-11-03 12:39:26 UTC; 5s ago
   Main PID: 2670 (node)
      Tasks: 22 (limit: 1116)
     Memory: 90.9M
        CPU: 799ms
     CGroup: /system.slice/code-server.service
             ├─2670 /usr/lib/code-server/lib/node /usr/lib/code-server --bind-addr 127.0.0.1:8080 --user-data-dir /var/lib/code-server --auth password
             └─2692 /usr/lib/code-server/lib/node /usr/lib/code-server/out/node/entry

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

  1. sudo systemctl enable code-server

Вы получите ответ о том, что символическая ссылка была сгенерирована:

Output
Created symlink /etc/systemd/system/multi-user.target.wants/code-server.service → /lib/systemd/system/code-server.service.

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

Шаг 2 — Разоблачение кода-сервера в вашем домене

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

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

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

  1. 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 на желаемый домен.

В этом файле вы определяете, что Nginx должен прослушивать HTTP-порт 80. Затем вы указываете server_name, который сообщает Nginx, какой домен принимать запросы и применять эту конкретную конфигурацию.

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

Сохраните и закройте файл.

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

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

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

  1. sudo nginx -t

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

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

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

  1. sudo systemctl restart nginx

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

Шаг 3 — Защита вашего домена

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

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

  1. sudo ufw allow https

Вывод будет:

Output
Rule added
Rule added (v6)

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

  1. sudo ufw reload

Этот вывод будет печатать:

Output
Firewall reloaded

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

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

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

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

  1. sudo apt install certbot python3-certbot-nginx -y

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

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

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

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

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

Output
Requesting a certificate for code-server.your-domain

Successfully received certificate.
Certificate is saved at: /etc/letsencrypt/live/code-server.your-domain/fullchain.pem
Key is saved at:         /etc/letsencrypt/live/code-server.your-domain/privkey.pem
This certificate expires on 2023-02-01.
These files will be updated when the certificate renews.
Certbot has set up a scheduled task to automatically renew this certificate in the background.

Deploying certificate
Successfully deployed certificate for code-server.your-domain.com to /etc/nginx/sites-enabled/code-server.conf
Congratulations! You have successfully enabled HTTPS on https://code-server.your-domain

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
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 для вашего домена. Теперь вы можете перезагрузить домен вашего код-сервера в браузере и увидеть замок слева от адреса сайта, что означает, что ваше соединение надежно защищено.

Теперь, когда у вас есть код-сервер, доступный в вашем домене через защищенный обратный прокси-сервер Nginx, вы готовы просмотреть пользовательский интерфейс код-сервера.

Шаг 4 — Использование интерфейса код-сервера

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

В левой части IDE есть вертикальный ряд из шести кнопок, которые будут наиболее часто используемыми функциями на боковой панели, известной как панель действий:

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

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

Опция отладчика (треугольник с маленьким значком ошибки) предоставляет общие действия для отладки на панели. Visual Studio Code поставляется со встроенной поддержкой расширений для необходимого отладчика. Кнопка с четырьмя блоками, которая является последним представлением на панели действий, предоставляет меню для доступа к доступным расширениям на VSCode Marketplace.

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

Откройте code-server.your-domain/?folder=/var/lib/code-server/User в своем браузере, который загрузит существующую папку.

Выберите значок меню гамбургера, чтобы открыть меню параметров, затем выберите меню «Файл», в котором вы создадите новый файл. Назовите файл и сохраните его в папку по умолчанию.

После сохранения файл будет доступен для просмотра на боковой панели проводника. Создать папки можно, щелкнув правой кнопкой мыши на боковой панели проводника и выбрав «Новая папка». Вы можете развернуть папку, щелкнув ее имя, а также перетащив файлы и папки в верхние части иерархии, чтобы переместить их в новое место.

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

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

Заключение

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

Если вы хотите запустить код-сервер в своем кластере DigitalOcean Kubernetes, ознакомьтесь с нашим руководством «Как настроить облачную IDE-платформу код-сервера в DigitalOcean Kubernetes».