Label

Membuat Virtual Host dengan XAMPP pada Windows 7 untuk Web Development


XAMPP adalah salah satu paket webserver + database server yang umumnya memudahkan pengembangan web secara lokal. Dengan XAMPP, biasanya programmer akan mengakses http://localhost/folder_proyek di browsernya. Lokasi folder web tersebut secara default ada di dalam folder xampp/htdocs. Apabila ingin menambah proyek, dimasukkan ke folder lain, folder lain, dan folder lainnya lagi. Bayangkan apabila sudah ada banyak sekali proyek, tentu akan lebih rumit mengatur file-nya.
Belum lagi, apabila folder yang akan diakses public nantinya terletak dalam subfolder proyek tersebut. Sebagai contoh, seperti dalam penggunaan framework FuelPHP dan Laravel yang file program utamanya sebaiknya tidak diletakkan dalam folder publik. Bisa jadi si programmer perlu mengaksesnya secara lokal dengan URL yang cukup panjang seperti http://localhost/proyek_sistem_informasi/modul_satu/public. Sungguh melelahkan, bukan?

Bagaimana bila URL project diubah menjadi domain tertentu, selayaknya sebuah server live? Misalkan, untuk project bernama “mimi”, bisa diakses melalui http://mimi.dev, kemudian untuk project “tomatech” bisa diakses melalui http://tomatech.dev. Tentunya cara ini akan lebih baik dan memudahkan proses pengembangan web Anda, karena selain URL jadi lebih mudah dibaca dan berada di root domain (bukan folder), folder proyek juga bisa dipisahkan (tidak harus ada dalam satu parent folder).
Cara ini dapat dilakukan secara mudah pada XAMPP. Berikut ini saya jelaskan secara singkat tutorial membuat Virtual Host dengan XAMPP pada Windows 7. XAMPP yang saya gunakan ada versi 1.7.4 dengan Windows 7 Professional 64-bit. Beberapa penjelasan tentang jaringan mungkin kurang tepat, karena saya bukan ahlinya. Namun saya coba jelaskan secara logika saja.
Target
Membuat Virtual Host untuk 3 proyek, namun tetap memungkinkan akses ke localhost biasa:
  • http://localhost/ (akses seperti biasa)
  • http://bisakomputer.wp/
  • http://mimi.dev/
  • http://tomatech.dev/

Langkah-Langkah Pembuatan Virtual Host

  1. Di Windows, sebelum komputer mencari alamat IP dari sebuah domain ke DNS Server, pencarian akan melalui sebuah file yang bernama hosts. Dalam proses pemetaan domain, apabila dalam file tersebut ditemukan pertama kali pemetaan yang pas sesuai domain yang dicari, maka informasi dari file tersebutlah yang digunakan. File ini terletak di dalam direktori c:\Windows\System32\drivers\etc\ (bisa berbeda tergantung versi Windows Anda). Buka file tersebut dengan Notepad (tidak disarankan) atau text editor lain. Pastikan bahwa Anda membuka file tersebut sebagai Administrator.
  2. Dalam file hosts, Anda akan menemukan baris seperti berikut.
    ?
    1
    127.0.0.1 localhost
    Sekarang coba dulu untuk menambahkan domain bisakomputer.wp ke dalam file hosts. Di bawah baris localhost, tambahkan entry sehingga seperti kode di bawah ini.
    ?
    1
    2
    3
    # baris localhost dibiarkan agar tetap bisa diakses
    127.0.0.1 localhost
    127.0.0.1 bisakomputer.wp
    Kode di atas memberitahu bahwa apabila ada pengaksesan alamat domain bisakomputer.wp, maka akan diarahkan ke IP 127.0.0.1, yang mana IP tersebut adalah IP lokal komputer pengguna.
  3. Langkah berikutnya adalah membuat konfigurasi Virtual Host pada XAMPP. Bukalah folder c:\xampp\apache\conf\extra\ (drive tergantung lokasi folder xampp Anda), setelah itu cari file httpd-vhosts.conf dan buka dengan text editor. Di bagian bawah, tambahkan baris seperti berikut.
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    # baris ini penting untuk memerintahkan XAMPP menggunakan Name untuk virtual host
    NameVirtualHost *:80
    <VirtualHost *:80>
        ServerAdmin admin@localhost.com
        DocumentRoot "C:/xampp/htdocs"
        ServerName localhost
        ServerAlias localhost
        <Directory "C:/xampp/htdocs">
            Options Indexes FollowSymLinks Includes ExecCGI
            AllowOverride All
            Order allow,deny
            Allow from all
        </Directory>
    </VirtualHost>
    <VirtualHost *:80>
        ServerAdmin admin@bisakomputer.wp
        DocumentRoot "d:\web-dir\bisakomputer.wp"
        ServerName bisakomputer.wp
        ServerAlias bisakomputer.wp
        ErrorLog logs/bisakomputer.wp.log
        CustomLog logs/bisakomputer.wp.log combined
        <Directory "d:\web-dir\bisakomputer.wp">
            Options Indexes FollowSymLinks Includes ExecCGI
            AllowOverride All
            Order allow,deny
            Allow from all
        </Directory>
    </VirtualHost>
    Setelah itu, restart XAMPP Anda melalui control panel ataupun command line.
  4. Anda bisa menambahkan sebuah file index.html sederhana di dalam DocumentRoot yang baru untuk pengujian. Apabila Apache telah berjalan kembali, cobalah akses http://bisakomputer.wp di browser kesayangan Anda untuk memastikan bahwa konfigurasi telah berhasil.

Menambahkan Virtual Host Lain

Untuk menambahkan virtual host mimi.dev dan tomatech.dev pun tentu tidaklah susah. Ulangi langkah satu dengan menambahkan entry di file hosts, kemudian tambahkan sebuah VirtualHost di file httpd-vhosts.conf.
Perlu diketahui bahwa file hosts milik Windows tidak memungkinkan menggunakan wildcard asterik “*”, sehingga untuk membuat banyak local domain mengarah ke komputer lokal, harus dideklarasikan satu-persatu. Hasil akhir dari artikel ini akan sebagai berikut:

File hosts

?
1
2
3
4
127.0.0.1 localhost
127.0.0.1 bisakomputer.wp
127.0.0.1 mimi.dev
127.0.0.1 tomatech.dev

File httpd-vhosts.conf

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
# baris ini penting untuk memerintahkan XAMPP menggunakan Name untuk virtual host
NameVirtualHost *:80
<VirtualHost *:80>
    ServerAdmin admin@localhost.com
    DocumentRoot "C:/xampp/htdocs"
    ServerName localhost
    ServerAlias localhost
    <Directory "C:/xampp/htdocs">
        Options Indexes FollowSymLinks Includes ExecCGI
        AllowOverride All
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>
<VirtualHost *:80>
    ServerAdmin admin@bisakomputer.wp
    DocumentRoot "d:\web-dir\bisakomputer.wp"
    ServerName bisakomputer.wp
    ServerAlias bisakomputer.wp
    ErrorLog logs/bisakomputer.wp.log
    CustomLog logs/bisakomputer.wp.log combined
    <Directory "d:\web-dir\bisakomputer.wp">
        Options Indexes FollowSymLinks Includes ExecCGI
        AllowOverride All
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>
<VirtualHost *:80>
    ServerAdmin admin@mimi.dev
    DocumentRoot "d:\web-dir\mimi.dev"
    ServerName mimi.dev
    ServerAlias mimi.dev
    ErrorLog logs/mimi.dev.log
    CustomLog logs/mimi.dev.log combined
    <Directory "d:\web-dir\mimi.dev">
        Options Indexes FollowSymLinks Includes ExecCGI
        AllowOverride All
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>
<VirtualHost *:80>
    ServerAdmin admin@tomatech.dev
    DocumentRoot "d:\web-dir\tomatech.dev"
    ServerName tomatech.dev
    ServerAlias tomatech.dev
    ErrorLog logs/tomatech.dev.log
    CustomLog logs/tomatech.dev.log combined
    <Directory "d:\web-dir\tomatech.dev">
        Options Indexes FollowSymLinks Includes ExecCGI
        AllowOverride All
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>

Penutup

Selain memudahkan dalam pengembangan, cara ini akan lebih mengamankan data aplikasi web Anda, alih-alih memasukkan ke folder XAMPP yang secara default ada di C. Hal terburuk bisa jadi Anda harus install ulang namun lupa membackup data Anda di drive C tersebut. Dengan menggunakan VirtualHost ini, Anda bisa mengatur lokasi DocumentRoot sesuka Anda, sehingga data bisa Anda letakkan di tempat yang lebih aman. Untuk default htdocs, cara lain Anda bisa menggunakan symbolic link seperti pada artikel saya di blog pribadi. Selamat mencoba!

Update:

Untuk XAMPP versi 1.8.1, Anda perlu menambahkan baris “Require all granted” menjadi seperti berikut:
?
1
2
3
4
5
6
7
<Directory "d:\web-dir\mimi.dev">
    Options Indexes FollowSymLinks Includes ExecCGI
    AllowOverride All
    Order allow,deny
    Allow from all
    Require all granted
</Directory>
Label:

Komentar

Posting Komentar

Postingan Populer