Kelola Web Lebih Mudah dengan Virtual Host

Tutorial - 19 Jul 2014

Untuk mengembangkan web secara lokal, Anda diharuskan untuk menginstal webserver + database yang ingin digunakan di komputer lokal. Bagi Anda yang menggunakan sistem operasi Windows, umumnya akan menggunakan XAMPP ataupun AppServ.

Biasanya untuk mengakses web secara lokal, Anda akan mengetikkan URL http://localhost/folder_web di web browser. Lantas bagaimana jika folder public web terletak pada subfolder, misal http://localhost/proyek_web/public. Tentu tidak efisien bukan ?

Untuk mengatasi hal tersebut, sebenarnya Anda bisa mengubah URL web lokal menjadi nama domain tertentu layaknya web yang sudah di onlinekan (Virtual Host). Misal domain http://project.com atau eplusgo.wp. Tujuannya tentu untuk memudahkan kita dalam mengakses sebuah project web.

Membuat Virtual Host pada XAMPP

Pada tutorial ini, kita akan membuat virtual host pada XAMMP. XAMPP yang digunakan adalah versi 1.8.2 dengan sistem operasi Windows 7 32-bit.

Langkah 1

Buka file hosts yang terletak di dalam direktori C:\Windows\System32\drivers\etc. Pastikan Anda membuka file tersebut sebagai Administrator. Di bagian paling akhir, Anda akan menemukan baris sebagai berikut :

127.0.0.1 localhost

Tambahkan domain yang ingin Anda buat ke dalam file hosts tersebut. Misal domain projectweb.wp, kemudian simpan file hosts tersebut.

127.0.0.1 localhost
127.0.0.1 projectweb.wp

Langkah 2

Buka file httpd-vhosts.conf di dalam direktori C:\xampp\apache\conf\extra (sesuaikan dengan lokasi folder XAMMP Anda). Kemudian tambahkan baris seperti berikut dibagian paling bawah.

NameVirtualHost *:80

<VirtualHost *:80>
    ServerAdmin [email protected]
    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
        Require all granted
    </Directory>
</VirtualHost>
 
<VirtualHost *:80>
    ServerAdmin [email protected]
    DocumentRoot "C:/xampp/htdocs/projectweb"
    ServerName projectweb.wp
    ServerAlias projectweb.wp
    ErrorLog logs/projectweb.wp.log
    CustomLog logs/projectweb.wp.log combined
    <Directory "C:/xampp/htdocs/projectweb">
        Options Indexes FollowSymLinks Includes ExecCGI
        AllowOverride All
        Order allow,deny
        Allow from all
        Require all granted
    </Directory>
</VirtualHost>

Langkah 3

Restart XAMMP Anda, kemudian cobalah akses domain projectweb.wp di browser Anda. Jika konfigurasi benar, maka domain tersebut akan menampilkan web dari direktori C:/xampp/htdocs/projectweb yang sudah Anda tuliskan pada konfigurasi diatas.

Nantinya jika Anda ingin menambahkan virtual host lainnya. Cukup lakukan penambahan sesuai panduan diatas pada file hosts.

127.0.0.1 localhost
127.0.0.1 projectweb.wp
127.0.0.1 webnews.dev

Dan file httpd-vhosts.conf.

NameVirtualHost *:80

<VirtualHost *:80>
    ServerAdmin [email protected]
    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
        Require all granted
    </Directory>
</VirtualHost>
 
<VirtualHost *:80>
    ServerAdmin [email protected]
    DocumentRoot "C:/xampp/htdocs/projectweb"
    ServerName projectweb.wp
    ServerAlias projectweb.wp
    ErrorLog logs/projectweb.wp.log
    CustomLog logs/projectweb.wp.log combined
    <Directory "C:/xampp/htdocs/projectweb">
        Options Indexes FollowSymLinks Includes ExecCGI
        AllowOverride All
        Order allow,deny
        Allow from all
        Require all granted
    </Directory>
</VirtualHost>

<VirtualHost *:80>
    ServerAdmin [email protected]
    DocumentRoot "C:/xampp/htdocs/webnews"
    ServerName webnews.dev
    ServerAlias webnews.dev
    ErrorLog logs/webnews.dev.log
    CustomLog logs/webnews.dev.log combined
    <Directory "C:/xampp/htdocs/webnews">
        Options Indexes FollowSymLinks Includes ExecCGI
        AllowOverride All
        Order allow,deny
        Allow from all
        Require all granted
    </Directory>
</VirtualHost>

Selamat mencoba.