Lokalne środowisko programistyczne do pracy z WordPress #3

Wirtualne środowisko programistyczne. Wygodna konfigurcja środowiska programistycznego z Vagrant!

Alternatywą wobec WAMP/XAMPP i instalacji serwera bezpośrednio na dysku komputera jest wirtualne środowisko bazujące na tworzeniu symulacji systemu operacyjnego i warstwy sprzętowej, poprzez użycie odpowiedniego oprogramowania. Sposób przedstawiony poniżej nie jest uzupełnieniem pierwszej części, a osobną metodą na przygotowanie komputera do pracy. Programista sam musi zdecydować, która metoda mu bardziej odpowiada. Z naszej strony zachęcamy do korzystania z wirtualizacji i Vagranta. Takie środowisko będzie wykorzystywane w pozostałych wpisach dotyczących WordPress na łamach bloga Learn2Code.

Przypomnijmy, że celem przygotowania komputera do pracy i swobodnego programowania aplikacji internetowych jest pobranie i zainstalowanie wszystkich potrzebnych programów i bibliotek. W przypadku prostych, podobnych do siebie projektów, są one precyzyjnie zdefiniowane i w większości wypadków jest to proces, w którym nie spodziewamy się zaobserwować żadnych problemów. Może jednak okazać się, że dany projekt wymaga bardziej zaawansowanej konfiguracji i korzysta z większej ilości zależności, może też zdarzyć się, że musimy pracować równolegle nad projektami, a każdy z nich ma wymagania środowiskowe. Lub gdy będziemy chcieli przetestować nowe technologie i biblioteki przy kolejnych projektach, może okazać się, że jednolita konfiguracja nie jest możliwa do utrzymania. Należy też liczyć się z tym, że nawet instalacja przy użyciu bundler`a (np. WAMPa) może się zakończyć niepowodzeniem. Wystarczy, że aktualnie zalogowany użytkownik nie będzie miał wystarczających uprawnień by ukończyć instalację; będzie miał już wcześniej zainstalowaną inną wersję tych programów i przez to napotka problemy z kompatybilnością lub uruchamianiem złych plików wykonawczych. Równie ważne jest aby nasze lokalne środowisko jak najlepiej odwzorowywało środowisko produkcyjne, na którym będzie działała nasza aplikacja lub strona, co dodatkowo utrudnia przygotowanie odpowiedniej konfiguracji do pracy lokalnej.

VirtualBox to popularne narzędzie umożliwiające pracę na wirtualnym środowisku. Jest dostarczane przez firmę Oracle i w pełni darmowe. VirtualBox uruchamia system operacyjny na podstawie tzw. “obrazu” lub “wirtualnego dysku”. Jest to kopia wcześniej przygotowanej wirtualizacji, mogąca zawierać już zainstalowany system operacyjny lub programy. Dzięki szerokim zastosowaniom wirtualnych maszyn, dostępne są zestandaryzowane obrazy, przygotowane do stosowania w pracy z wybranymi technologiami i językami. Istnieje również możliwość, aby w prosty sposób utworzyć własny obraz i samodzielnie wykonać na nim instalację całego oprogramowania, w tym systemu operacyjnego.

Wirtualizacja nie jest pozbawiona wad. Minusem pracy z obrazami są przeważnie ich duże rozmiary i w związku z tym czasochłonne przenoszenie pomiędzy komputerami. Co więcej, utrzymanie spójnej i aktualnej konfiguracji na wszystkich kopiach jednego obrazu jest niemożliwe do osiągnięcia i może się okazać, że pracujemy na przestarzałej konfiguracji, podczas gdy inni członkowie zespołu pracują z najnowszymi aktualizacjami. Aby rozwiązać ten problem, zaleca się stosowanie dodatkowego narzędzia o nazwie Vagrant, stanowiącego technologię uzupełniającą VirtualBox`a.

Najlepsza dostępna konfiguracja dla web developerów pracujących z WordPress jest konfiguracja dostarczona przez Varying Vagrant Vagrants (VVV), przeznaczona do pracy z Vagrantem.

Vagrant to narzędzie ułatwiające budowę i konfigurację wirtualnego środowiska w postaci pojedynczego pliku, który możemy przekazać innym programistom pracującym nad naszym projektem i zagwarantujemy sobie jednolitą konfigurację pomiędzy wszystkimi komputerami. Jest on wykorzystywany razem z VirtualBox`em. VirtualBox jest odpowiedzialny za działanie wirtualnego środowiska, a Vagrant służy do jego wygodnej konfiguracji z poziomu linii komend.
Informacje o konfiguracji dodamy w pliku konfiguracyjnym- Vagrantfile. W ten sposób dzięki jednemu poleceniu jesteśmy w stanie stworzyć nową wirtualizację na naszym VirtualBoxie i od razu, automatycznie zainstalować na wirtualnej maszynie wybrany system operacyjny, wszystkie potrzebne nam do pracy programy w odpowiednich wersjach (taka automatyczna instalacja nazywa się prowizjonowaniem/ ang. provisioning).
Bez Vagranta musielibyśmy każdy program zainstalować osobno z poziomu wirtualnej maszyny. Osiągnięty efekt będzie ten sam, jednak pochłonie znacznie więcej czasu i kopiowanie otrzymanego w ten sposób obrazu dla innych programistów będzie trudniejsze.

Wykorzystajmy teraz VirtualBox i Vagrant, aby stworzyć środowisko programistyczne zbudowane na podstawie konfiguracji dostarczonej przez Varying Vagrant Vagrants (VVV). Zgodnie z dokumentacją VVV powinniśmy po zakończeniu procesu mieć przygotowany do pracy system o następującej specyfikacji, zawierającej m.in:

• Ubuntu 18.04 LTS (Bionic Beaver)
• nginx (mainline version)
• MariaDB 10.1
• php-fpm 7.2.x
• git
• phpMyAdmin (multi-language)
• ….

Jak widać VVV gwarantuje nam minimum niezbędne do pracy. Jest to tylko fragment listy, która jest o wiele dłuższa i zawiera wiele dodatkowych narzędzi przydatnych w codziennej pracy. Instalację i uruchomienie środowiska wykonamy na przykładzie systemu operacyjnego Windows.

Pełna dokumentacja Varying Vagrant Vagrants (VVV) jest dostępna pod adresem https://varyingvagrantvagrants.org/

Pobranie i instalacja VirtualBox

---

Pobranie i instalacja Vagranta

---

---

---

---

---

Sprawdźmy czy instalacja zakończyła się pomyślnie i Vagrant został poprawnie zainstalowany. Robimy to z linii komend. Aby ją włączyć należy nacisnąć klawisz Windows lub włączyć menu Start, a następnie w miejscu na wyszukiwanie plików wpisać cmd i nacisnąć Enter. W linii komend należy wpisać vagrant i nacisnąć Enter. Potwierdzeniem poprawnej instalacji będzie wyświetlona lista informacji i pomoc.

---

Teraz możemy wykorzystać Vagrant do tworzenia wirtualnego środowiska na podstawie plików konfiguracyjnych. Będziemy budować nasze środowisko w oparciu o konfigurację przygotowaną przez VVV. Przejdźmy zatem do pierwszego kroku, czyli pobrania odpowiednich konfiguracji.

Do wykonania poleceń występujących w dalszej część, należy zainstalować system kontroli wersji GIT.

Dla komputerów z systemem operacyjnym Windows instalator można pobrać z https://git-scm.com/download/win .

Lista plików dla pozostałych systemów jest dostępna pod adresem:
https://git-scm.com/download

Szczegółowa instrukcja instalacji GIT`a pojawi się w osobnym wpisie wprowadzającym do systemów kontroli wersji.

Podążając za dokumentacją zalecaną metodą instalacji jest sklonowanie repozytorium przy użyciu GIT`a. Z poziomu linii komend należy wykonać następujące polecenie:
git clone -b stable git://github.com/Varying-Vagrant-Vagrants/VVV.git <scieżka_do_folderu>/<nazwa_docelowego_folderu>
Dzięki niemu system kontroli wersji GIT pobierze i umieści wszystkie niezbędne pliki we wskazanym folderze (podaj nazwę swojego folderu w miejsce <…>), we wskazanej lokalizacji.
W tym przykładzie docelowy folder nazywa się VVV-3.0.0 i znajduje się na na dysku D:. Komenda klonująca repozytorium do tego folderu wygląda następująco:
git clone -b stable git://github.com/Varying-Vagrant-Vagrants/VVV.git D:/VVV-3.0.0

Uruchamianie i zarządzanie wirtualnym środowiskiem przez Vagrant`a odbywa się z linii komend. W celu stworzenia środowiska należy wejść do folderu (stosując linię komend; wszystkie zadania i polecenia wykonujemy z jej poziomu!) w którym znajduje się sklonowany w poprzednim kroku projekt i wykonać komendę vagrant up.
Do zmiany folderu w linii komend stosuje się polecenie cd <nazwa_folderu>. Rzeczywisty przykład użycia metod znajduje się poniżej.

Upewnij się, że na używanym dysku masz co najmniej 500mb wolnej pamięci. Przy pierwszym uruchomieniu (czyli użycia komendy vagrant up) Vagrant pobierze podstawowy wirtualny obraz i wszystkie potrzebne programy, dlatego proces może potrwać kilka minut i należy uzbroić się w cierpliwość. Pobrany obraz będzie posiadał system operacyjny Ubuntu (linux). Obraz zostanie pobrany tylko za pierwszym uruchomieniem vagrant up. Każde kolejne uruchomienie będzie dużo szybsze.

Jeśli proces konfiguracji maszyny zakończył się sukcesem, to po wpisaniu w przeglądarce adresu http://vvv.test/ powinna nam się wyświetlić strona strona zawierająca informacje o stanie naszego środowiska.

Korzystająca z Vagrant`a, nie będziemy musieli otwierać nowego obrazu w VirtualBoxie. Vagrant domyślnie działa w trybie headless, czyli bez warstwy graficznej. Jest zarządzany z linii komend, zaś pliki edytujemy bezpośrednio na naszym komputerze. Vagrant sam poradzi sobie z mapowaniem ścieżek!

Dodanie nowego projektu WordPress

Na ten moment mamy przygotowaną wirtualną maszynę (VirtualBox) z konfiguracją i niezbędnymi programami, automatycznie zainstalowanymi (konfiguracja Vagrant`a). Środowisko uruchamiamy z linii komend, przy pomocy komendy vagrant up . W ostatnim kroku przekonaliśmy się, że taka kombinacja działa. Po wpisaniu w przeglądarce adresu http://vvv.test/ wyświetliła się strona z informacjami o projektach. W tym momencie zapewne pojawiają się pierwsze pytania:

1. Gdzie znajdują się te projekty? Czy są na wirtualnej maszynie i znikają po jej zamknięciu?
2. Jak można edytować i dodawać pliki?
3. Jeśli pliki są na wirtualnej maszynie, to jest możliwość korzystania z GIT`a lub innego systemu kontroli wersji?

Pytania są w pełni zasadne. Na szczęście mamy na nie przygotowane odpowiedzi, rzucające więcej światła na tak skonfigurowane środowisko.

Po pierwsze pliki znajdują się na naszym komputerze, nie na wirtualnej maszynie. Dlatego nie znikają, gdy kończymy pracę i decydujemy się ją wyłączyć. Wirtualna maszyna wie o miejscu ich położenia dzięki informacjom zawartym w pliku konfiguracyjnym. Plik konfiguracyjny jest czytelny i jego edycja jest prosta (zajmiemy się tym w kolejnych krokach). W nim też będą definiowane nowe projekty. Dzięki temu każdy z nich będzie miał dostęp do tej samej konfiguracji, programów i bazy danych. Wszystkie pliki dodajemy i edytujemy na naszym komputerze w miejscu, gdzie zainstalowaliśmy VVV (sklonowaliśmy), w podfolderze www.

W przykładach VVV został sklonowany do lokalizacji: D:VVV-3.3.0www. Jeśli użyłeś innej, wybranej przez siebie ścieżki, to w takim przypadku musisz pamiętać, że podfolder www znajdzie się właśnie w niej.

Żeby dodać nowy projekt, który będzie widoczny dla VirtualBox i Vagrant`a nie wystarczy po prostu umieścić nowych plików w folderze www Vagranta. W tym celu należy zaktualizować konfigurację zapisaną w pliku config.yml, znajdującą się z kolei w folderze config Vagranta (dla ścieżek użytych w przykładach, znajduje się ona w D:VVV-3.3.0 configconfig.yml).

W tym pliku należy odnaleźć sekcję sites i dodać w niej nowy projekt w postaci klucz: wartość, zachowując istniejącą notację i wcięcia. Najlepiej to zrobić na podstawie już istniejących wpisów. Należy zatem zdefiniować jego: nazwę, roboczy url oraz bazową konfigurację. Należy pamiętać, że pliki .yml mają strukturę opartą o wcięcia, dlatego należy konsekwentnie stosować się do przyjętych zasad formatowania i używania spacji lub tabulatora podczas edycji pliku.

Fragment pliku konfiguracyjnego, z wybransekcją sites zawierającą domyślny projekt wordpress-one oraz nowy projekt wordpress-dev:

...
sites:

  # latest version of WordPress, can be used for client work and testing
  # Check the readme at https://github.com/Varying-Vagrant-Vagrants/custom-site-template
  wordpress-one:
    skip_provisioning: false
    description: "A standard WP install, useful for building plugins, testing things, etc"
    repo: https://github.com/Varying-Vagrant-Vagrants/custom-site-template.git
    hosts:
      - one.wordpress.test
    custom:
      wpconfig_constants:
        WP_DEBUG: true
        WP_DEBUG_LOG: true
        WP_DISABLE_FATAL_ERROR_HANDLER: true # To disable in WP 5.2 the FER mode
...
  wordpress-dev: # [1]
    description: "Projekt szkoleniowy na potrzeby L2C"   # [2] 
    repo: https://github.com/Varying-Vagrant-Vagrants/custom-site-template.git   # [3] 
    hosts:
      - dev.wordpress.test   # [4] 
...

W powyższym fragmencie nowy projekt wordpress-dev został dodany na samym końcu sekcji sites. Na jego konfiguracje składają się:

1. Nazwa/identyfikator projektu
2. Opis projektu
3. Repo, czyli wskazanie bazowej konfiguracji, na podstawie której Vagrant pobierze domyślne pliki i uruchomi skrypty potrzebne do zainstalowania i skonfigurowania nowego projektu WordPress. W przykładzie korzystamy z domyślnego repozytorium.
4. Adres URL projektu, pod którym będziemy mieli lokalnie dostęp do strony.

Po dodaniu zmian należy ponownie uruchomić Vagranta. Każda zmiana w pliku konfiguracyjnym wymaga uruchomienia ponownie maszyny wirtualnej wraz z prowizjonowaniem! Prowizjonowanie oznacza, że w trakcie uruchamiania środowiska (na skutek wywołania vagrant up) zostaną automatycznie zainstalowane na wirtualnym wszystkie wymienione w konfiguracji programy czy pobrane wskazane biblioteki i utworzy dla nas wszystkie potrzebne pliki i katalogi projektowe oraz pobierze wszystkie wskazane w konfiguracji biblioteki.

• Jeśli maszyna już została uruchomiona należy użyć komendy
  vagrant reload --provision
• Jeśli maszyna została zatrzymana lub nie była jeszcze uruchamiana należy użyć komendy vagrant up --provision

Teraz można już przetestować nową konfigurację. Po wpisaniu w oknie przeglądarki adresu URL projektu, powinna się wyświetlić podstawowa strona WordPress. Jeśli udało się osiągnąć taki efekt, oznacza to, że podczas procesu konfiguracji nie wystąpiły błędy i jesteśmy gotowi do pracy.

Jak używać Vagranta z GITem i własnym repozytorium

Jeśli korzystasz z systemów kontroli wersji takich jak Git, to na pewno zastanawiasz się jak połączyć nasze środowisko z prywatnym repozytorium (umieszczonym np. na Github). Bezpośrednie sklonowanie repozytorium do folderu public_html nie jest poprawnym rozwiązaniem, ponieważ projekt VVV jest już częścią osobnego repozytorium! Przypomnij sobie, że we wcześniejszych krokach użyliśmy komendy git clone , po to aby to repozytorium sklonować. Możesz się o tym łatwo przekonać, uruchamiając z poziomu folderu projektowego (czyli np. w folderze www/wordpress-one lub w dodanym przez nas www/wordpress-dev) komendę wyświetlającą tzw. remote (czyli relacje z zewnętrznymi repozytoriami) dla git`a:

<twoja ścieżka>www/wordpress-one> git remote -v
origin  https://github.com/Varying-Vagrant-Vagrants/custom-site-template.git (fetch)
origin  https://github.com/Varying-Vagrant-Vagrants/custom-site-template.git (push)

Żeby połączyć się z własnym repozytorium należy:

1. zalogować się do uruchomionej wirtualnej maszyny z poziomu konsoli poprzez komendę vagrant ssh. Aby zadziałała, należy wcześniej uruchomić środowisko (w tym celu stosuje się komendę vagrant up),
2. wejsc do folderu, który jest mapowany na public_html, czyli
   vagrant@vvv:~$ cd /srv/www/wordpress-dev/
vagrant@vvv:/srv/www/wordpress-dev$. Informacje o mapowaniu i o tym, gdzie na wirtualne maszynie znajduje się projekt są wyświetlane w konsoli, w trakcie wykonywania komendy vagrant up
3. skonfigurować GIT`a, aby łączyć się z wybranym repozytorium, korzystając z naszych danych logowania. Czyli należy po kolei ustawić nazwę użytkownika i e-mail:
   git config --global user.name "<nazwa użytkownika>"
git config --global user.email "<email>"
git remote set-url origin <url repozytorium>

Vagrant korzysta z tzw. tunelowania ssh, co umożliwia pracę ze wskazanym repozytorium z poziomu wirtualnej maszyny. Pliki istniejące bezpośrednio na dysku, jak widzieliśmy należą do repozytorium VVV, które sklonowaliśmy na samym początku! Teraz jednak udało nam się odpowiednio skonfigurować repozytorium na wirtualnej maszynie i z jej poziomu możemy łączyć się z naszym repozytorium (tutaj: l2c-wordpress-basic-theme). Na poniższym zrzucie ekranu widać wyraźnie różnice między dwoma projektami dostępnymi na wirtualnej maszynie dzięki Vagrantowi. Nasz projekt o nazwie wordpress-dev łączy się z naszym repozytorium l2c-wordpress-basic-theme.git (nazwa własna, wymyślona na potrzeby wpisu) , a projekt poglądowy, domyślnie przygotowany przez Vagrant łączy się z repozytorium Varying-Vagrant-Vagrants/custom-site-template.git.

---

W tym momencie mamy już w pełni funkcjonalne środowisko do pracy z WordPress i systemem kontroli wersji GIT. Wirtualizacja i Vagrant dają unikalną możliwość tworzenia równolegle istniejących konfiguracji, które nie będą ze sobą kolidowały i będą zamknięte w obrębie VirtualBox`a, bez ingerencji w ustawienia systemowe. Zachęcamy do stosowania właśnie tego rozwiązania do pracy z przyszłymi projektami nowych wtyczek lub szablonów.