Docker + wordpress + phpmyadmin wersja Windows

Nie opiszę tutaj wszystkiego związanego z dockerem bo jestem świerzynka w tym temacie oraz jest tego tyle że po prostu nie da się tego opisać bez przepisywania dokumentacji 😉
Będzie to tylko mały wycinek tego co jest mi potrzebne do frontentu z przykładem użycia WordPress, MySQL oraz phpMyAdmin na Windowsie.

Do czego można by użyć Dockera?

Powiedźmy że chcemy stworzyć aplikację składającą się właśnie z WordPress + MySQL + phpMyAdmin aby przygotować nowy theme czy plugin.
Wszystko to musimy zainstalować osobno na komputerze do tego PHP + apache2 lub użyć Xampp’a, ale co jeśli musielibyśmy użyć kilku wersji PHP 5.5 czy 5.6 i do tego MySQL również w kilku wersjach.

Normalnie czekało by nas bardzo długie konfigurowanie każdej instancji, odinstalowanie elementów i instalacja nowych oraz ich konfiguracja czyli jednym słowem koszmar.

W takich przypadkach pomocny jest właśnie Docker. Wystarczy wybrać kontener z wersją aplikacji i już. Można nawet uruchomić wiele kontenerów równolegle, dzięki czemu możemy testować aplikację w kilku rożnych wersjach w tym samym czasie!
Najważniejsze przynajmniej dla mnie jest to że nie zaśmiecamy sobie środowiska zbędnymi instalacjami, a jak wiemy w tym względzie Windows jest dość ułomnym środowiskiem i można go łatwo „zepsuć”.

Teraz trochę definicji.

Docker jest narzędziem , które pozwala umieścić program oraz jego zależności w przenośnym wirtualnym kontenerze. Umożliwia utworzenie kontenerów zawierających pojedyncze aplikacje ale także łączyć je w większe środowiska.

Ok zaczynamy zabawę.

Najpierw należy zainstalować Dockera na komputerze cały proces jest opisany na zerknij tutaj
W dalszej części będziemy korzystać z narzędzia Docker Compose ono jest dla wersji MAC jak i Windows jest zaszyte w instalacji Docker zaś linuxowcy muszą je osobno doinstalować.

Otwieramy konsole i wpisujemy

docker run hello-world

Jeżeli wszystko przebiegło poprawnie powinniśmy zobaczyć w konsoli to co poniżej.

Sprawdźmy jakie mamy obrazy, powinien być jeden hello-world, aby to sprawdzić piszemy

docker images

i dostajemy

Może co poważniejszego zainstalujmy na przykład nginx

docker container run -it -p 80:80 nginx

Kilka chwil i mamy uruchomioną instancję nginx, otwieramy przeglądarkę i http://localhost/index.html i mamy powitalną stronę

Teraz wyobraźcie sobie ile czasu by to zajęło w konwencjonalnym podejściu instalacja tego pod Windosem 🙂

Kilka przydatnych komend poniżej.

  • docker – wyświetla wszystkie podstawowe komendy
  • docker help – podstawowa komenda dzięki której można sprawdzić składnie oraz wyszukać inne komendy
  • docker pull [nazwaObrazu] – pobranie obrazu
  • docker search [imageName:imageTag] – komenda wyszukuje obrazy o podanej nazwie i tagu
  • docker run [args] [imageName:imageTag/imageId] – stworzenie oraz uruchomienie kontenera z obrazu
  • -it – tryb interaktywny (możemy np: korzystać z bash’a)
  • -p – protokół mapuje wystawiony port naszego kontenera na port naszego localhost
  • -d – tryb deamon, działa na zasadzie usługi
  • -expose – pozwala nam wystawić post naszego kontenera na zewnątrz
  • docker ps – komenda pokazuje nam działające kontenery jeżeli chcemy zobaczyć również te niedziałające docker ps -a
  • docker kill/stop [containerName/containerId] – komenda służy do wyłączenia działającego kontenera. Zazwyczaj korzysta się z containerId z 3 pierwszych znaków
  • docker docker rename [containerOldName] [containerNewName] – komenda służy do zmiany nazwy kontenera
  • docker rm [containerName/containerId] – usunięcie kontenera z naszego komputera o zadanej nazwie lub id
  • docker rmi [imageName:imageTag/imageId] – usuniecie z naszego komputera obrazu o podanej nazwie i tagu lub id

To tylko ułamek wszystkich flag więcej można znaleźć tutaj.

Przejdźmy do konkretów.

A mianowicie chce uruchomić tak jak na wstępie pisałem WordPress + MySQL + phpMyaAmin i swój własny theme i tutaj przyda nam się Docker Compose.
Najpierw usuńmy pozostałości po naszych poprzednich próbach. Zobaczmy co jest zainstalowane najpierw

docker images -a

później

docker rm containerId

– czyli pierwsze 3 znaki kontenera i enter.

Zaczynamy od stworzenia folderu

mkdir docker-setup

następnie

cd docker-setup

i uruchamiam visual studio code przez komendę code .

Do vsc instaluje plugin Docker poniżej


plugin pokazuję kontenery images oraz Docker Hub wystarczy kliknąć na wielorybka, trochę upraszcza nam pracę mniej pisania w konsoli 😉

Na początku tworzę w docker-setup .dockerignore praktycznie coś na styl gita

Następnie tworzę plik docker-compose.yml w nim będzie działać się cała magia 🙂

  • version – oznacza wersję Docker Compose
  • services – sekcja, w której definiujemy serwisy
  • mysql:5.7 – nazwa własna usługi
  • image – wskazujemy z jakiego obrazu ma być zbudowany kontener
  • build – wskazujemy ścieżkę do pliku Dockerfile naszego serwisu – w projekcie nie używamy
  • ports – definiujemy porty, które będą mapowane z konteneru
  • links – zależność pomiędzy kontenerami, db oraz WordPress
  • environment – zmienna środowiskowa dla danego kontenera

Aby uruchomić Docker Compose w naszym terminalu używamy komendy

docerk-compose up

w miejscu w którym mamy docker-compose.yml

Za pierwszym razem wszystkie zależności które są w yml są zaciągane – nasza baza danych jak i WordPress.
Poniżej screen z vsc oraz z chrome w którym mamy WordPress w wersji do zainstalowania 🙂

Dodajmy do tego całego naszego środowiska również phpMyAdmin

phpmyadmin:
 depends_on:
  - db
 image: phpmyadmin/phpmyadmin
 ports:
  - 8080:80
 environment:
  MYSQL_ROOT_PASSOWRD: test

Musimy najpierw zastopować wszystkie kontenery czy to przez „ctrl+c” lub z innej konsoli „docker-compose down” albo z vsc prawy przycisk na poszczególny kontener i Remove Container jak kto woli. Ja używam docker-compose down jest najpewniejszym sposobem zamknięcia uruchomionych kontenerów.

Po dodaniu phpMyAdmin uruchamiamy ponownie „docker-compose up”

Wszystko działa szybciej bo pobierany jest tylko obraz phpMyAdmin, aby sprawdzić czy działa wchodzimy na to co ostawiliśmy mianowicie http://localhost:8080
Podajemy „Użytkownika root Hasło test” tak jak podaliśmy w docker-compose.yml
I naszym oczom ukazuje się phpMyAdmin z utworzoną baza wp

Wracamy do okna http://localhost/wp-admin/install.php tam instalujemy jak zawsze i wypełniamy danymi ale ZARAZ ZARAZ!!! jeśli wyłączymy wszystkie kontenery to co dodaliśmy do WordPress a mianowicie strony, artykuły wszystko to nam zniknie!!! Nie no tak to nie możne być!

Dodajemy własne artykuły wszystko co jest nam potrzebne w WordPressa i za pomocą phpMyAdmin eksportujemy bazę do pliku db.sql (nazwa oczywiście może być inna) nie musimy tego robić możemy pobrać jakąś inną bazę danych z innego WordPress jeżeli takową posiadamy i wystarczy to przygotowania naszego theme.
Dump bazy umieszczam w folderze „data/db.sql” w naszym projekcie oraz dodaje odpowiedni wpis w docker-compose.yml

db:
 image: mysql:5.7
 volumes:
  - ./data:/docker-entrypoint-initdb.d
 restart: always
 ...

volumes pobiera nam db.sql za każdym razem gdy uruchamiamy „docker-compose up” i mamy z głowy uzupełnianie danych w bazie, możemy wejść na http://localhost i zobaczyć naszego WordPress

Dodajemy własne theme.

Teraz druga cześć chcemy dodać własny theme, ponownie stopujemy docker-compose down w głównym folderze naszego projektu dodaje folder wp-content/themes/newTemplate z plikami odpowiedzialnymi za theme.
Teraz aby to zostało zaciągnięte i widoczne w WordPressie należy dodać values tym razem do wpisu wordpress.

Ponownie docker-compose up, teraz możemy pracować na theme, aby zobaczyć zmiany które zrobiliśmy w theme wystarczy odświeżyć WordPress F5 w przeglądarce. Nie trzeba stopować kontenerów.

Źródła znajdują się pod tym adresem

Axios oraz php wysłanie formularza.

Za pomocą axios wysyłam formularz.
Najpierw zbieram dane z formularzy, ustawiam content-type i wysyłam postem – axios.post

let data = {
    'imie-i-nazwisko': document.getElementById('name').value,
    'data-wydarzenia': document.getElementById('date').value
};

let config = {
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    }
}
axios.post('mail.php', data, config)
    .then(response => {
        console.log(response);
    })
    .catch(error => {
        console.log(error);
    });

Następna rzecz okazała się dość problematyczna, a mianowicie sparsowanie jsona do zmiennej w php.
Całe clou to file_get_contents(‚php://input’)

$_POST = json_decode(file_get_contents('php://input'), true);

if($_POST) {
    $imie_i_nazwisko = trim($_POST['imie-i-nazwisko']);
    ...
}

Obliczanie różnicy czasu i obliczanie nowej daty

error_reporting(E_ALL ^ E_WARNING ^ E_PARSE ^ E_NOTICE);
//date_default_timezone_set ("PL/PL");
date_default_timezone_set ("Europe/Warsaw");

class date_check {
static public function check_on($data) {
$day_ts = 86400;

$date_order = $data['date_order'];
$roznica = (strtotime($date_order)-strtotime(date('Y-m-d')));

$roznica_day = floor($roznica/$day_ts);

echo $date_order."\n";
echo $roznica."\n";
echo $roznica_day."\n";

if($roznica_day<12) {

$date_start = date('Y-m-d', strtotime("1 day"));
$date_stop = date('Y-m-d', strtotime("21 day"));

} else {

$day_back = -10;
$day_next = 10;

$date_start = date('Y-m-d', strtotime($date_order." ".$day_back." day"));
$date_stop = date('Y-m-d', strtotime($date_order." ".$day_next." day"));
}

return array('date_start'=>$date_start, 'date_stop'=>$date_stop);
}
}

$data_back = date_check::check_on(array('date_order'=>'2016-04-18'));

echo $data_back['date_start']."\n";
echo $data_back['date_stop']."\n\n";

$data_back = date_check::check_on(array('date_order'=>'2016-04-11'));

echo $data_back['date_start']."\n";
echo $data_back['date_stop']."\n\n";

$data_back = date_check::check_on(array('date_order'=>'2016-04-26'));

echo $data_back['date_start']."\n";
echo $data_back['date_stop']."\n\n";

Wynik działania:

2016-04-18
-777600
-9
2016-04-28
2016-05-18

2016-04-11
-1382400
-16
2016-04-28
2016-05-18

2016-04-26
-86400
-1
2016-04-28
2016-05-18

Parsowanie adresu uri strony

$urls = array (
'http://kody.wig.pl/file.php?key=9emixire&ampexpires=1456358400&amp;signature=76f289',
'http://kody.wig.pl/file.php?key=9emixire&expires=1456358400&signature=76f289');
$arr_url = parse_url($urls[0]);
parse_str($arr_url['query'], $arr_query);
print_r($arr_url);
print_r($arr_query);

Wynik:
Array
(
[scheme] => http
[host] => kody.wig.pl
[path] => /file.php
[query] => key=9emixire&expires=1456358400&signature=76f289
)
Array
(
[key] => 9emixire
[expires] => 1456358400
[signature] => 76f289
)