วิธีทำเวบ SSL ด้วย XAMPP + Let's Encrypt
บทความนี้แอดมินจะแนะนำวิธีสร้าง Website ด้วย XAMPP และสร้าง SSL ด้วย Let's Encrypt
เวบไซท์ SSL คืออะไร ?
SSL คือ เทคโนโลยีเข้ารหัสข้อมูล ระหว่าง Server กับ Web Browser
SSL ช่วยป้องกันการดักข้อมูลระหว่าง Server กับ Web Browser
เวบไซท์ที่ใช้ SSL จะมี Address URL ที่ขึ้นต้นด้วย https://
ทำไมต้องใช้ SSL ?
Application ยุคใหม่ในปัจจุบัน ทั้งบน Mobile หรือ Platform อื่นๆ เริ่มบังคับให้ผู้พัฒนาเวบไซท์ต้องทำ SSL
เช่น
Website แบบเดิมๆที่ใช้ http:// ( ไม่มี SSL ) จะถูก Chrome แจ้งเตือนว่าไม่ปลอดภัย โดยจะขึ้นรูปกุญแจกากบาทที่ URL หน้าเวบ
Application บน iOS จะยอมรับการ connect จากเวบที่มี SSL เท่านั้น
ระบบ facebook API จะยอมรับการ connect จากเวบที่มี SSL เท่านั้น
ระบบ Google API จะยอมรับการ connect จากเวบที่มี SSL เท่านั้น
และ Platform ที่สำคัญอื่นๆอีกมากมาย ที่เริ่มบังคับให้ผู้พัฒนา Website จำเป็นต้องทำเวบแบบ SSL
บทความนี้ มี 4 ขั้นตอน คือ
- สร้าง Website ด้วย XAMPP
- ชี้ Domain มายังไอพี ( Public IP ) ที่ลิมิแทรคจัดเตรียมไว้ให้ลูกค้า
- Gen ไฟล์ SSL ด้วย Let's Encrypt
- ผูก XAMPP ให้เชื่อมกับไฟล์ SSL ที่ได้
สิ่งที่ต้องเตรียม มี 3 อย่าง คือ
- เครื่อง Server ที่เป็น Windows ( ลูกค้าเลือกสเปคได้ที่ https://www.limitrack.com/dedicatedserver.html )
- Public IP หากลูกค้าเช่าเครื่อง Dedicated Server กับทาง www.Limitrack.com ท่านจะได้รับ Public IP แล้วทุกเครื่อง
- Domain ที่ลูกค้าเป็นเจ้าของ ( โดยจดไว้กับเวบโดเมน เช่น www.namecheap.com หรือ www.name.com )
ขั้นตอนทั้งหมดในบทความนี้ "ฟรี" และใช้ได้ตลอดไป "ไม่มีวันหมดอายุ"
ผลที่ได้คือ ลูกค้าจะได้เวบไซท์ที่มี SSL ( หรือเวบขึ้นต้นด้วย https:// นั่นเอง ) ในแบบที่ผ่านการ Certified ถูกต้อง
ดังตัวอย่างในภาพนี้
ขั้นตอนที่ 1 สร้าง Website ด้วย XAMPP
ให้ลูกค้ารีโมทเข้าไปที่เครื่อง Server ที่ลิมิแทรคจัดเตรียมให้
แล้ว download โปรแกรม XAMPP ที่เวบ www.apachefriends.org
Download โปรแกรม XAMPP เข้ามาไว้ในเครื่อง Server ของลูกค้าแล้วทำการติดตั้ง
เปิด Browser แล้วลองเข้าหน้าเวบด้วยการพิมพ์ไอพีของ Server
ซึ่งในตัวอย่างนี้คือ http://110.164.233.102
หน้า Website แรกของลูกค้า พร้อมใช้งานได้แล้ว แต่ยังเป็นแบบ http:// ธรรมดา ยังไม่ใช่ https://
ทดลองแก้ไข Website หน้าแรก โดยเข้าไปแก้ไขไฟล์ c:\xampp\htdocs\index.php
ลองเข้า Website แบบ SSL ( หรือ https://110.164.233.102 ) จะขึ้น error ดังภาพด้านล่างนี้
ให้ลูกค้ากดปุ่ม Accept the Risk and Continue เพื่อข้ามหน้า error นี้ไป
ขั้นตอนที่ 2 ชี้ Domain มายัง Public IP ของเครื่อง Server
ก่อนที่เราจะทำการสร้าง SSL เราจะต้องเตรียม Domain Name ก่อน
โดยการทำการชี้ Domain Name ที่ลูกค้ามี มายังไอพีของเครื่อง Server ที่ลิมิแทรคเตรียมไว้ให้
ให้ลูกค้า Login เข้าไปยัง Web ที่ลูกค้าจดชื่อ Domain Name ซึ่งในตัวอย่างนี้ของแอดมินคือเวบ www.namecheap.com
ในตัวอย่างนี้แอดมินจะชี้โดเมน thai.directory ( ซึ่งเป็นโดเมนของบริษัทลิมิแทรค )
โดยสร้าง Type แบบ A Record ของ @ และ www ชี้ไปยังไอพี 110.164.233.102 ดังภาพ
เสร็จเรียบร้อยแล้วลูกค้าสามารถเข้าเวบด้วย Domain ได้เลย ดังตัวอย่างนี้คือ
https://thai.directory
ขั้นตอนที่ 3 สร้าง SSL ผ่าน Certify ของ Let's Encrypt
เราจะต้องทำให้เครื่องหมายตกใจหายไปจากรูปกุญแจ ด้วยการสร้างไฟล์ SSL ที่ผ่านการ Certify อย่างถูกต้อง
โดย Let's Encrypt คือ องค์กรที่ยืนยันการ Certify มาตรฐาน ที่หลายๆเวบทั่วโลกใช้งานกัน ( ลิมิแทรคก็ใช้ Let's Encrypt )
โดย SSL ที่ได้จาก Let's Encrypt นี้จะใช้งานได้ฟรีตลอดไป แต่จะต้องทำการ gen ไฟล์ใหม่ทุกๆ 3 เดือน
ในบทความนี้เราจะใช้โปรแกรมที่ชื่อว่า Certify the Web ในการ Gen ไฟล์ SSL มาตรฐาน Let's Encrypt
ให้ลูกค้า download โปรแกรม Certify the Web ที่เวบ www.certifytheweb.com
กดปุ่ม New Certificate แล้วเลือก Let's Encrypt แล้วใส่ Email
แล้วกดปุ่ม Register Contact
กรอกข้อมูล Domain ที่ลูกค้ามี
ในตัวอย่างนี้คือ thai.directory , www.thai.directory
แล้วกดปุ่ม + สีเขียวทางด้านขวามือ
เลือก Challenge Type แบบ http-01
กดปุ่ม Authorization ทางด้านขวามือแล้วเลือก Site Root Directory
โดย Site Root Directory คือโฟลเดอร์ที่เก็บไฟล์ Website ของ XAMPP
ให้ลูกค้าสร้างโฟลเดอร์สำหรับเก็บไฟล์ SSL
โดยในที่นี้แอดมินเลือกโฟลเดอร์ที่ c:\ssl
พิมพ์ชื่อไฟล์ SSL ที่จะถูก Gen ไว้ในตำแหน่งโฟลเดอร์ที่เราเตรียมไว้ คือ c:/ssl
ช่องแรกใส่ c:/ssl/cert.pem
ช่องสองใส่ c:/ssl/privatekey.pem
แล้วกดปุ่ม OK
เราจะได้ไฟล์ SSL ที่ผ่านการ Certify มาตรฐาน Let's Encrypt ในโฟลเดอร์ c:\ssl มา 2 ไฟล์
ขั้นตอนที่ 4 ผูก XAMPP ให้เชื่อมกับไฟล์ SSL ที่ได้
หลังจากได้ไฟล์ SSL ที่ผ่านการ Certify มาตรฐาน Let's Encrypt ในโฟลเดอร์ c:\ssl มาแล้ว 2 ไฟล์
เราจะต้องตั้งค่า config ใน XAMPP เพื่อให้รู้จักไฟล์ดังกล่าว ดังนี้
กดปุ่ม Config แล้วเลือก Apache (httpd-ssl.conf) ดังภาพ
ไฟล์ httpd-ssl.conf ก็จะถูกเปิดขึ้นมาด้วยโปรแกรม Notepad
ให้ลูกค้าแก้ชื่อไฟล์ใน 2 ช่องวงกลมด้านล่างดังภาพนี้ คือ
SSLCertificateFile "c:/ssl/cert.pem"
และ
SSLCertificateKeyFile "c:/ssl/privatekey.pem"
แล้วกดบันทึก ( Save ) แก้ไขไฟล์นี้
หลังจากนั้นเราต้องสั่ง Restart ตัว Apache ( Web Server ) ใหม่ เพื่อให้รู้จักไฟล์ SSL อันใหม่
โดยทำการ Stop แล้ว Start
แล้วลูกค้าลองเข้าหน้าเวบแบบ https:// อีกครั้ง
จะพบว่า SSL ผ่านการ Certify ด้วย Let's Encrypt แล้ว
นั่นคือจะไม่ขึ้น errror อีกต่อไป แล้วรูปกุญแจก็จะไม่ขึ้นเครื่องหมายตกใจแล้ว
ดังภาพ
ลูกค้าก็จะได้ Website ที่พร้อมใช้งาน SSL บน Windows อย่างสมบูรณ์
เพิ่มเติม : ตั้งให้ Website รันอัตโนมัติ ( Auto Start ) เมื่อ Restart เครื่อง Server
การจะตั้งใหระบบ Auto Start ได้นั้น จะต้องรัน XAMPP Control Panel แบบผู้ดูแลระบบ ( Run as administrator )
ก่อนอื่นให้ลูกค้าปิดโปรแกรม โดย click ขวาที่โปรแกรม ( บริเวณ Task bar ) แล้วเลือก Quit ดังภาพ
หลังจากนั้นให้เปิดโปรแกรม XAMPP Control Panel ขึ้นมาใหม่ แต่รอบนี้เปิดแบบผู้ดูแลระบบ ( Run as administrator ) โดย click ขวาที่ icon โปรแกรม แล้วเลือกเมนู Run as administrator ดังภาพ
จะให้ Apache รันอัตโนมัติ ( Auto Start ) ทุกครั้งที่เรา Restart Windows ได้นั้น เราจะต้องติดตั้ง Apache แบบ Service โดย
ก่อนอื่นให้หยุดการทำงาน Apache ก่อนด้วยการกดปุ่ม Stop
หลังจากนั้นติดตั้ง Apache Service ด้วยการกดปุ่ม X ด้านหน้า
XAMPP Control Panel จะติดตั้ง Apache Service ไว้ใน Windows Services
กดปุ่ม Services ( ลูกศรสีเขียว ดังภาพด้านบน ) เพื่อดูการทำงาน
เมื่อทำตามขั้นตอนนี้ ระบบ Website ( Apache ) ของลูกค้าก็จะรันอัตโนมัติ ( Auto Start ) ทุกครั้งที่ลูกค้า Restart Windows
หากมีข้อสงสัย สอบถามแอดมินได้ที่ inbox เพจเฟสบุ๊คของลิมิแทรคได้ครับ
ขอบคุณครับ
แอดมิน Limitrack.com