Przygotowanie środowiska programistycznego

TLDR;

Nie masz czasu czytać ściany tekstu? Obejrzyj ten film gdzie tłumaczę wszytko krok po kroku:

W tej lekcji zajmiemy się przygotowaniem osobnego, odizolowanego środowiska, w którym będziemy tworzyć nasze aplikacje webowe. Ale zanim weźmiemy się za to, odpowiedzmy sobie najpierw na pytanie:

Po co mi osobne środowisko programistyczne?

Kiedy pracujemy nad jakimś projektem, na przykład nad aplikacją internetową, możemy potrzebować specyficznych narzędzi deweloperskich: kompilatora języka programowania dla naszego backendu, serwera WWW, silnika bazy danych i innych. W pierwszym odruchu możemy chcieć zainstalować te narzędzia na swoim komputerze i brać się do pracy. Spróbujmy zatrzymać ten odruch i podejść do tematu bardziej systematycznie.

Jeżeli z każdym projektem będziemy instalować na naszym komputerze wszystkie potrzebne narzędzia, liczba zainstalowanych programów szybko się rozrośnie, a nawet mogą pojawić się konflikty między nimi. Jeżeli jedno z naszych narzędzi będzie wymagało np. języka Python w bardzo konkretnej wersji np. 3.8.11, a inne będzie potrzebowało Pythona w równie precyzyjnej wersji, ale z innym numerkiem np. 3.11.8, to może się okazać, że nie da się w łatwy sposób korzystać z obu narzędzi na jednym komputerze.

Jednym ze sposobów obejścia tego problemu jest wirtualizacja, która pozwala na stworzenie w obrębie naszego systemu operacyjnego emulację innego komputera. W ten sposób w środku tej wirtualnej maszyny możemy umieścić zupełnie osobny system operacyjny, a na nim zainstalować dowolne narzędzia i programy. Tworząc więcej takich maszyn, możemy mieć odrębne środowiska do wielu projektów, bez ryzyka że będą one wchodzić sobie wzajemnie w drogę. Nawet jeżeli jeden z naszych projektów skończymy i zamkniemy, to nie ma potrzeby, żeby zbędne już narzędzia zajmowały przestrzeń na naszym dysku; możemy po prostu usunąć całą maszynę wirtualną nie obawiając się, że usuniemy coś, czego potrzebuje inny z naszych projektów.

Kolejną sprawą jest kontrola nad swoim środowiskiem programistycznym. Podczas nauki możemy korzystać na przykład z komputera szkolnego albo uczelnianego, którym zarządza administrator odpowiedzialny za utrzymanie maszyn w stanie używalności dla wszystkich, w związku z tym zabraniający instalacji dowolnych programów, które przyjdą do głowy użytkownikom. Nawet w pracy zawodowej często pracujemy na komputerach firmowych, nad którymi pieczę sprawują dedykowani administratorzy, którzy będą oczekiwali od nas uzasadnienia, a od naszego przełożonego np. pisemnej zgody na instalację każdego narzędzia, które ma być zainstalowane na naszym komputerze. W takim wypadku zainstalowanie nawet najmniejszego programu może wymagać tygodni oczekiwania, wsadzając kij w szprychy naszej pracy programistycznej. Jeżeli natomiast mamy maszynę wirtualną, dla której to my jesteśmy administratorem, nic nam nie broni zainstalować na niej narzędzi, których pilnie potrzebujemy w naszej pracy.

W związku z powyższym, naszą pracę zaczniemy od przygotowania osobnej maszyny wirtualnej, na której będziemy rozwijać nasze aplikacje webowe.

Zanim zaczniesz

Uwaga do uczestników zajęć z PZAW: Jeżeli będziesz pracować nad zadaniami wyłącznie na zajęciach, możesz pominąć tę instrukcję. W pracowniach komputerowych będzie dostępny obraz maszyny wirtualnej i specjalnie przygotowana wersja edytora VS Code.

Przygotowanie maszyny wirtualnej

Zakładam, że będziesz pracować na komputerze z systemem Windows. Jeżeli pracujesz na MacOS lub na Linuxie, to prawdopodobnie poradzisz sobie bez mojej pomocy.

W celu stworzenia maszyny wirtualnej (VM) użyjemy programu Oracle VirtualBox. Po zainstalowaniu programu czeka nas jeden krok konfiguracji. Upewnimy się, że będziemy mogli skomunikować się z naszą maszyną przez sieć, jakby to był serwer w chmurze.

Używając programu Oracle VirtualBox stworzymy nową maszynę wirtualną i zainstalujemy na niej system operacyjny Linux, konkretnie dystrybucję Ubuntu Server w wersji 24.04 LTS. Obraz płyty instalacyjnej można pobrać z tej strony.

UWAGA Po pierwszym utworzeniu maszyny wirtualnej VirtualBox spróbuje od razu uruchomić instalator systemu. Przerwij ten process wyłączając maszynę i dodaj do niej drugą kartę sieciową typu Host-only adapter. W ten sposób instalator wykryje tę sieć automatycznie oszczędzając nam później trudu konfiguracji drugiej sieci.

Jeżeli pominęliśmy nienadzorowaną instalację, to po uruchomieniu instalatora wybieramy domyślne opcje upewniając się tylko, że na naszym nowym systemie uruchomi się serwer SSH. W przypadku instalacji nienadzorowanej po prostu poczekaj aż instalator zakończy działanie.

Po świeżej instalacji systemu operacyjnego trzeba zaktualizować jego oprogramowanie, ale też zainstalować nowe narzędzia z których będziemy korzystać w naszych projektach.

W przypadku serwerów aplikacji webowych proces instalowania niezbędnych narzędzi na świeżo uruchomionym serwerze nazywamy provisioning (ang. zaopatrywaniem). W przypadku naszej VM deweloperskiej też możemy mówić o provisioningu. Istnieją do tego liczne narzędzia o różnych poziomach skomplikowania; od prostych skryptów bash po chmurowe roziązania będące w stanie równolegle synchronizować uruchamianie całych farm serwerów. Na potrzeby prostych aplikacji deweloperskich skrypt wykonujący serię poleceń jest w zupełności wystarczającym rozwiązaniem.

Na szczęście nie musimy tego wszystkiego robić ręcznie, jeżeli mamy przygotowany skrypt, który zrobi to za nas, podczas gdy my możemy w tym czasie napić się herbaty. Na nasze szczęście my mamy taki skrypt i znajdziesz go pod tym adresem

Możesz skopiować skrypt bezpośrednio z powyższego linku i zapisać na maszynie wirtualnej, a potem uruchomić go używając komend:

chmod +x ./init-pzaw.sh
./init-pzaw.sh

Konfiguracja edytora VS Code

W tym kursie zakładam, że będziecie korzystali z edytora VS Code do programowania. Nie jest to wymagane, ale ja w swoich prezentacjach będę go używał i pomogę go wstępnie skonfigurować, żeby z nim była możliwie łatwa i przyjemna.

W warunkach szkolnych nie możemy zakładać, że zainstalowane przez nas programy pozostaną zainstalowane przy następnej wizycie w pracowni komputerowej, ani że będzie nam dane pracować na tym samym komputerze co podczas ostatniej sesji roboczej, dlatego przygotujemy sobie wersję edytora VS Code w wersji przenośnej.

Po pobraniu archiwum zip z programem, zainstalujemy w Code następujące rozszerzenia:

Remote-SSH
prettier
ESLint

Połączenie Code z maszyną wirtualną

VS Code będzie się łączył z naszą VM przy pomocy protokołu ssh. Aby sprawdzić, że takie połączenie jest w ogóle możliwe, najpierw sprawdźmy adres IP naszej VM.

Co to jest SSH?

SSH, czyli Secure SHell to narzędzie służące do bezpiecznego łączenia się ze zdalnymi komputerami i pracy na nich z wykorzystaniem linii poleceń. SSH jest narzędziem wywodzącym się z systemów UNIXo-podobnych i cała filozofia działania może się wydawać obca w pierwszym kontakcie jeżeli jesteśmy przyzwyczajeni do aplikacji mobilnych czy Windowsowych.

Podstawowe róźnice na które trzeba się przygotować to:

brak jakiegokolwiek interfejsu graficznego
konfiguracja przy pomocy plików zapisanych na dysku
nastawienie na użytkownika doświadczonego

SSH ma więcej możliwości niż tylko przekazywanie komend i ich wyników pomiędzy dwoma komputerami. Z jednej z możliwości SSH, tzw. tunelowania, będziemy korzystali praktycznie cały czas, ale o tym porozmawiamy na innej lekcji.

Czy ja w ogóle mam SSH?

W celu sprawdzenia czy masz zainstalowane SSH uruchom PowerShell i wpisz komendę ssh -V. Powinna się wyświetlić informacja o zainstalowanej wersji programu np.

> ssh -V
OpenSSH_9.9p2, LibreSSL 3.3.6

Jeżeli ta informacja się nie pokazuje, musisz zainstalować klienta SSH. Na współczesnych systemach Windows może to być kwestia zmiany ustawień systemu. Nawigując ustawienia systemowe “Windows Settings > System > Optional features” znajdź opcję “OpenSSH” i ją włącz.

Najprostsze połączenie SSH

Jeżeli jeszcze nie włączyłeś maszyny wirtualnej to zrób to i w oknie VM wpisz komendę hostname -I albo ip address. Obie pokażą nam adres IP naszej VM choć w nieco inny sposób. Zapamiętaj ten adres, który pasuje do sieci skonfigurowanej podczas przygotowywania maszyny wirtualnej

Następnie w terminalu na swoim systemie operacyjnym (nie w maszynie wirtualnej) spróbuj nawiązać połączenie ssh z maszyną wirtualną.

ssh student@<adres-ip-VM>

Po podaniu hasła powinniśmy być zalogowani do naszego konta na VM. Aby się wylogować i zakończyć połączenie użyj komendy logout albo skrótu klawiszowego Ctrl+d.

Tworzenie klucza SSH

Wpisywanie hasła za każdym razem kiedy chcemy połączyć się z maszyną wirtualną może szybko się znudzić, dlatego wykorzystamy możliwość stworzenia pary plików na naszym komputerze, które pozwolą nam się logować do maszyny wirtualnej bez konieczności wpisywania hasła.

Temat uwierzytelniania użytkowników przy pomocy kluczy SSH jest dość złożony i zasługuje na osobny artykuł ale w tym momencie nie będziemy tego tematu zgłębiać. Zachęcam do kliknięcia w link powyżej i do właśnej eksploracji.

Na swoim komputerze w terminalu wywołaj komendę

ssh-keygen -t ed25519

Następnie odpowiadając na zapytania dojdź do końca procesu tworzenia klucza SSH. Wynikiem komendy będzie powstanie dwóch plików zawierających ciąg pozornie losowych znaków. Plik z rozszerzeniem .pub zawiera publiczną część klucza, co oznacza że możemy go używać dowolnie, udostępniać jego treść w jakikolwiek sposób chcemy i tak długo jak część prywatna klucza pozostaje tajna, nasz klucz będzie bezpieczny.

Klucz publiczny powinieneś znaleźć w swoim folderze użytkownika w podkatalogu .ssh

Wgranie klucza SSH na maszynę wirtualną

Przegranie klucza na maszynę developerską to zadanie, które można zrealizować na różne sposoby. My skorzystamy z względnie prostej opcji wklejenia zawartości klucza publicznego do naszego terminala przy połączeniu SSH z maszyną wirtualną.

ssh student@<adres-ip-VM>
echo <treść klucza publicznego> >> .ssh/authorized_keys

Konfiguracja Połączenia SSH w VS Code

Główny plik konfiguracyjny dla SSH o nazwie config powinien znajdować się w tym samym katalogu, gdzie utworzone zostały pliki klucza SSH, czyli <katalog domowy>/.ssh/config. Możesz stworzyć i edytować go dowolnym edytorem tekstu. My użyjemy VS Code.

Po otwarciu VS Code otwórz paletę komend (View > Command Pallette... albo skrót Ctrl+Shift+P) i wybierz Remote-SSH: Connect Current Window to Host, następnie wybierz Configure SSH Hosts… i wskaż plik ze swojego katalogu użytkownika.

Plik zawiera konfigurację znanych maszyn do których możemy się podłączyć z naszego komputera. Na start jest oczywiście pusty. Format konfiguracji wygląda następująco:

Host <nazwa-komputera>
    HostName <adres-ip>
    User <nazwa-uzytkownika>

<nazwa-komputera> może być w zasadzie dowolnym ciągiem znaków, najlepiej wybrać coś, co się zapamięta. Osobiście maszyny do nauki nazywam mało kreatywnie, np. django-dev dla maszyny do nauki django, ale nic nie stoi na przeszkodzie, żeby nazwać ją np. edward. Adres IP i nazwa użytkownika wynika z konfiguracji naszej maszyny, czyli tych samych wartości, których użyliśmy do połączenia powyżej.

Moja konfiguracja wygląda następująco:

Host pzaw-dev
    HostName 192.168.56.102
    User student

Po dodaniu tej pozycji do pliku konfiguracyjnego możemy w VS Code ponownie wybrać z palety komend Remote-SSH: Connect Current Windows to Host… i wybrać nazwę maszyny dodanej przed chwilą do pliku konfiguracyjnego. Po chwili VS Code powinien połączyć się do maszyny wirtualnej.

Wspódzielenie plików z maszyną wirtualną

Możemy potrzebować przegrać do maszyny wirtualnej większe pliki w dodatku nie tylko tekstowe. W tym wypadku warto stworzyć folder współdzielony pomiędzy nią a naszym komputerem. Aby móc wymieniać się plikami pomiędzy swoim systemem, a maszyną wirtualną:

Przy wyłączonej VM idź do okna
Ustawienia > Udostępnione Foldery
Dodaj lokalny, istniejący folder i nazwij go np. “share” Punkt montowania: /mnt
Uruchom VM
Uruchom komendę montującą folder
> sudo mount -t vboxsf share /mnt

Przydatne komendy systemu Linux

Kopiowanie folderów z podfolderami

$ cp -r /sciezka/folderu/zrodlowego /sciezka/docelowa

np. kopiowanie folderu z kodem do katalogu domowego:

$ cp -r /mnt/code/lekcja03/mid/mysite ~

Usuwanie folderów z podfolderami

$ rm -r sciezka/do/usuniecia

np. usunięcie obecnej zawartości folderu mysite w katalogu domowym

$ rm -r ~/mysite

Wyłączenie/włączenie interfejsu sieciowego

$ ip link set dev enp0s3 down
$ ip link set dev enp0s3 up

Wyłączenie systemu z linii komend

$ systemctl poweroff