Як встановити Visual Studio Code Cloud IDE на Ubuntu 24.04 Server: Покрокова інструкція

 

Visual Studio Code Cloud IDE – це онлайн-версія популярного редактора Microsoft Visual Studio Code (VS Code), призначена для забезпечення гнучкого та доступного середовища розробки в хмарі. Це дозволяє розробникам кодувати безпосередньо зі своїх веб-браузерів без необхідності встановлювати щось на свої локальні машини. Ця хмарна IDE легко інтегрується з GitHub та іншими хмарними службами, забезпечуючи спільну роботу в режимі реального часу, легкий доступ до проектів з будь-якого пристрою та можливість працювати в розподілених середовищах. Завдяки таким функціям, як підсвічування синтаксису, налагодження та розширення, Visual Studio Code Cloud IDE пропонує повний досвід розробки, що робить його зручним рішенням для розробників, яким потрібне потужне портативне середовище кодування, доступ до якого можна отримати практично з будь-якого місця.

Цей посібник покаже вам, як встановити Visual Code-Server на сервер Ubuntu 24.04 з Nginx як зворотним проксі.

Передумови

Перш ніж почати, переконайтеся, що у вас є наступне:

• Сервер Ubuntu 24.05.
• Користувач без прав root і має права адміністратора.
• Доменне ім’я вказувало на IP-адресу сервера.

Встановлення code-server зі сценарієм інсталятора

Щоб встановити code-server , ви можете завантажити та запустити скрипт інсталятора code-server . У цьому прикладі ви будете встановлювати сервер коду як користувач, який не має root. Тому переконайтеся, що ви увійшли до системи свого користувача.

Спочатку виконайте команду нижче, щоб переконатися, що сервер коду може бути встановлений у вашій системі.

curl -fsSL https://code-server.dev/install.sh | sh -s -- --dry-run

Коли сервер коду встановлено у вашій системі, ви побачите такі дані:

Тепер встановлюємо code-server командою нижче. Введіть пароль sudo/administrator, коли з’явиться відповідний запит.

curl -fsSL https://code-server.dev/install.sh | sh

Після завершення інсталяції запустіть і увімкніть сервер коду за допомогою наступної команди ‘systemctl‘.

sudo systemctl enable --now code-server@$USER

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

sudo systemctl status code-server@$USER

У цьому виводі ви можете побачити, що працює сервер коду, який працює на порту 8080 за замовчуванням.

Налаштування code-server

Після встановлення code-server ви налаштуєте аутентифікацію за паролем для захисту середовища сервера коду.

Відкрийте файл конфігурації code-server за замовчуванням ~/.config/code-server/config.yaml за допомогою редактора ‘nano‘.

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

Змініть пароль за замовчуванням на надійний пароль.

bind-addr: 127.0.0.1:8080
auth: password
password: 0e0cb3af923c659366334664
cert: false

Збережіть файл і вийдіть з редактора.

Тепер виконайте наведену нижче команду, щоб перезапустити сервер коду та застосувати зміни.

sudo systemctl restart code-server@$USER

Налаштування Nginx як зворотного проксі

Тепер, коли у вас є захищений сервер коду, ви встановите Nginx і налаштуйте його як зворотний проксі. Тому переконайтеся, що ваше доменне ім’я вказує на IP-адресу сервера.

Встановіть веб-сервер Nginx за допомогою наступної команди ‘apt‘. Введіть «Y», щоб підтвердити встановлення.

sudo apt install nginx -y

Після завершення інсталяції створіть нову конфігурацію блоку сервера ‘/etc/nginx/sites-available/code-server.conf‘ за допомогою редактора ‘nano‘.

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

Вставте у файл наступну конфігурацію та переконайтеся, що ви змінили доменне ім’я ‘code.infoit.local‘.

server {
listen 80;
listen [::]:80;
server_name code.infoit.local;

location / {
proxy_pass http://localhost:8080/;
proxy_set_header Host $http_host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection upgrade;
proxy_set_header Accept-Encoding gzip;
}
}

Коли закінчите, збережіть файл і вийдіть з редактора.

Далі виконайте наступну команду, щоб активувати блок сервера ‘code-server.conf‘ і перевірити конфігурацію Nginx.

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

Якщо ви маєте рацію та правильну конфігурацію Nginx, ви побачите вихідний сигнал ‘syntax is ok – test is successful’.

Тепер виконайте наведену нижче команду, щоб перезапустити веб-сервер Nginx і застосувати зміни. Потім перевірте статус Nginx, щоб переконатися, що веб-сервер працює.

sudo systemctl restart nginx
sudo systemctl status nginx

У наступному виході ви можете побачити, що веб-сервер Nginx працює як зворотний проксі для програми сервера коду.

Налаштування UFW (нескладного брандмауера)

Щоб дозволити доступ до code-server , необхідно відкрити порти HTTP і HTTPS через UFW (Uncomplicated Firewall).

Виконайте наведену нижче команду, щоб увімкнути профіль “Nginx Full” і дозволити трафік HTTP і HTTPS для вашої установки Nginx. Після додавання ви побачите вивід “Правило додано”.

sudo ufw allow 'Nginx Full'

Тепер виконайте наступну команду, щоб перевірити статус UFW. Переконайтеся, що профіль «Nginx Full» увімкнено, щоб дозволити доступ з будь-якого місця.

sudo ufw status

Захист code-server за допомогою HTTPS

У цьому розділі ви захистите сервер коду за допомогою HTTPS, згенерувавши сертифікати SSL/TLS через certbot і letsencrypt.

Встановіть пакети ‘certbot’ і ‘python3-certbot-nginx’ за допомогою наступної команди ‘apt’.

sudo apt install certbot python3-certbot-nginx

Після завершення інсталяції виконайте наведену нижче команду «certbot», щоб згенерувати сертифікати SSL/TLS і захистити інсталяцію code-server . Обов’язково змініть доменне ім’я та адресу електронної пошти з вашою інформацією.

sudo certbot --nginx --agree-tos --redirect --hsts --staple-ocsp --email alice@infoit.local -d code.infoit.local

Коли процес буде завершено, ваша інсталяція code-server буде автоматично захищена за допомогою HTTPS. А ваші SSL/TLS сертифікати будуть доступні в директорії ‘/etc/letsencrypt/live/code.infoit.local’.

Доступ до code-server

Відкрийте веб-браузер і перейдіть на сторінку https://code.infoit.local. Якщо інсталяція пройшла успішно, вам буде запропоновано автентифікуватися за допомогою пароля.

Введіть свій пароль і натисніть НАДІСЛАТИ для підтвердження.

Якщо у вас є правильний пароль, ви побачите наступний екран сервера кодів. Виберіть тему за умовчанням, світлу або темну.

Тепер ви отримаєте наступний живий сервер коду у своєму веб-браузері.

Висновок

Вітаємо! Ви завершили встановлення сервера коду VS на сервері Ubuntu 24.04. Ви встановили та захистили сервер кодів за допомогою автентифікації за допомогою пароля та HTTPS, а також налаштували Nginx як зворотний проксі для встановлення сервера коду.