Last updated on 15 Nov 2019

Membuat Virtual Host dengan XAMPP di WIndows

 

Mengapa perlu setup virtual host?

Menyiapkan host virtual memungkinkan Anda menggunakan nama alias untuk hosting lokal di laptop Anda. Kita dapat mengatur beberapa vhost sesuai kebutuhan sehingga setiap situs web lokal dapat diakses melalui nama domain khusus di laptop kita saja ya.

Contoh situs Anda berada di http://localhost/situs_anda, dan ingin mengambil asset di suatu folder. Terkadang akan timbul masalah jika kita upload ke server production (HOSTING BERBAYAR / GRATIS), misal asset css tidak ditemukan, asset gambar tidak ditemukan dll.

Oleh karena itu lebih baik kita membuat lingkungan development kita sama persis dengan production, dengan menggunakan virtual host.

NOTE: Kita akan menggunakan contoh hosts domain afsyah.test

Step 1

Buka file httpd.conf yang ada di C:\xampp\apache\conf\ httpd.conf
Hapus tanda # (hash) yang ada untuk menyertakan file “httpd-vhosts.conf” dalam file httpd.conf.

• Tanda # (hash) adalah tanda komentar 

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


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

Step 2

Buka file C:\xampp\apache\conf\extras\httpd-vhosts.conf. Dan salin baris kode di bawah ini.

<VirtualHost YOUR_SERVER_NAME:80>
ServerAdmin webmaster@localhost.com
DocumentRoot <PATH_TO_PROJECT_DIRECTORY_HERE>
ServerName YOUR_SERVER_NAME
</VirtualHost>


Ganti PATH_TO_PROJECT_DIRECTORY_HERE & SERVER_NAME dengan nilai yang sesuai, Simpan file.

Contoh :

<VirtualHost afsyah.test:80>
ServerAdmin webmaster@localhost.com
DocumentRoot "C:\xampp\htdocs\afsyah"
ServerName afsyah.test
</VirtualHost>

Step 3

Buka text editor dengan klik kanan run as administrator

Buka file C:\Windows\System32\drivers\etc\hosts

Tambahkan baris di bawah ini di akhir file.

127.0.0.1      YOUR_ERVER_NAME

Contoh  :

127.0.0.1      afsyah.test

Restart server apache Anda.

Lalu buka browser anda dan hit afsyah.test untuk melihat hasilnya.