Как установить Visual Studio Code - сервер IDE на Ubuntu 20.04 LTS

Code-server — это Visual Studio (VS) Code, который можно запускать удаленно на сервере и получать к нему доступ через веб-браузер. Он позволяет создавать и иметь единообразную среду разработки, к которой можно получить доступ в любое время и в любом месте.

В этом руководстве мы покажем вам, как установить Code-server с Nginx в качестве обратного прокси и SSL Letsencrypt на последнем Ubuntu 20.04 Server.

Предварительные требования

Для этого руководства мы установим Visual Code Server на сервер Ubuntu 20.04 с 4 ГБ ОЗУ, 25 ГБ свободного дискового пространства и 2 ЦП.

Что мы будем делать:

• Скачать и установить пакеты Visual Code Server
• Настроить аутентификацию для Visual Code Server
• Сгенерировать SSL Letsencrypt
• Установить и настроить Nginx в качестве обратного прокси
• Тестирование

Шаг 1 - Скачать и установить пакеты Visual Code Server

Сначала мы загрузим последнюю версию Visual Code Server для Ubuntu FocalFossa и установим ее в нашу систему.

По умолчанию пакеты code server доступны для нескольких операционных систем. Вы можете проверить страницу релизов code server на GitHub, используя следующую ссылку.

https://github.com/cdr/code-server/releases

Теперь загрузите пакеты Visual Code Server для Ubuntu, используя команду wget ниже.

wget -q https://github.com/cdr/code-server/releases/download/3.4.1/code-server_3.4.1_amd64.deb

После этого установите пакет visual code server, используя команду dpkg ниже.

sudo dpkg -i code-server_3.4.1_amd64.deb

После завершения установки запустите службу code server и добавьте ее в автозагрузку системы.

systemctl --user start code-server  
systemctl --user enable code-server

Сервер Visual Code Server запущен и работает, проверьте это, используя следующую команду.

ss -plnt  
systemctl --user status code-server

Ниже приведен результат, который вы получите.

Как видно, сервер Visual Code Server по умолчанию работает на локальном IP-адресе ‘127.0.0.1’ с TCP-портом ‘8080’.

Шаг 2 - Настройка аутентификации для Visual Code Server

По умолчанию сервер visual code работает с включенной аутентификацией.

Аутентификация паролем для сервера visual code по умолчанию генерируется в файл ‘~/.config/code-server/config.yaml’.

Проверьте конфигурацию сервера visual code, используя следующую команду.

cat ~/.config/code-server/config.yaml

Вы получите что-то вроде этой конфигурации.

bind-addr: 127.0.0.1:8080  
auth: password  
password: 58403006a03529a2d26c08af  
cert: false

Подробности конфигурации:

• ‘bind-addr’ — это параметр, используемый для определения, на каком IP-адресе и порту будет работать Code Server.
• ‘auth’ — это параметр аутентификации для Visual Code Server, и по умолчанию используется метод аутентификации ‘password’.
• ‘password’ — это параметр, используемый для определения вашего пароля для доступа к Visual Code Server, и убедитесь, что вы используете надежный пароль.

Чтобы изменить адрес привязки, порт и пароль для Visual Code Server, измените конфигурацию по умолчанию ‘~/.config/code-server/config.yaml’ по мере необходимости.

Шаг 3 - Генерация SSL Letsencrypt

На этом этапе мы сгенерируем SSL letsencrypt, используя инструмент certbot для защиты code-server.

Установите инструмент certbot, используя команду apt ниже.

sudo apt install certbot -y

После завершения установки сгенерируйте SSL letsencrypt, используя команду certbot ниже.

certbot certonly --standalone --agree-tos -m [email protected] -d vscode.hakase-labs.io

После завершения ваши сертификаты будут находиться в каталоге ‘/etc/letsencrypt/live/vscode.hakase-labs.io/‘.

ls -lah /etc/letsencrypt/live/vscode.hakase-labs.io/

Теперь вы сгенерировали SSL Letsencrypt для защиты установки code-server с помощью инструмента certbot.

Шаг 4 - Настройка Nginx в качестве обратного прокси

На этом этапе мы установим веб-сервер Nginx и настроим его в качестве обратного прокси для code-server с включенным SSL.

Установите пакет Nginx, используя команду apt ниже.

sudo apt install nginx -y

После завершения установки перейдите в каталог ‘/etc/nginx/sites-available’ и создайте новую конфигурацию виртуального хоста ‘code-server’.

cd /etc/nginx/sites-available/  
vim code-server

Теперь измените имя домена и путь к SSL на свои собственные и вставьте конфигурацию в него.

server {  
 listen 80;  
 server_name vscode.hakase-labs.io;  
 # принудить https  
 return 301 https://$server_name:443$request_uri;  
}  
  
server {  
 listen 443 ssl http2;  
 server_name vscode.hakase-labs.io;  
  
 ssl_certificate /etc/letsencrypt/live/vscode.hakase-labs.io/fullchain.pem;  
 ssl_certificate_key /etc/letsencrypt/live/vscode.hakase-labs.io/privkey.pem;  
  
 location / {  
 proxy_pass http://127.0.0.1:8080/;  
 proxy_set_header Host $host;  
 proxy_set_header Upgrade $http_upgrade;  
 proxy_set_header Connection upgrade;  
 proxy_set_header Accept-Encoding gzip;  
 }  
}

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

Теперь активируйте виртуальный хост ‘code-server’, протестируйте конфигурацию nginx и убедитесь, что ошибок нет.

ln -s /etc/nginx/sites-available/code-server /etc/nginx/sites-enabled/  
nginx -t

После этого перезапустите службу nginx и добавьте ее в автозагрузку системы.

systemctl restart nginx  
systemctl enable nginx

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

netstat -plntu  
systemctl status nginx

И вы получите результат, как ниже.

Служба Nginx запущена и работает на сервере Ubuntu 20.04 с включенными HTTP и HTTPS портами.

Шаг 5 - Тестирование

Откройте веб-браузер и введите URL вашей установки code-server.

https://vscode.hakase-labs.io/

Войдите с паролем, который вы настроили в файле службы code-server.

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

В результате вы установили code-server на сервер Ubuntu 20.04 с Nginx в качестве обратного прокси и защитили установку code-server с помощью SSL Letsencrypt.

Ссылки

• https://github.com/cdr/code-server