[#1 vhosts] มาลองทำ vhosts บน XAMPP ใน Windows กันเถอะ 🐫

ก่อนอื่นเราลองมาทำความรู้จักกับ vhosts(Virtual Host) กันสักเล็กน้อยยก่อน(น้อยจริงๆนะ อิอิ) ปกติเวลาเราจะเข้าไปดูหน้า web โดยใช้ package xampp หรืออื่นๆ จะต้องพิมพ์ว่า localhost/ชื่อ folder/ชื่อไฟล์นั้นๆอย่างเดียว ใช่มั้ยล่ะ ใช่!(ถามเองตอบเองก็ได้ แฮร่ ปล.มีภาพภาพปลากรอบด้านล่าง)

แต่ไม่ต้องกังวลไปนะ vhosts จะมาเป็นฮีโร่ในส่วนนี้เองจ้า โดย vhosts จะทำให้เราสามารถเรียกชื่อเว็บได้ตามที่เราต้องการได้เลยล่ะ อยากทำแล้วล่ะสิ ไปดูขั้นตอนต่อไปกันดีกว่า ไปๆๆๆๆ

1.ขั้นการติดตั้ง Xampp

โดยขั้นแรกเราจะมาทำการติดตั้ง Xampp กันก่อนนะ โดยสามารถเข้าไปดาวน์โหลดได้ตาม link ด้านล่างจ้า (โดยให้เราเลือก Dowload Xampp for Windows 7.3.5)

→ https://www.apachefriends.org/index.html

ต่อมาเมื่อดาวน์โหลดสำเร็จเราจะได้หน้าต่างแบบนี้ขึ้นมา ให้ทำการกด start เพื่อเริ่มการทำงาน Apache เลย และถ้ากด stop ก็จะเป็นการหยุดการทำงาน

2.ขั้นการแก้ไขไฟล์

ในขั้นนี้เราจะต้องทำการแก้ไขไฟล์ 2 ไฟล์ ดังนี้เลย

• httpd-vhosts.conf
• hosts

2.1 การแก้ไขไฟล์ httpd-vhosts.conf

เข้าไปที่ (C:\xampp\apache\conf\extra) เลือกไฟล์ชื่อ httpd-vhosts.conf

เมื่อเข้ามาในไฟล์ให้พิมพ์ตามกรอบสีฟ้าในภาพด้านล่างนี้เลยจ้า แล้วกด Save

มาอ่าน Lecture สั้นๆเพิ่มความเข้าใจกันสักหน่อย หรือสามารถที่จะ ยาวไป..ไม่อ่านก็ได้ แต่อ่านเถอะพลีสสส

• <VirtualHost *:80> โดย * หมายถึงสามารถเข้าใช้งานได้ทุกคน และ 80 คือ port ที่ใช้ใน virtual host นี้เท่านั้น โดยสามารถเปลี่ยน port ได้ตามที่ต้องการเลย เช่น 81,8080 ,8181 และอื่นๆ
• ServerAdmin → ชื่อตามต้องการเลย
• DocumentRoot → ตัวนี้เป็น directory ที่เก็บไฟล์ของเว็บ โดยไฟล์จะเก็บใน drive ไหนก็ได้ ตรงหน้า desktop เลยก็ได้(โดยในที่นี้ไฟล์นี้เราลอง test ขึ้นมา เราก็พิมพ์ “Hello world” หรืออะไรก็ได้ที่ใจเธอต้องการ แล้ว save ใน folder ชื่อ kanv และอยู่ในไฟล์ชื่อ index.php ควรใช้ชื่อนี้เพราะโดยปกติมันจะ direct ไปที่หน้าที่เป็น index.php ก่อนเลย ลองดูจ้า)
• ServerName → เป็นชื่อโดเมนเนมที่จะใช้เรียกเว็บของเรา (จะไม่ใช้ localhost แล้วน้า) ทีนี้ตอนเราพิมพ์จะดูเว็บ ก็พิมพ์ว่า joinstick.local ไปเลย ไม่ต้องพิมพ์ localhost/ชื่อโฟลเดอร์ แล้วล่ะ
• Directory → เป็น directory สมชื่อเลย เป็นที่เก็บไฟล์ของเว็บ แต่เราสามารถกำหนดสิทธิ์การเข้าถึง,คุณสมบัติให้ server ได้ผ่านเจ้าตัวนี้ ตามภาพด้านบนเลย เช่น Require all granted , AllowOverride All เป็นต้น

2.2 การแก้ไขไฟล์ hosts

ทำตามขั้นตอนดังนี้เลย

1.Run notepad as Administrator (คลิกขวาที่ Notepad → กด Run as Administrator)

2.กด open ใน notepad

3. จากนั้นเข้าไปที่ Windows → System32 → drivers → etc จากนั้นเลือกเป็น All files ดังภาพ ก็จะเจอไฟล์ hosts ให้คลิกเข้าไปในไฟล์ hosts

4.เมื่อเข้ามาในไฟล์ hosts แล้ว ให้พิมพ์ 127.0.0.1 ตามด้วยชื่อ โดเมนเนมของเรา ในที่นี้เป็น joinstick.local (พิมพ์ตามกรอบสีเหลือง)โดยชื่อนี้ต้องตรงกับชื่อ ServerName ในไฟล์ httpd-vhosts.conf ด้วยจ้า

5.อย่าลืม กด Save ด้วยนะ

3.ขั้นทดสอบ vhosts

ขั้นตอนนี้ไม่มีอะไรมาก เราก็ลองทำการทดสอบ โดยการพิมพ์ ้http:// (ปล. http://ไม่มี s นะจ้ะ)แล้วตามด้วยชื่อ ServerName หรือโดเมนเนมของเรา แล้วไปดูว่า หน้าเว็บขึ้นตามภาพด้านล่างแล้วหรือไม่

แท่นแท๊นนนนนน~~~~~~~ เสร็จแล้ววว

จะเห็นว่าเราสามารถเข้ามาหน้าเว็บโดยใช้ชื่อ โดเมนเนมที่เรากำหนดเองได้แล้ว ไม่ยากเลยใช่มั้ยล่ะะ ใช่!(ตอบเองก็ได้ ฮ่าๆ) แล้วเราก็สามารถลองเพิ่มหน้าเว็บอื่นๆโดยใช้ vhosts เพิ่มได้นะ ลองทำดูเลยจ้า (จะลองทำให้ดูมีภาพปลากรอบด้านล่างอีกเช่นเคย)

ส่วนนี้เพิ่มในไฟล์ httpd-vhosts.conf เหมือนเดิมเลยจ้า คุณผู้ชมคงจะจำได้กระมัง

และส่วนนี้เพิ่มตามกรอบสีเหลืองในไฟล์ hosts จ้า อย่าลืมว่าชื่อต้องเหมือน Servername ในไฟล์ httpd-vhosts.conf

เมื่อไป search ก็ search ตามชื่อโดเมนเนมที่เราตั้งเหมือนเดิมเลย แต่ต้องมี /joy.php ตามหลังเพราะว่าชื่อไฟล์ไม่ได้เป็น index.php ก็เลยต้องพิมพ์แบบนี้ ถ้าใช้ index.php ก็ไม่ต้อง/่ชื่อไฟล์ตามหลัง มันจะ direct มาให้เลย

จริงๆก็จบแล้วล่ะน้า แต่ถ้าเราลองเข้าแบบ localhost ปกติ แล้วดันเกิดมีปัญหาแบบนี้เกิดขึ้นละก็… (ดูภาพปลากรอบด้านล่าง)

เข้าแบบ localhost ไม่ได้ omg!!! แต่อย่าพึ่งตกใจไป ลองทำตามนี้ดูก่อนนะ

ให้เพิ่มตามภาพด้านบนลงในไฟล์ httpd-vhosts.conf

และเพิ่มตามกรอบสีเหลืองภาพด้านบน ลงในไฟล์ hosts

มาลองเข้าเว็บกันอีกสักที

…

..

.

แท่นแท๊นนนนนน~~~~~~~ ได้แล้วว เย้ๆ

ปล.ถ้าไม่ขึ้นลอง restart ตัว apache โดยการกด stop แล้วกด start ใหม่อีกสักทีนะ น่าจะได้แล้วใช่มั้ยล่ะะ ใช่!(ตอบเองอีกแล้ว ถถถถ)