วิธีทำให้เว็บใน localhost มี URL เหมือน Online

คนที่ได้เคยลองทำเว็บในเครื่องตัวเองมานาน จะพบความลำบาก หรือความขัดใจเรื่องนึงนั่นก็คือเรื่องของ url ที่ใช้ในเครื่องกับเวลาที่เอาขึ้นไปรันจริงบนเว็บนั้นจะแตกต่างกันเสมอ และมักจะส่งผลให้การทำงานผิดพลาดได้ เช่นตอนทดสอบในเครื่องเว็บชื่อ http://localhost/a แต่เว็บจริงเป็น http://www.abc.com ดังนั้นในหลายครั้ง เราลืมแก้ไฟล์ก่อน Upload เราก็เลย upload เว็บที่มี url เป็น http://localhost/a ขึ้นไปเฉยเลย หรือบางคนก็แก้ไขด้วยการ ตั้งเป็นตัวแปรใส่ไว้ในไฟล์สักไฟล์นึงแล้วแก้ไขไฟล์นี้แค่ไฟล์เดียวพอ แต่บางครั้งก็ลืมอยู่ดี หรือว่าก็ต้องคอยแก้ไขกลับไปกลับมาตอน upload

บทความนี้จึงจะเสนอวิธีการตั้งค่าเว็บให้การทดสอบเว็บในเครื่อง เหมือนเป็นชื่อเว็บที่ใช้บน host จริงๆเลย เวลาทดสอบจะได้ไม่ต้องคอยแก้ไขไฟล์ไปมา เป็นเรื่องที่น่าจุกจิกกวนใจ (แต่อาศัยแก้ไขไฟล์ host จุดเดียวเท่านั้นทุกค่าพร้อมใช้ไม่ต้องยุ่งกับโค้ดใดๆ)
เพื่อให้เป็นการเข้าใจตรงกันผมจะกำหนดค่าต่างๆดังนี้ครับ
1.ผมต้องการทำเว็บบนโดเมนจริงที่ชื่อว่า www.beelocal.com สมมุติว่าจะจดโดเมนทำเว็บในชื่อนี้เลย
2.เว็บที่เก็บในเครื่องตัวเองตอนนี้เก็บไฟล์เอาไว้ที่ C:/wamp/www/bee จริงๆมันจะอยู่ที่ไหน แฟ้มเป็นชื่ออะไรก็ได้ครับ เพราะเดี๋ยวการตั้งค่าเราจะกำหนดลงไปได้

เริ่มต้นจากท่านต้องเตรียมดังต่อไปนี้ครับ
1.มีเว็บอยู่ในเครื่อง
2.ติดตั้ง wamp แล้วเรียบร้อยใช้งานได้ เพราะว่าการตั้งค่าจุดนี้ จะเป็นการตั้งค่าสำหรับผู้ที่ใช้ wamp ครับ
3.ใช้ windows โดยต้องมีสิทธ์การแก้ไขไฟล์ใน C:/windows ด้วยนะครับ

ขั้นตอนทั้งหมดไม่ยากเลยมีดังนี้
1.เปิดให้มองเห็น hidden file ในเครื่อง
2.ตั้งค่าชื่อโดเมนในไฟล์ hosts
3.ตั้งค่า virtual host ของ wamp
4.restart apache

แค่ 4 ขั้นเท่านี้ เราก็จะสามารถใช้งานเว็บในเครื่องเราเองได้เหมือนการทำบน server จริงได้แล้วครับ
โดยถ้าอธิบายโดยละเอียด ก็จะมีดังนี้ครับ
1.เปิดให้มองเห็น hidden file ในเครื่อง อ่านวิธีทำให้มองเห็น hidden file ในเครื่อง เนื่องจากไฟล์ hosts มันเป็น Hidden file ครับในบางเครื่อง เราเลยต้องเปิดให้มองเห็นเพื่อที่จะได้แก้ไขได้ตรงกัน
-- วิธีทำก็คือ เปิด my computer หรือว่า หน้าต่างไหนก็ได้ครับ my document ก็ได้ แล้วด้านบน กดที่ Tools>Folder options >> (tab) view >> ติ้ก host hidden files and folders และเอาติ้กหน้า Hide protected operating system files ออก แล้ว OK

2. ตั้งค่าชื่อโดเมนในไฟล์ hosts ให้ชี้โดเมน beelocal.com ทำได้ดังนี้
--เปิดไฟล์ hosts ซึ่งเป็บอยู่ที่ C:\\WINDOWS\\system32\\drivers\\etc ถ้าใครมองไม่เห็นไฟล์ hosts ในแฟ้มนี้ให้ทำข้อ 1 ก่อนครับ
คลิกขวาเปิดด้วย notepad ก็ได้
แล้วที่บรรทัดล่างสุดขึ้นบรรทัดใหม่ เติมไปว่า
127.0.0.1 beelocal.com
127.0.0.1 www.beelocal.com

อย่าลืมนะครับ beelocal.com คือโดเมนที่ผมต้องการ และเราจะใส่ทั้งแบบมี www และไม่มี www ครับ ให้ชี้กลับเข้ามาที่เครื่องตัวเองคือ 127.0.0.1

3.ตั้งค่า virtual host wamp เพื่อให้รับโดเมนที่ชี้เข้ามา
-- ก่อนอื่นเปิดใช้ vhost ก่อน โดยให้เปิดไฟล์ httpd.conf ซึ่งเก็บใน C:\\wamp\\bin\\apache\\Apache2.2.11\\conf (ถ้าท่านใช้ wamp เวอร์ชั่นไม่ตรงกับผม ค่าตรง Apache2.2.11 อาจจะเปลี่ยนได้นะครับ ก็ให้เปิดตามที่ท่านมีอยู่)
แล้วค้น
# Virtual hosts
#Include conf/extra/httpd-vhosts.conf
ให้แก้ไขเป็น
# Virtual hosts
Include conf/extra/httpd-vhosts.conf

จากนั้น เปิดไฟล์ httpd-vhosts.conf ซึ่งอยู่ใน C:\\wamp\\bin\\apache\\Apache2.2.11\\conf\\extra (ถ้าท่านใช้ wamp เวอร์ชั่นไม่ตรงกับผม ค่าตรง Apache2.2.11 อาจจะเปลี่ยนได้นะครับ ก็ให้เปิดตามที่ท่านมีอยู่)

ให้เติม
<VirtualHost *:80>
ServerAdmin admin@beelocal.com
DocumentRoot "C:/wamp/www/bee"
ServerName beelocal.com
ServerAlias www.beelocal.com
</VirtualHost>

เอาไว้ที่ด้านล่างสุดของไฟล์ และอย่าลืมนะครับว่าเครื่องผมเก็บเว็บเอาไว้ที่นี่เลยต้งมาชี้ที่นี่ครับ

จากนั้น restart wamp 1 ที (จริงๆรีแค่ apache ก็พอแล้ว)

เมื่อเราทำเสร็จก็จะได้โดเมนในเครื่องตัวเองทันที ทดสอบด้วยการเปิดเว็บ www.beelocal.com นั่นล่ะครับ ถ้าเจอหน้าเว็บที่มีอยู่ถึงจะถูก ถ้าเจอหน้า local ให้ตรวจสอบตั้งแต่ข้อ 3 ครับ

และก็มีคำถามมาว่า เมื่อเราต้องการจะเปิดเว็บจริงๆ เราจะทำอย่างไร เพราะว่าตอนนี้มันชี้เข้าเครื่องเราเอง ก็ทำง่ายๆด้วยการลบบรรทัดที่เราตั้งค่าออกจาก hosts (ที่เราทำข้อที่ 2 ) และ save รอประมาณ 5 นาทีเปิดเว็บอีกครั้งมันก็เป็นเว็บที่อยู่บน server จริงๆแล้วครับ ง่ายๆเท่านี้เอง

อาจจะดูทำยุ่งยาก แต่ใช้แล้วมันสะดวกมากครับ