Uruchomiliśmy już na naszym serwerze wiele usług. Mamy centrum dowodzenia Webmin, serwer DNS Pi-hole, chmurę na pliki NextCloud, menedżer haseł Bitwarden, a także środowisko deweloperskie VS Code. Do tej pory dostawaliśmy się do tych usług poprzez wpisywanie w pasek adresu przeglądarki adres IP naszego serwera wraz z portem, na którym działa dana usługa. Nie jest to najwygodniejsze rozwiązanie, dlatego w tym wpisie stworzymy swój własny hosting stron internetowych i odpalimy na nim stronę, która będzie swego rodzaju stroną domową naszego serwera z przyjaznymi graficznie odnośnikami (przyciskami) do uruchomionych usług. Użyjemy do tego serwer WWW o nazwie „NGINX”.

Czym jest NGINX

Jeżeli zdarzyło Wam się czytać cokolwiek na temat hostowania stron to pewnie słyszeliście nazwę „Apache”. Zarówno Apache jak i NGINX to serwery WWW, czyli usługi do serwowania stron internetowych. Te dwa silniki stoją za większością popularnych stron internetowych, można je nazwać cichymi bohaterami, którzy pracują w tle, abyśmy mogli korzystać z internetu tak jak to wygląda w dzisiejszych czasach. Pomiędzy Apache i NGINX jest wiele różnic, których nie widzę potrzeby dzisiaj wypisywać, bo zapewne obie te usługi zostaną opisane na tym blogu. Dzisiaj skupimy się na NGINX, bo do hostowania statycznych stron internetowych jest on zdecydowanie lepszy pod kątem wydajności jak i ilości zasobów jakie potrzebuje do działania (jest bardzo dobrze zoptymalizowany, więc zużywa jedynie śladowe ilości zasobów). Na koniec dodam jeszcze, że NGINX jest projektem open source, a my takie bardzo lubimy! Do tego poza serwowaniem stron internetowych może służyć jako reverse proxy (odwrotny serwer pośredniczący) dla innych serwerów HTTP, load balancer, proxy dla usługi poczty e-mail, czy pamięć podręczna HTTP.

---

Instalacja NGINX

Do uruchomienia NGINX na naszym serwerze użyjemy oczywiście Dockera (czy to już przypadkiem nie robi się nudne? 😉). Użyjemy oficjalnego dockerowego obrazu dostępnego pod tym linkiem. Lecz zanim stworzymy kontener NGINX, w pierwszej kolejności musimy utworzyć folder, w którym będziemy trzymać pliki źródłowe strony, którą zaraz stworzymy, proponuję katalog domowy naszego głównego użytkownika „odroid”:
mkdir -p /home/odroid/nginx/strona-domowa
W poleceniu „mkdir” użyliśmy flagi „-p”, bo tak naprawdę musimy utworzyć dwa katalogi, najpierw „nginx”, a następnie w jego środku „strona-domowa”. Ta flaga działa właśnie na takiej zasadzie, że tworzy całą gałąź katalogów, aż do ostatniego katalogu podrzędnego.

Teraz już możemy utworzyć kontener Dockera:
docker run -d \
--name nginx-strona-domowa \
-e PUID=1000 \
-e PGID=1000 \
-p 80:80 \
-v /home/odroid/nginx/strona-domowa:/usr/share/nginx/html \
--restart unless-stopped \
nginx:latest
Nazwa kontenera jakiej użyjemy to „nginx-strona-domowa”, specjalnie nie nazywam go po prostu „nginx”, bo zapewne nie będzie to ostatni kontener z NGINX’em na pokładzie, który w przyszłości uruchomimy. W KOŃCU użyliśmy portu 80 serwera, bo chcemy, aby po wpisaniu samego IP naszego serwera w przeglądarce została zaserwowana właśnie ta strona, którą za moment stworzymy. W następnej linijce skonfigurowaliśmy odpowiedni wolumen (volume), w którym podpieliśmy utworzony wcześniej folder na serwerze do folderu kontenera, w którym trzymane są pliki źródłowe stron internetowych. Na koniec oczywiście wskazaliśmy jakiego obrazu z repozytorium Dockera chcemy użyć (wspominałem o nim powyżej).

Sprawdźmy poprawność działania kontenera NGINX. Najłatwiej jest to zrobić poprzez utworzenie pliku HTML:
echo 'Test NGINX na serwerze ODROID' > /home/odroid/nginx/strona-domowa/index.html
Tym poleceniem wpisaliśmy ciąg znaków znajdujący się pomiędzy cudzysłowami do pliku „index.html”, który zostanie utworzony w folderze, który stworzyliśmy na potrzeby NGINX. Teraz przejdźmy do przeglądarki i w pasek adresu wpiszmy po prostu adres naszego serwera „192.168.88.7”. Jeżeli wszystko wykonaliście poprawnie to powinien się wyświetlić tekst „Test NGINX na serwerze ODROID”.

---

Tworzymy stronę domową

Ktoś bardziej zaznajomiony choć z podstawami HTML i CSS pewnie sam potrafi ulepić sobie stronę domową serwera. Ja jednak chciałbym zaproponować stronę stworzoną przeze mnie specjalnie na potrzeby tego wpisu. Jej kod źródłowy, który udostępniłem poniżej, może po prostu skopiować i wkleić każdy, nawet osoby które na ten moment nie miały żadnej styczności z robieniem stron WWW.

Nie będę wklejał całego kodu, który przygotowałem, w treść tego wpisu, bo jest on zbyt długi. Odeślę Was po prostu do zewnętrznego linka, pod którym dostępny będzie niniejszy kod do skopiowania. Skopiujcie ten kod, otwórzcie wcześniej stworzony plik „index.html”, usuńcie jego dotychczasową zawartość i wklejcie do niego mój kod:
nano /home/odroid/nginx/strona-domowa/index.html
Plik zapiszcie i wyjdźcie z niego. Po przejściu do przeglądarki i odświeżeniu strony dostępnej pod adresem IP naszego serwera powinniście zaobserwować efekt pokazany na poniższym filmiku demonstacyjnym:

Oczywiście kod możecie modyfikować do woli. Nie roszczę sobie do niego żadnych praw autorskich. Przygotowany przeze mnie kod źródłowy na pierwszy rzut oka wygląda miejscami jak straszny syf, ale już śpieszę z wyjaśnieniem, że stało się tak przez to, że użyte na stronie grafiki zamieniłem specjalnie na formę base64, tak aby, poza skopiowaniem kodu, nie trzeba było przerzucać na serwer żadnych dodatkowych plików (w tym przypadku obrazków w formacie png reprezentujących wypełnienie poszczególnych przycisków).

---

Jak stworzyć kolejną stronę

Drogi czytelniku, pewnie masz już plan na następną stronę lub w przyszłości będziesz go miał. Dlatego na koniec chciałbym pokazać jak łatwo można hostować kolejne strony na innych portach. Instrukcja postępowania jest analogiczna do tej przedstawionej powyżej.

Najpierw tworzymy folder na pliki źródłowe kolejnej strony:
mkdir /home/odroid/nginx/[nazwa strony]
Następnie uruchamiamy kolejny kontener dockera:
docker run -d \
--name nginx-[nazwa strony] \
-e PUID=1000 \
-e PGID=1000 \
-p [port]:80 \
-v /home/odroid/nginx/[nazwa strony]:/usr/share/nginx/html \
nginx:latest
Nazwę i port pozostawiam do wypełnienia.

Jeżeli materiał zawarty w tym wpisie jest dla Ciebie wartościowy i masz ochotę wesprzeć moją pracę to zapraszam na mój profil na >Patronite<. Zachęcam także do odwiedzenia mojej strony >tomaszdunia.pl<. Możesz także zagadać do mnie na Twitterze >@theto3k<.

---

Kategorie: Dla początkujących,Poradniki,Usługi - @ 2022-07-22 18:00

Tagi: apache, base64, CSS, docker, hosting, HTML, http, nginx, port 80, serwer www, strona domowa, strona www