Cara Membuat Virtual Host di XAMPP (Windows)

Jika Anda seorang developer web yang sering bekerja dengan proyek seperti WordPress, Laravel, atau framework PHP lainnya, pasti pernah merasa kurang nyaman menggunakan alamat seperti http://localhost/nama-proyek. Selain terlihat tidak profesional, struktur URL seperti ini juga bisa menyebabkan masalah saat menguji fitur yang sensitif terhadap domain (misalnya: cookie, CORS, atau callback OAuth).

Solusinya? Gunakan Virtual Host!

Dengan Virtual Host di XAMPP, Anda bisa mengakses proyek lokal menggunakan alamat khusus seperti http://wp1.test atau http://laravel-app.test — mirip seperti domain sungguhan, tapi tetap di komputer Anda.

Artikel ini akan memandu Anda langkah demi langkah cara membuat Virtual Host di XAMPP (Windows), mulai dari konfigurasi Apache hingga pengujian akhir.

Lihat Juga :

Dasar-Dasar WordPress: Domain dan Hosting

🔍 Apa Itu Virtual Host?

Virtual Host adalah fitur server web (seperti Apache) yang memungkinkan satu mesin menjalankan beberapa situs web dengan nama domain berbeda — meski semuanya berjalan di alamat IP yang sama (127.0.0.1).

Di lingkungan development lokal, Virtual Host membantu Anda:

• Menghindari struktur URL bersarang (localhost/proyek)
• Menggunakan URL bersih seperti namaproyek.test
• Menguji fitur yang bergantung pada domain (misal: session, redirect, SSL)
• Menjaga konfigurasi proyek tetap konsisten antara local dan production

🛠️ Prasyarat

• XAMPP sudah terinstal (versi terbaru direkomendasikan)
• Proyek web Anda sudah berada di folder htdocs (misal: F:\xampp\htdocs\wp1)
• Akses administrator di Windows (untuk mengedit file hosts)

💡 Catatan: Tutorial ini menggunakan drive F:\. Sesuaikan dengan lokasi instalasi XAMPP Anda (bisa C:\, D:\, dll).

✅ Langkah 1: Edit File Konfigurasi Virtual Host Apache

File konfigurasi Virtual Host berada di:

F:\xampp\apache\conf\extra\httpd-vhosts.conf

Buka file tersebut dengan text editor (Notepad++, VS Code, atau Notepad biasa).

Tambahkan Konfigurasi Berikut:

# Virtual Host Default (agar localhost tetap berfungsi)
<VirtualHost *:80>
    DocumentRoot "F:/xampp/htdocs"
    ServerName localhost
</VirtualHost>

# Virtual Host untuk Proyek Anda (ganti "wp1" sesuai kebutuhan)
<VirtualHost *:80>
    DocumentRoot "F:/xampp/htdocs/wp1"
    ServerName wp1.test
    <Directory "F:/xampp/htdocs/wp1">
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

📌 Penjelasan:

• DocumentRoot: Lokasi folder proyek Anda.
• ServerName: Nama domain lokal (kami gunakan .test karena aman untuk development).
• AllowOverride All: Memungkinkan file .htaccess berfungsi (penting untuk WordPress/Laravel).
• Require all granted: Memberikan izin akses penuh dari browser lokal.

✅ Langkah 2: Edit File hosts di Windows

Agar sistem operasi tahu bahwa wp1.test mengarah ke komputer Anda, tambahkan entri ke file hosts.

Cara Mengedit:

1. Buka Notepad sebagai Administrator (klik kanan → Run as administrator).
2. Buka file:

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

3. Tambahkan baris berikut di bagian paling bawah:

   127.0.0.1 wp1.test
4. Simpan file.

⚠️ Jika Notepad menolak menyimpan, pastikan Anda membukanya sebagai admin.

✅ Langkah 3: Aktifkan Virtual Host di Apache

Pastikan Apache benar-benar membaca file konfigurasi Virtual Host.

Lihat Juga :

cPanel atau Plesk: Mana yang Lebih Efektif?

Buka:

F:\xampp\apache\conf\httpd.conf

Cari baris berikut dan pastikan tidak dikomentari (hapus tanda # jika ada):

Include conf/extra/httpd-vhosts.conf

Juga pastikan modul virtual host aktif:

Lihat Juga :

Plesk: Manajemen Hosting yang Efisien

LoadModule vhost_alias_module modules/mod_vhost_alias.so

✅ Langkah 4: Restart Apache

1. Buka XAMPP Control Panel.
2. Klik Stop pada Apache, lalu klik Start lagi.
3. Jika Apache gagal start, cek file log di:
   F:\xampp\apache\logs\error.log

✅ Langkah 5: Uji Virtual Host

Buka browser favorit Anda dan kunjungi:

http://wp1.test

Jika berhasil, Anda akan melihat halaman proyek Anda tanpa perlu mengetik localhost/wp1!

🎉 Tips: Gunakan ekstensi domain seperti .test, .local, atau .dev.local. Hindari .dev karena dimiliki Google dan dipaksa HTTPS oleh Chrome.

🔐 (Opsional) Tambahkan HTTPS untuk Virtual Host

XAMPP sudah menyediakan sertifikat SSL self-signed. Untuk mengaktifkan HTTPS:

1. Pastikan SSL aktif di httpd.conf:
   LoadModule ssl_module modules/mod_ssl.so
   Include conf/extra/httpd-ssl.conf
2. Tambahkan blok berikut di httpd-vhosts.conf:

   <VirtualHost *:443>
       DocumentRoot "F:/xampp/htdocs/wp1"
       ServerName wp1.test
       SSLEngine on
       SSLCertificateFile "F:/xampp/apache/conf/ssl.crt/server.crt"
       SSLCertificateKeyFile "F:/xampp/apache/conf/ssl.key/server.key"
       <Directory "F:/xampp/htdocs/wp1">
           AllowOverride All
           Require all granted
       </Directory>
   </VirtualHost>
3. Akses via: https://wp1.test (abaikan peringatan keamanan di browser).

❓ FAQ

Q: Bisa buat banyak Virtual Host?
A: Tentu! Cukup tambahkan blok <VirtualHost> baru dan entri di file hosts.

Q: Apakah ini aman untuk production?
A: Tidak. Virtual Host di XAMPP hanya untuk development lokal. Untuk server live, gunakan konfigurasi web server yang sesuai (Apache/Nginx di Linux).

Lihat Juga :

CPanel : Manajemen Hosting Jadi Lebih Mudah

Q: Proyek WordPress tidak muncul setelah ganti ke wp1.test?
A: Anda perlu update Site URL dan Home URL di database WordPress (tabel wp_options), atau gunakan konstanta di wp-config.php:

define('WP_HOME', 'http://wp1.test');
define('WP_SITEURL', 'http://wp1.test');

🔚 Kesimpulan

Membuat Virtual Host di XAMPP adalah langkah sederhana namun sangat berdampak bagi kenyamanan dan profesionalisme Anda sebagai developer. Dengan URL bersih seperti http://namaproyek.test, Anda bisa menguji aplikasi lebih akurat, menghindari masalah path, dan menyiapkan proyek yang siap migrasi ke server production.

Jangan ragu untuk membuat Virtual Host untuk setiap proyek baru — ini adalah praktik terbaik dalam development web modern!

Lihat Juga :

Perbedaan antara BuddyPress dan bbPress