Thank you for reading this post, don't forget to subscribe!
С переходом инструментов разработки в облачную среду начала расти потребность в создании и внедрении облачных платформ IDE (Integrated Development Environment, интегрированная среда разработки). Облачные IDE-среды позволяют большим командам разработчиков совместно развивать проект в режиме реального времени. При этом они используют единую среду, что сводит к минимуму несовместимости и повышает производительность. Облачные IDE, доступные в веб-браузерах, работают с любого типа современного устройства.
code-server – это среда Microsoft Visual Studio Code, работающая на удаленном сервере и доступная в простом браузере. Visual Studio Code – это современный редактор кода со встроенной поддержкой Git, отладчиком кода, умным автозаполнением и настраиваемыми и расширяемыми функциями. Это означает, что вы можете использовать различные устройства под управлением разных операционных систем и при этом всегда иметь под рукой согласованную среду разработки.
В этом мануале вы узнаете, как настроить облачную IDE-платформу на своем сервере CentOS 7 и открыть к ней доступ на своем домене, используя бесплатные сертификаты Let’s Encrypt. В результате у вас будет установка Microsoft Visual Studio Code, доступная по вашему домену и защищенная паролем.
Требования
- Сервер CentOS 7,
- 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. Загрузите ее с помощью инструмента curl , выполнив следующую команду:
Распакуйте архив:
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, в каталоге /usr/lib/systemd/system, где systemd хранит другие свои сервисы. Создайте такой файл в текстовом редакторе vi:
sudo vi /usr/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 (/usr/lib/systemd/system/code-server.service; disabled; vendor preset: disabled)
Active: active (running) since Thu 2019-12-19 19:24:42 UTC; 5s ago
Main PID: 1668 (code-server)
CGroup: /system.slice/code-server.service
├─1668 /usr/local/bin/code-server --host 127.0.0.1 --user-data-dir /var/lib/code-server --auth password
└─1679 /usr/local/bin/code-server --host 127.0.0.1 --user-data-dir /var/lib/code-server --auth password
Dec 19 19:24:42 code-server-centos systemd[1]: Started code-server.
Dec 19 19:24:44 code-server-centos code-server[1668]: info Server listening on http://127.0.0.1:8080
Dec 19 19:24:44 code-server-centos code-server[1668]: info - Using custom password for authentication
Dec 19 19:24:44 code-server-centos code-server[1668]: 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/conf.d.
Вы будете хранить конфигурацию code-server для настройки доступа к нему по вашему домену в файле code-server.conf, в каталоге /etc/nginx/conf.d. Начните с создания этого файла:
sudo vi /etc/nginx/conf.d/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.
Чтобы проверить правильность конфигурации, выполните следующую команду:
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
В CentOS 7 по умолчанию включена поддержка SELinux со строгим набором правил, из-за чего Nginx не сможет подключиться к локальным сокетам TCP. По этой причине Nginx не будет обслуживать обратное проксирование для code-server. Запустите следующую команду, чтобы на постоянной основе смягчить набор правил:
sudo setsebool httpd_can_network_connect 1 -P
Откройте в браузере ваш домен, по которому обслуживается установка code-server. Вы увидите форму входа на code-server.
code-server запросит ваш пароль. Введите тот пароль, который вы установили ранее, и нажмите Enter IDE. Вы получите доступ к code-server и увидите его графический редактор.
Теперь code-server доступен на вашем домене. На следующем этапе мы защитим его, установив бесплатный TLS сертификат Let’s Encrypt.
3: Установка сертификата Let’s Encrypt
В этом разделе вы защитите свой домен с помощью сертификата Let’s Encrypt, который вы получите с помощью клиента Certbot.
Для начала установите Certbot и его плагин для Nginx.
sudo yum install certbot python2-certbot-nginx
Чтобы запросить сертификаты для вашего домена, выполните следующую команду:
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 в браузере: сейчас вы увидите зеленый замочек в адресной строке (слева от адреса сайта), что означает, что ваше соединение надежно защищено.
Теперь нужно настроить автоматическое обновление сертификата. Мы настроим ежедневную проверку сертификатов с помощью cron. Откройте свой crontab:
sudo crontab -e
На экране появится стандартный файл crontab (если вы не редактировали его ранее, это будет обычный пустой текстовый файл). Вставьте в него такую строку, затем сохраните и закройте файл:
. . .
15 3 * * * /usr/bin/certbot renew --quiet
Теперь указанная в файле команда будет автоматически запускаться каждый день в 3:15 утра.
Команда renew позволяет клиенту Certbot проверять все установленные сертификаты в текущей системе и обновлять те из них, до истечения срока которых остается менее 30 дней. Флаг —quiet переводит Certbot в тихий режим, чтобы он не запрашивал подтверждений и не выводил ничего на экран.
Теперь все сертификаты будут заранее автоматически обновляться.
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.