Како да го поставите серверот за кодови Cloud IDE платформа на Ubuntu 22.04

Авторот ја избра програмата Пишувај за донации.

Вовед

Со движењето на алатките за програмери кон облакот, расте создавањето и усвојувањето на облак IDE (Интегрирана околина за развој) платформи. Cloud IDE-ите овозможуваат соработка во реално време помеѓу тимовите на програмери за да работат во унифицирана развојна средина што ги минимизира некомпатибилностите и ја зголемува продуктивноста. Достапни преку веб-прелистувачи, облак IDE се достапни од секој тип на модерен уред.

Microsoft Visual Studio Code работи на оддалечен сервер и е достапен директно од вашиот прелистувач. Visual Studio Code е модерен уредувач на кодови со интегрирана поддршка за Git, дебагер на код, паметно автоматско комплетирање и приспособливи и проширливи функции. Со код-сервер, можете да користите различни уреди кои работат со различни оперативни системи и секогаш да имате достапно доследна развојна околина.

Во ова упатство, ќе ја поставите платформата за облак IDE на серверот за кодови на вашата машина Ubuntu 22.04 и ќе ја изложите на вашиот домен, обезбеден со бесплатни Let’s Encrypt TLS сертификати. До крајот на упатството, ќе имате Microsoft Visual Studio Code кој работи на вашиот Ubuntu 22.04 сервер, достапен во вашиот домен и заштитен со лозинка.

Предуслови

  • Сервер кој работи на Ubuntu 22.04 со најмалку 2GB RAM, root пристап и sudo, не-root сметка. Можете да го поставите ова следејќи го ова почетно упатство за поставување сервер.
  • Nginx е инсталиран на вашиот сервер. За водич за тоа како да го направите ова, пополнете ги чекорите од 1 до 4 од Како да инсталирате Nginx на Ubuntu 22.04.
  • Целосно регистрирано име на домен за домаќин на код-сервер, насочено кон вашиот сервер. Ова упатство ќе користи code-server.вашиот домен насекаде. Можете да купите име на домен на овој вовед во DigitalOcean DNS за детали како да ги додадете.

Чекор 1 - Инсталирање на код-сервер

Во овој чекор, ќе поставите код-сервер на вашиот сервер со преземање на најновата верзија и создавање на услуга systemd која ќе го одржува код-серверот да работи во заднина. Исто така, ќе наведете политика за рестартирање на услугата, така што серверот за кодови ќе остане достапен по евентуални падови или рестартирање.

Ќе ги складирате сите податоци кои се однесуваат на код-серверот во папка со име ~/code-server. Направете го со следнава команда:

  1. mkdir ~/code-server

Потоа одете до него:

  1. cd ~/code-server

Ќе треба да ја добиете најновата верзија на Linux од изданијата на Github на код-серверот (датотеката ќе содржи 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, посочувајќи на извршната датотека на серверот за кодови:

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

Следно, креирајте папка каде што код-серверот ќе ги складира корисничките податоци:

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

Сега кога сте го презеле код-серверот и го направивте достапен низ целиот систем, ќе создадете услуга systemd за да го одржувате серверот за кодот да работи во заднина постојано.

Ќе ја зачувате конфигурацијата на услугата во датотека со име 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 да го рестартира код-серверот во сите настани со дефекти (на пример, кога ќе се сруши или кога процесот е убиен).

Секцијата [Инсталирај] наредува 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.

Во овој чекор, го преземавте код-серверот и го направивте достапен на глобално ниво. Потоа креиравте услуга systemd за код-сервер и ја овозможивте, така што серверот за кодови ќе започне при секое подигање на серверот. Следно, ќе го изложите на вашиот домен со конфигурирање на Nginx да служи како обратен прокси помеѓу посетителот и код-серверот.

Чекор 2 - Откривање на код-сервер на вашиот домен

Во овој дел, ќе го конфигурирате Nginx како обратен прокси за код-сервер.

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

Ќе ја зачувате конфигурацијата за изложување на код-сервер на вашиот домен во датотека со име 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 кој домен да прифаќа барања и да ја примени оваа конкретна конфигурација.

Во блокот root локација (/), одредувате дека барањата треба да се пренесуваат напред-назад до серверот за код што работи на 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

Сега имате пристап до инсталацијата на вашиот код-сервер на вашиот домен. Во следниот чекор, ќе го обезбедите со бесплатен Let’s Encrypt TLS сертификат.

Чекор 3 - Обезбедување на вашиот домен

Во овој дел, ќе го обезбедите вашиот домен користејќи сертификат Let’s Encrypt TLS, кој ќе го обезбедите со помош на Certbot. Откако ќе се конфигурира, инсталацијата на вашиот код-сервер ќе работи зад HTTPS.

Како дел од предусловите, го овозможивте ufw (Некомплициран заштитен ѕид) и го конфигуриравте да дозволува нешифриран HTTP сообраќај. За да можете да пристапите до заштитената локација, ќе треба да ја конфигурирате да прифаќа шифриран сообраќај, што можете да го направите со извршување на следнава команда:

  1. sudo ufw allow https

Излезот ќе биде:

Output
Rule added
Rule added (v6)

Слично на Nginx, ќе треба повторно да го вчитате за да стапи на сила конфигурацијата:

  1. sudo ufw reload

Овој излез ќе отпечати:

Output
Firewall reloaded

Потоа, во вашиот прелистувач, одете до доменот што го користевте за код-сервер. Прашањето за најавување на серверот за кодови ќе се вчита:

код-серверот ја бара вашата лозинка. Внесете го оној што го поставивте во претходниот чекор и притиснете Внесете IDE. Сега ќе внесете код-сервер и веднаш ќе пристапите до неговиот GUI на уредувачот.

Сега кога проверивте дали код-серверот е правилно изложен на вашиот домен, ќе инсталирате 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.вашиот домен со името на вашиот домен.

Ако ова е вашиот прв пат да го стартувате 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 - Користење на интерфејсот на серверот за кодови

Во овој дел, ќе користите некои од карактеристиките на интерфејсот на код-сервер. Бидејќи код-серверот е Visual Studio Code кој работи во облакот, тој го има истиот интерфејс како самостојното десктоп издание.

На левата страна на IDE, има вертикален ред од шест копчиња кои ќе ги користат најчесто користените функции во страничниот панел познат како Лента за активност:

Оваа лента е приспособлива за да можете да ги преместите овие копчиња или да ги отстраните од лентата. Стандардно, првото копче (иконата од менито за хамбургер) го отвора општото мени во паѓачкото мени, додека второто копче (иконата на папката) го отвора панелот Explorer кој обезбедува навигација како дрво во структурата на проектот. Можете да управувате со вашите папки и датотеки овде, креирајќи, бришејќи, преместувајќи ги и преименувајќи ги по потреба. Копчето со лупа обезбедува пристап до функционалноста за пребарување и замена.

По ова, во стандардниот редослед, е иконата што го дава вашиот поглед на системите за контрола на изворот, како што се давателите на изворна контрола.

Опцијата за отстранување грешки (триаголникот со мала икона за бубачки) обезбедува вообичаени дејства за отстранување грешки во панелот. Visual Studio Code доаѓа со вградена поддршка за екстензии за потребниот дебагер. Копчето за четири блокови, кое е последниот приказ во Лентата за активности, обезбедува мени за пристап до достапните екстензии на пазарот VSCode.

Примарната област на графичкиот интерфејс е вашиот уредник, кој можете да го одделите по јазичиња за уредување на кодот. Можете да го промените приказот за уредување во мрежен систем или во датотеки рамо до рамо.

Отворете code-server.your-domain/?folder=/var/lib/code-server/User во вашиот прелистувач, што ќе вчита постоечка папка.

Изберете ја иконата од менито за хамбургер за да отворите мени со опции, а потоа изберете го менито Датотека каде што ќе креирате Нова датотека. Именувајте ја датотеката и зачувајте ја на стандардната локација на папката.

Откако ќе се зачува, датотеката ќе може да се гледа во страничниот панел на Explorer. Креирањето папки може да се направи со десен клик на страничната лента на Explorer и кликнување на Нова папка. Можете да ја проширите папката со кликнување на нејзиното име, како и со влечење и пуштање датотеки и папки во горните делови од хиерархијата за да ги преместите на нова локација.

Може да добиете пристап до терминал со кликнување на Терминал во паѓачкото мени на горниот дел и избирање на Нов терминал. Можете исто така да ја користите кратенката на тастатурата наведена во менито. Терминалот ќе се отвори во долниот панел и неговиот работен директориум ќе биде поставен на работниот простор на проектот, кој ги содржи датотеките и папките прикажани во страничниот панел на Explorer.

Во овој чекор, го разгледавте интерфејсот на код-серверот и некои од најчесто користените функции.

Заклучок

Сега имате код-сервер, разноврсна облак IDE, инсталиран на вашиот Ubuntu 22.04 сервер, изложен на вашиот домен и обезбеден со Let’s Encrypt сертификати. Сега можете да работите на проекти индивидуално или заеднички како тим. Водење на облак IDE ги ослободува ресурсите на вашата локална машина и ви овозможува да ги зголемите ресурсите кога е потребно. За повеќе информации, видете ја документацијата за код на Visual Studio за дополнителни функции и детални упатства за другите компоненти на код-серверот.

Ако сакате да користите сервер за кодови на вашиот кластер DigitalOcean Kubernetes, проверете го нашиот туторијал за Како да ја поставите платформата Cloud IDE на серверот за кодови на DigitalOcean Kubernetes.