Sulhi.id

Catatan Kecil Seputar Blogging dan Koding

Membuat Virtual Host di Windows dengan XAMPP

Thursday, November 15th, 2018     Tutorial

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/hostsdengan 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>