Inštalácia WAMP servera a nastavenie novej virtuálnej domény

Dominik Šelmeci 07.07.2016

Mnohokrát keď pracujem v tíme, tak väčšinou sa vyžaduje nainštalovanie si servera a nastavenie virtuálnej domény pre daný projekt. Napríklad lc.mojprojekt.sk oproti localhost/mojprojekt/. Má to viaceré výhody:

  • všetci členovia tímu používajú rovnakú adresu
  • túto adresu môžeme použiť ako podmienku pre debuggovacie nástroje, ladenie, spúšťanie testov, prípadne pre použitie testovacej databázy namiesto ostrej
  • pri volaní css štýlov alebo javascriptových súborov môžeme používať relatívne adresy typu */assets/css/style.css* a vypustiť tak nutnosť používať absolútne adresy

Tento návod bol osobne vyskúšaný na čistej inštalácií Windows 10 Home 64-bit s aktualizáciami ku dňu 5.7.2016.

 

Nainštalovanie WAMP servera

Na hlavnej stránke wampservera stiahnite a nainštalujte verziu vhodnú pre svoj počítač. V mojom prípade to bola verzia vyznačená na obrázku:

Počas inštalácie sa vás spýta, aký predvolený prehliadač chcete použiť a aký editor pre wampserver. Je to čisto na vašej voľbe, ale samozrejme wampserver vás nebude nútiť používať jeden editor, alebo jeden prehliadač :). 

Pri novších windowsoch býva potrebné doinštalovať Visual C++ Redistributable Packages 2015. Ak sa vám chyba objavila, tak najskôr odinštalujte WAMP a nainštalujte tieto balíky. Nainštalujte 32 i 64-bitovú verziu. 

Okrem toho je dobré nainštalovať ešte ďalší Visual C++ Redistributable for Visual Studio 2012 Update 4. Bez toho nespustíte zase samotný wampserver. Opäť nainštalujte 32 a 64-bitovú verziu.

Pri tomto type inštalácie "all in one" by sme mali mať kompletne dostupné balíky ako:

  • Apache 2
  • PHP5 a PHP7
  • MySQL 5.7
  • phpmyadmin

Skúste spustiť wampserver. Ak je všetko v poriadku mali by ste na systémovej lište (vpravo dole) vidieť zelenú ikonku wampserveru, že je spustený.

Zároveň keď v prehliadači zadáte localhost, mali by ste vidieť defaultnú stránku localhostu:

Riešenie chýb

Pokiaľ je ikona wampserveru červená, pravdepodobne nemáte nastavenú defaultnú IP adresu pre localhost. Opravte nasledujúce dva riadky v súbore (ako administrátor) C:\Windows\System32\drivers\etc\hosts z:

#	127.0.0.1 localhost
# ::1 localhost

na

127.0.0.1 localhost
::1 localhost

Vypnite wampserver (pravé tlačidlo myši na ikonku wampserveru -> exit) a opätovne ho zapnite.

Pozor na skype

Ak máte zapnutý skype predtým, ako idete zapnúť wampserver, tak odporúčam skype najskôr vypnúť, zapnúť wampserver a potom až zapnúť skype. Skype používa rovnaký port ako wampserver a pri zapnutom skype sa vám wampserver opäť nespustí (ikonka bude oranžovej farby).

Nastavenie virtuálnej domény

Pre nastavenie virtuálnej domény potrebujeme urobiť tri veci:

  1. vytvoriť priečinok s projektom
  2. pridať doménu do hosts súboru
  3. nasmerovať ju do konkrétneho priečinku s pomocou Apache vhosts (virtual hosts)

Vytvorenie priečinku s projektom

Vytvorte si vo svojom www priečinku wampserver priečinok mojprojekt. Do neho vytvorte jednoduchý súbor index.html s nasledujúcim kódom:

<!DOCTYPE html>
<html>
<head>
<title>Môj projekt</title>
</head>

<body>
<h1>Ahoj môj projekt z virtuálnej domény.</h1>
</body>
</html>

Váš miniprojekt by mal byť dostupný aj z adresy http://localhost/mojprojekt.

Pridanie virtuálnej domény do hosts

Do súboru C:\Windows\System32\drivers\etc\hosts pridajte (ako administrátor) našu virtuálnu doménu v tvare: 

127.0.0.1 lc.mojprojekt.sk

127.0.0.1 - označuje IP adresu nášho serveru (localhostu). Vašu doménu si môžete pomenovať ľubovoľným označením. Vo firme používame označenie mojprojekt.sk ako ostrú verziu webu a lc.mojprojekt.sk ako localhostovú verziu webu.

Teraz keď do prehliadača zadáte lc.mojprojekt.sk mali by ste vidieť úvodnú stránku wampserveru. Ešte nám zostáva posledný krok.

Nasmerovanie virtuálnej domény do priečinka

Nasmerovanie musíme nastaviť v konfiguračnom priečinku Apache2 vo wampservery. Podľa toho, kde máte nainštalovaný váš wamp server, môže vaša cesta ku konfiguračnému súboru vyzerať rovnako, alebo podobne:

C:\wamp64\bin\apache\apache2.4.17\conf\extra\httpd-vhosts.conf

V tomto súbore na konci riadku pridajte tento kód:

<VirtualHost *:80>
    DocumentRoot "c:/wamp64/www/mojprojekt"
    ServerName lc.mojprojekt.sk
</VirtualHost>

Kde DocumentRoot musí obsahovať vašu presnú fyzickú cestu k projektu. Ešte nám zostáva overiť, či httpd-vhosts.conf je pridaný v konfiguračnom súbore Apache2 C:\wamp64\bin\apache\apache2.4.17\conf\httpd.conf.

V tomto súbore nájdite riadky:

# Virtual hosts
#Include conf/extra/httpd-vhosts.conf

a odkomentujte posledný riadok:

# Virtual hosts
Include conf/extra/httpd-vhosts.conf

Zostáva už len reštartovať náš wamp server. Ľavým tlačidlom myši kliknite na ikonu wamp serveru => Restart All Services. Teraz po zadaní lc.mojprojekt.sk, by váš projekt už mal byť nasmerovaný do správneho priečinka a mali by ste vidieť text "Ahoj môj projekt z virtuálnej domény.".

Gratulujem, práve ste nainštalovali svoj vlastný server a vytvorili svoju prvú virtuálnu doménu :).