38
4.6 Spletni strežnik Apache
Za strežbo aplikacije v svetovni splet (WWW) sem potreboval tudi HTTP-strežnik. Pet vodilnih spletnih strežnikov na tržišču je:
- strežnik Apache,
- Microsoftove internetne informacijske storitve, - Lighttpd,
- spletni strežnik Nginx,
- spletni strežnik Sun Java System. [11]
Odločil sem se za Apache-http-server, saj je odprtokoden, kar pomeni, da je na voljo brezplačno in je do njega enostavno dostopati prek spletnih skupnosti. Tako je v primeru težave ali napake na voljo veliko spletne podpore. Odprtokodnost omogoča tudi spreminjanje strežnika v skladu z lastnimi zahtevami. Najnovejša različica Apache-ja je veliko bolj prilagodljiva kot prejšnje in z lahkoto obravnava več hkratnih zahtev. Strežnik Apache HTTP je bil predstavljen leta 1995 in je še vedno najbolj priljubljen spletni strežnik na internetu. Na sistemu CentOS Stream najdemo Apache strežnik pod imenom httpd.
1. dnf install httpd httpd-tools 2. systemctl enable httpd.service 3. systemctl start httpd.service
V tem trenutku je strežnik začel streči na vratih 80-http. Če v brskalniku poskušamo dostopati do spletne strani http://mojastran.si , vidimo uvodno stran Apache http-strežnika. Ugotovimo, da smo na spletno mesto prišli preko http vrat 80 in ne preko https, saj stran še ne vsebuje potrebnih SSL-certifikatov (»Secure Sockets Layer »). Če želimo do strani dostopati z naprav, ki imajo IP-naslove, ki se ne nahajajo na seznamu znotraj požarnega zidu, spletnega mesta ne bomo videli, saj nam požarni zid onemogoča vpogled.
39 Slika 17: Testna stran Apache
40
Registracija IP-naslova na DNS-strežnik
Do sedaj sem na spletni naslov dostopal preko IP-naslova spletnega mesta (http://29.1.199.93/). Da bi stranke in uporabniki lažje dostopali do spletne strani, je treba spletno mesto registrirati v sistem domenskih imen DNS.
DNS je hierarhično razdeljeno poimenovanje za storitve kateregakoli vira, ki je povezan z svetovnim internetom oziroma z osebnim omrežjem TCP/IP. Povezuje različne informacije domenskih imen in tehnične funkcionalnosti. V splošnem DNS-sistem skrbi za pretvorbo IP-zapisa v spletni naslov in komunikacijo med strežniki in uporabniki. Skrbi za pretvorbo naslovnih zapisov, saj so zapisi v omrežju zapisani v IP-obliki (npr.: 152.89.234.10), DNS- strežnik pa te zapise pretvori v uporabniku prijaznejši zapis (npr.: mojaaplikacija.si) in se jih da v takšni obliki lažje zapomniti in so seveda tudi lažji in enostavnejši za samo upravljanje.
Podjetje Softnet med svojimi storitvami nudi tudi storitve DNS in je uradno registriran registrator domen. Domene za moje spletno mesto ni bilo treba na novo registrirati, dodala se je le poddomena. Ko uporabnik želi dostopati do novega spletnega mesta, DNS-uporabnika usmeri na glavno domeno, ta ga pa preusmeri na novo nastavljeno poddomeno.
4.7 Sistem Git
Na tej točki lahko vidimo, da strežnik pravilno streže spletno aplikacijo in uporabniki lahko dostopajo do nje. Sedaj je treba na strežnik prenesti navedeno aplikacijo. Za prenos lahko uporabimo več načinov. Uporabimo lahko čisto osnovni SSH-odjemalec za oddaljeni dostop OpenSSH: SSH File Transfer. Lahko uporabimo WinSCP ali pa Filezilla, ki sta oba odprtokodna in brezplačna odjemalca, ki podpirata FTP, SFTP, FTPS, SSH. Za prenos uporabimo protokol SFTP. SFTP je zanesljiv in učinkovit prenos datotek v velikem obsegu. Je alternativa FTP-ju, ki omogoča tudi prenos datotek, vendar postopku doda raven varnosti. SFTP za zaščito podatkov med prenosom uporablja šifriranje SSH.
V opisanem projektu sem se za prenos in nadzor projekta odločil za uporabo sistema Git, saj sem opisano aplikacijo razvijal s pomočjo uporabe GitLaba, ki mi omogoča boljši vpogled v aplikacijo in njene verzije. Git je hiter, razširljiv, porazdeljen sistem nadzora revizij. Je brezplačen in odprtokodni sistem za distribucijo različic, zasnovan za hitro in učinkovito obdelavo vsega, od majhnih do zelo velikih projektov. Na strežnik sem torej namestil Git, ki za prenos datotek uporablja protokol HTTP ali SSH. [12]
1. dnf install git -y
41 Da bi na strežniku naredil kopijo aplikacije z uporabo HTTP-protokola, moram v ukazno vrstico vnesti le naslov repozitorija in avtentikacijske podatke.
2. git clone https://gitlab.com/DomenO/mojaaplikacija.git
4.8 Podatkovna baza MariaDB
Da bo aplikacija delovala pravilno, moramo poskrbeti, da se bo na strežniku nahajala tudi podatkovna baza. Podatkovno bazo bi lahko imel tudi na drugem strežniku, na katerega bi se aplikacija povezala, vendar sem se v tem primeru odločil za novo bazo, saj bom zaradi večje varnosti delal preslikave nekaterih obstoječih tabel na drugih lokacijah. Čeprav sem na lokalni strežbi uporabljal podatkovno bazo MySQL, sem se pri nameščanju podatkovne baze na strežnik odločil za MariaDB, saj vse tabele, ki jih preslikujem, že delujejo na MariaDB in se s tem želim izogniti morebitnim konfliktom.
1. dnf install mariadb-server 2. systemctl enable mariadb.service
Da naredimo podatkovno bazo varno in da uporabniku dodelimo dostopne podatke, v ukazni vrstici poženemo spodnji ukaz, ki nas bo vodil po nastavitvenih korakih.
3. mysql_secure_installation
MariaDB je ena izmed najbolj priljubljenih odprtokodnih relacijskih zbirk podatkov. Izdelali so jo prvotni razvijalci MySQL in zagotovili, da bo ostala odprtokodna. Je del večine ponudb storitev v oblaku in privzeta podatkovna baza pri večini distribucij Linuxa.
Temelji na vrednotah učinkovitosti, stabilnosti in odprtosti, MariaDB Foundation pa zagotavlja, da bodo prispevki sprejeti na tehnični ravni. Najnovejša nova funkcionalnost vključuje napredno združevanje z Galera Cluster 4, združljivostne funkcije z Oracle Database in začasnimi podatkovnimi tabelami, ki omogočajo poizvedovanje po podatkih, kakršni so bili na kateri koli točki v preteklosti. [13]
42
4.9 Podatkovni urejevalnik PhpMyAdmin
Z namenom, da bi lažje dostopal in urejal podatkovno bazo na strežniku, sem se odločil, da namestim tudi grafični vmesnik podatkovnih baz. Na voljo sem imel različna programska orodja, kot so HeidiSQL, TablePlus, PhpMyAdmin, MySQL Workbench, DBeaver, Sequel Pro itd.
Odločil sem se za PhpMyAdmin, saj vsebuje pregleden grafični vmesnik, do katerega lahko enostavno dostopamo kar preko spletnega brskalnika.
PhpMyAdmin je brezplačno programsko orodje, napisano v jeziku PHP, namenjeno upravljanju MySQL prek spleta. Podpira širok spekter operacij na MySQL in MariaDB.
Za lažjo uporabo širokemu krogu ljudi je programski paket poglobljeno dokumentiran in preveden v 72 jezikov. PhpMyAdmin je zrel projekt s stabilno in prilagodljivo osnovo kode.
Projekt je del organizacije Software Freedom Conservancy. SFC je neprofitna organizacija, ki pomaga promovirati, izboljšati, razviti in braniti projekte Free, Libre in Open Source Software (FLOSS). [14]
Namestitev programskega orodja zahteva nekoliko več korakov. Najprej s pomočjo programskega paketa Wget prenesemo PhpMyAdmin arhiv. Arhiv arhiviramo in vsebino prenesemo na končno lokacijo.
1. wget https://files.phpmyadmin.net/phpMyAdmin/4.9.4/phpMyAdmin-4.9.4-all-languages.zip 2. unzip phpMyAdmin-4.9.4-all-languages.zip
3. mv phpMyAdmin-4.9.4-all-languages.zip /usr/share/phpmyadmin
Da bi do grafičnega vmesnika dostopali preko brskalnika, moramo v datoteki
/etc/httpd/conf.d/phpmyadmin.conf spremeniti še nastavitve, ki spletnemu strežniku Apache omogočajo dostop do PhpMyAdmin.
1. Alias /phpmyadmin /usr/share/phpmyad-min
2. <Directory /usr/share/phpmyadmin/>
3. AddDefaultCharset UTF-8 4. <IfModule mod_authz_core.c>
5. # Apache 2.4 6. <RequireAny>
7. Require all granted 8. </RequireAny>
9. </IfModule>
10. <IfModule !mod_authz_core.c>
11. # Apache 2.2
18. <Directory /usr/share/phpmyad-min/setup/>
19. <IfModule mod_authz_core.c>
20. # Apache 2.4 21. <RequireAny>
22. Require all granted 23. </RequireAny>
24. </IfModule>
25. <IfModule !mod_authz_core.c>
26. # Apache 2.2
43 Na tej točki lahko do grafičnega vmesnika PhpMyAdmin dostopamo kar preko povezave http://mojastran.si/phpmyadmin , v katero vnesemo vpisne podatke podatkovne baze.
Slika 18: Vmesnik PhpMyAdmin
44
4.10 Izgradnja aplikacije in strežba
Na tej točki strežnik vsebuje vse potrebne programske pakete in ogrodja za strežbo spletne aplikacije. Da bi lahko stregli novorazvito aplikacijo, pa je potrebno še nekaj korakov. Najprej je potreben prenos in namestitev dodatnih NodeJS-paketov in odvisnosti. Na strežniku se premaknemo v mapo, kjer se nahaja aplikacija in v njej najdemo datoteko package.json.
Datoteka vsebuje vse potrebne programske pakete in odvisnosti. Z naslednjim ukazom v ukazni vrstici dosežemo, da se vsi potrebni paketi namestijo znotraj želene mape. Hkrati pa NPM-paketni upravitelj preveri, če so na voljo posodobitve dotičnih programskih paketov.
1. npm install
Podoben postopek moramo narediti tudi za Laravelove odvisnosti in pakete. Seznam potrebnih paketov najdemo v isti mapi kot package.json v datoteki composer.json. Za namestitev in posodobitev paketov uporabimo paketni urejevalnik Composer.
1. composer install
Sedaj program vsebuje vse potrebne pakete in odvisnosti. Potrebna je samo še izgradnja. Pri izgradnji imamo dve možnosti. Aplikacijo lahko zgradimo na način za razvijalce, kar naredimo s sledečim ukazom:
1. npm run dev
V tem primeru NPM ustvari izvorni zemljevid in ne zmanjša oziroma oklesti odvečne JavaScript in CSS-kode, kar olajša odkrivanje in odpravljanje napak. V tem primeru je velikost aplikacije app.js 4,8 Mib.
Ko pa želimo aplikacijo zgraditi za končno uporabo in ne želimo, da se nam v brskalniku prikazujejo opozorila napak, lahko to storimo s sledečim ukazom:
1. npm run prod
V tem primeru bo izgrajena aplikacija veliko manjša, saj ne bo vsebovala odvečne oziroma neuporabljene kode, odvečnega CSS-a, kode, ki bi nam olajšala razhroščevanje itd. V tem primeru pa je aplikacija velika le 1.37 MiB.
45 Slika 19: Velikost izgrajene aplikacije
Ker je aplikacija minimizirana, sta čas prenosa spletne strani s strežnika odjemalcu ter obremenitev strežnika občutno manjša. Sedaj lahko preverimo delovanje strani, preverimo in odpravimo nepravilnosti in morebitne napake.
46
5 Sklep
Skozi razvoj aplikacije sem se seznanil z najrazličnejšimi tehnologijami. Za dosego želenega cilja bi lahko uporabil veliko različnih tehnik in pristopov.
Med razvojem aplikacije sem se nenehno srečeval z najrazličnejšimi ovirami in napakami, katere sem z različnimi orodji za razhroščevanje z malo ali v časih veliko napora odpravil. Vue.js ima svoj uradni razhroščevalnik, ki ga namestimo znotraj brskalnika Google Chrome in mi je bistveno olajšal razvoj in razhroščevanje aplikacije. Razhroščevalnik Google Chrome DevTools je tudi odlična alternativa širokemu naboru razhroščevalnikov, saj v enotnem uporabniškem vmesniku vsebuje konzolni zavihek, kjer lahko vidimo avtomatske napake in testiramo spremenljivke. Vsebuje tudi omrežni zavihek, kjer lahko vidimo omrežne aktivnosti, vse API-klice in njihove odzive z dodatnimi informacijami. Prav mi je prišel tudi zavihek »aplikacija«, v katerem je vpogled v lokalno shrambo, shrambo sej, predpomnilnika ter seznam piškotkov ter žetonov. Orodje mi omogoča tudi, da stran pogledam kot da bi gledal na telefonu, kar mi bo v prihodnje, ko bom aplikacijo prilagajal za mobilne naprave, prišlo še zelo prav.
Razvoj spletne aplikacije še ni zaključen in se nadaljuje, saj bo aplikacija vsebovala še veliko drugih funkcij. Izboljšati je treba še sam izgled aplikacije. V kratkem bo izdelana skica izgleda oziroma smernice, po katerih bom stran prilagodil tako, da bo za uporabnika bolj privlačna.
Izvesti bo treba tudi teste zmogljivosti in ob morebitni podhranjenosti strežnika, le-temu dodati potrebno procesorsko moč ali pomnilnik.
Aplikacija zaenkrat še ne uporablja nobenega SSL-certifikata, kar onemogoča popolno pristnost, podatkovno enkripcijo in integriteto prometa. Zaradi tega lahko do spletne strani v trenutni fazi dostopamo le preko HTTP-vrat in ne preko HTTPS-vrat. Tako obratovanje je sprejemljivo le v času razvoja in testiranja. Preden bo aplikacija dostopna preko svetovnega spleta, bo treba na strežnik naložiti programski paket, kot je na primer Let's Encrypt, ki je brezplačen, avtomatiziran in odprt organ za potrdila oziroma certifikate.
47
Literatura, viri
[1] „MVVM architectural pattern | Learning Vue.js 2“, Packt.
https://subscription.packtpub.com/book/web_development/9781786469946/2/ch02l vl1sec18/mvvm-architectural-pattern (pridobljeno jul. 28, 2021).
[2] „Installation | Vue I18n“.
https://kazupon.github.io/vue-i18n/installation.html#compatibility-note (pridobljeno jul. 28, 2021).
[3] „Configuration“, Vue Material. https://vuematerial.io/configuration (pridobljeno jul.
28, 2021).
[4] Aliciachao, „Bootstrap 4: Grid system“, dev blog, feb. 10, 2020.
https://medium.com/why-i-chose-to-switch-career-paths-and-pursue/bootstrap-4-grid-system-10565a957020 (pridobljeno jul. 28, 2021).
[5] „Vue Router“. https://router.vuejs.org/ (pridobljeno jul. 28, 2021).
[6] „Backend Definition“. https://techterms.com/definition/backend (pridobljeno jul. 28, 2021).
[7] „PHP: Hypertext Preprocessor“. https://www.php.net/ (pridobljeno jul. 28, 2021).
[8] „PHP Laravel Vadnica za začetnike: kaj je Laravel Framework - Drugo“.
https://sl.myservername.com/php-laravel-tutorial (pridobljeno jul. 28, 2021).
[9] „Laravel Sanctum - Laravel - The PHP Framework For Web Artisans“.
https://laravel.com/docs/8.x/sanctum (pridobljeno jul. 28, 2021).
[10] „EPEL - Fedora Project Wiki“. https://fedoraproject.org/wiki/EPEL (pridobljeno jul. 28, 2021).
[11] Sanchit, „What is a Web Server? Different Types of Web Servers.“, Medium, okt. 18, 2019. https://medium.com/@sanchit0496/what-is-a-web-server-different-types-of-web-servers-c0bd1a1b4b43 (pridobljeno jul. 28, 2021).
[12] „Git - The Protocols“. https://git-scm.com/book/en/v2/Git-on-the-Server-The-Protocols (pridobljeno jul. 28, 2021).
[13] „MariaDB Foundation - MariaDB.org“. https://mariadb.org/ (pridobljeno jul. 28, 2021).
[14] phpMyAdmin contributors, „phpMyAdmin“, phpMyAdmin.
https://www.phpmyadmin.net/ (pridobljeno jul. 28, 2021).