Membuat Virtual Host di Windows dengan XAMPP

Virtual Host adalah suatu teknik yang memungkinkan sebuah IP address mempunyai banyak nama domain atau host. Umumnya VirtualHost menggunakan IP Public dengan tujuan agar sebuah IP Public bisa digunakan oleh banyak domain, sehingga lebih hemat dalam penggunaannya. Pada tutorial ini kita akan membuat Virtual Host menggunakan IP Lokal atau Localhost yaitu 127.0.0.1.
Virtual Host dengan IP Lokal (localhost) biasanya digunakan untuk tujuan testing ketika mendevelop sebuah project aplikasi berbasis web. Karena sifatnya untuk testing, tentunya penamaan nama domain tidak boleh menggunakan nama domain yang sebenarnya seperti detik.com
, google.com
, uinjkt.ac.id
dan seterusnya. Selain itu akhir-akhir ini penamaan domain dengan akhir .dev
juga tidak boleh, misalnya testing.dev
.
Sekarang mari kita buat virtual host dengan nama blog.testing
. Bagaimana caranya? Ada 2 file yang harus diedit atau konfigurasi yaitu file hosts
yang terletak pada C:/Windows/System32/drivers/etc/hosts
dan file httpd-vhosts.conf
yang terletak pada C:/xampp/apache/conf/extra/httpd-vhosts.conf
.
Edit File Hosts
Buka file C:/Windows/System32/drivers/etc/hosts
dengan Notepade++ dan sisipkan script berikut di bawah 127.0.0.1 localhost
127.0.0.1 blog.testing
Setelah itu silakan File->Save. File hosts harus diedit sebagai administrator, oleh karena itu klik Yes ketika diminta mode sebagai Administrator dan akhiri sekali lagi dengan mengklik File->Save atau Ctr+s untuk menyimpan perubahan tadi.
Baris ke-19 dan ke-20 menunjukan bahwa IP 127.0.0.1 mempunyai dua host/domain yaitu domain localhost
dan domain blog.testing
. Keduanya menggunakan IP yang sama yaitu 127.0.0.1
.
Edit File httpd-vhosts.conf
Silakan buka file httpd-vhosts.conf
yang terletak pada C:/xampp/apache/conf/extra/httpd-vhosts.conf
. kemudian edit dan tambahkan kode berikut:
<VirtualHost *:80> ServerAdmin webmaster@localhost DocumentRoot "E:/MyProject/blog/public" ServerName blog.testing ServerAlias blog.testing ErrorLog "logs/blog.testing-error.log" CustomLog "logs/blog.testing-access.log" common <Directory "E:/MyProject/blog/public"> Options Indexes FollowSymLinks Includes ExecCGI AllowOverride All Require all granted </Directory> </VirtualHost>
Sesuaikan DocumentRoot dengan letak aplikasi pada PC. Pada contoh di atas DocumentRoot terletak pada Drive E
dengan folder /MyProject/blog/public
.
Sekarang saatnya mengakses virtualhost tersebut. Silakan buka dengan url http://blog.testing
Jika url localhost diakses yang muncul ternyata persis seperti blog.testing, maka buatlah VirtualHost localhost dengan urutan paling atas, sehingga script lengkapnya sebagai berikut:
<VirtualHost *:80> ServerAdmin webmaster@localhost DocumentRoot "C:/xampp/htdocs" ServerName localhost ServerAlias localhost ErrorLog "logs/localhost-error.log" CustomLog "logs/localhost-access.log" common <Directory "C:/xampp/htdocs"> Options Indexes FollowSymLinks Includes ExecCGI AllowOverride All Require all granted </Directory> </VirtualHost> <VirtualHost *:80> ServerAdmin webmaster@localhost DocumentRoot "E:/MyProject/blog/public" ServerName blog.testing ServerAlias blog.testing ErrorLog "logs/blog.testing-error.log" CustomLog "logs/blog.testing-access.log" common <Directory "E:/MyProject/blog/public"> Options Indexes FollowSymLinks Includes ExecCGI AllowOverride All Require all granted </Directory> </VirtualHost>