วิธีทำเวบ SSL ด้วย XAMPP + Let's Encrypt

ssl Dec 03, 2021

บทความนี้แอดมินจะแนะนำวิธีสร้าง 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 ขั้นตอน คือ

  1. สร้าง Website ด้วย XAMPP
  2. ชี้ Domain มายังไอพี ( Public IP ) ที่ลิมิแทรคจัดเตรียมไว้ให้ลูกค้า
  3. Gen ไฟล์ SSL ด้วย Let's Encrypt
  4. ผูก XAMPP ให้เชื่อมกับไฟล์ SSL ที่ได้

สิ่งที่ต้องเตรียม มี 3 อย่าง คือ

  1. เครื่อง Server ที่เป็น Windows  ( ลูกค้าเลือกสเปคได้ที่ https://www.limitrack.com/dedicatedserver.html )
  2. Public IP  หากลูกค้าเช่าเครื่อง Dedicated Server กับทาง www.Limitrack.com ท่านจะได้รับ Public IP แล้วทุกเครื่อง
  3. Domain ที่ลูกค้าเป็นเจ้าของ  ( โดยจดไว้กับเวบโดเมน เช่น  www.namecheap.com  หรือ www.name.com )

ขั้นตอนทั้งหมดในบทความนี้  "ฟรี" และใช้ได้ตลอดไป  "ไม่มีวันหมดอายุ"

ผลที่ได้คือ  ลูกค้าจะได้เวบไซท์ที่มี SSL ( หรือเวบขึ้นต้นด้วย https:// นั่นเอง ) ในแบบที่ผ่านการ Certified ถูกต้อง

ดังตัวอย่างในภาพนี้

ตัวอย่าง Website ที่ทำ SSL ด้วย XAMPP + Let's Encrypt ตามวิธีในบทความนี้

ขั้นตอนที่ 1 สร้าง Website ด้วย XAMPP

ให้ลูกค้ารีโมทเข้าไปที่เครื่อง Server ที่ลิมิแทรคจัดเตรียมให้

แล้ว download โปรแกรม XAMPP ที่เวบ www.apachefriends.org

เวบ download โปรแกรม XAMPP

Download โปรแกรม XAMPP เข้ามาไว้ในเครื่อง Server ของลูกค้าแล้วทำการติดตั้ง

เริ่มติดตั้งโปรแกรม XAMPP
เลือก feature ที่ลูกค้าต้องใช้งาน
ติดตั้งไว้ในโฟลเดอร์ c:\xampp
เริ่มติดตั้งโปรแกรม
เมื่อติดตั้งเสร็จ ให้กดติ๊กถูกทั้ง 2 อัน เพื่อให้ Windows Firewall เปิด port ยอมรับ XAMPP
ติดตั้งโปรแกรมเสร็จแล้วก็พร้อมรัน XAMPP Control Panel
หน้าตา Control Panel ซึ่งเริ่มต้นครั้งแรกจะถูก Stop ไว้
ไฟล์โปรแกรม XAMPP ทั้งหมดจะอยู่ในโฟลเดอร์ c:\xampp
กดปุ่ม Start ในบรรทัด Apache เพื่อเริ่มรัน Web Server
เปิด Browser แล้วลองเข้าหน้าเวบด้วยการพิมพ์ไอพีของ Server ซึ่งในตัวอย่างนี้คือ http://110.164.233.102

เปิด Browser แล้วลองเข้าหน้าเวบด้วยการพิมพ์ไอพีของ Server

ซึ่งในตัวอย่างนี้คือ http://110.164.233.102

หน้า Website แรกของลูกค้า  พร้อมใช้งานได้แล้ว   แต่ยังเป็นแบบ http:// ธรรมดา  ยังไม่ใช่ https://

ทดลองแก้ไข Website หน้าแรก โดยเข้าไปแก้ไขไฟล์  c:\xampp\htdocs\index.php

click ขวาที่ไฟล์ c:\xampp\htdocs\index.php แล้วเลือก notepad เพื่อแก้ไขไฟล์
ไฟล์ index.php เริ่มต้นจะมีค่าดังภาพนี้
ลองแก้ไขไฟล์ index.php ให้เป็นข้อความดังนี้แล้วบันทึกไฟล์
Refresh เวบ Browser ใหม่ หน้าเวบจะเปลี่ยนไปตามที่เราแก้ไฟล์

ลองเข้า Website แบบ SSL ( หรือ https://110.164.233.102 ) จะขึ้น error ดังภาพด้านล่างนี้

ถ้าเข้าด้วย https:// หรือ SSL ที่ไม่ผ่านการ Certified ที่ถูกต้อง ทำให้ขึ้นหน้า error ดังภาพนี้

ให้ลูกค้ากดปุ่ม Accept the Risk and Continue เพื่อข้ามหน้า error นี้ไป

ในช่อง Address จะพบว่ากุญแจ ขึ้นเครื่องหมายตกใจ นั่นคือ SSL ไม่ผ่านการ Certified

ขั้นตอนที่ 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 name ยังยัง Public IP ของเครื่อง Server

เสร็จเรียบร้อยแล้วลูกค้าสามารถเข้าเวบด้วย 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

download โปรแกรมสำหรับ Gen ไฟล์ SSL ที่เวบ www.certifytheweb.com
ติดตั้งโปรแกรม Certify the web ลงในเครื่อง Server ของลูกค้า
เปิดโปรแกรมมาครั้งแรกจะขึ้นแบบนี้
กดปุ่ม New Certificate แล้วเลือก Let's Encrypt แล้วใส่ Email

กดปุ่ม New Certificate แล้วเลือก Let's Encrypt แล้วใส่ Email

แล้วกดปุ่ม Register Contact

กรอกข้อมูล Domain ที่ลูกค้ามี

กรอกข้อมูล Domain ที่ลูกค้ามี

ในตัวอย่างนี้คือ  thai.directory , www.thai.directory

แล้วกดปุ่ม + สีเขียวทางด้านขวามือ

กดปุ่ม Authorization ทางด้านขวามือแล้วเลือก Site Root Directory

เลือก Challenge Type แบบ http-01

กดปุ่ม Authorization ทางด้านขวามือแล้วเลือก Site Root Directory

โดย Site Root Directory คือโฟลเดอร์ที่เก็บไฟล์ Website ของ XAMPP

กดปุ่ม Save ด้านบน แล้วกดปุ่ม Test ทางขวาบน
กดปุ่ม Deployment ทางขวา แล้วเลือกค่าดังภาพ
กดปุ่ม Tasks ทางขวา แล้วกดปุ่ม Select ด้านหน้าคำว่า Deploy to Apache
เลือกค่าดังภาพแล้วกดแถบ Task Parameter ด้านบน

ให้ลูกค้าสร้างโฟลเดอร์สำหรับเก็บไฟล์ SSL

โดยในที่นี้แอดมินเลือกโฟลเดอร์ที่ c:\ssl

สร้างโฟลเดอร์สำหรับเก็บไฟล์ SSL ที่ c:\ssl ไว้รอก่อน
พิมพ์ชื่อไฟล์ SSL ที่จะถูก Gen ไว้ในตำแหน่งโฟลเดอร์ที่เราเตรียมไว้ คือ c:/ssl

พิมพ์ชื่อไฟล์ SSL ที่จะถูก Gen ไว้ในตำแหน่งโฟลเดอร์ที่เราเตรียมไว้ คือ c:/ssl

ช่องแรกใส่ c:/ssl/cert.pem

ช่องสองใส่ c:/ssl/privatekey.pem

แล้วกดปุ่ม OK

กดปุ่ม Deploy to Apache เพื่อเริ่มสร้างไฟล์ SSL
เราจะได้ไฟล์ SSL ที่ผ่านการ Certify มาตรฐาน Let's Encrypt ในโฟลเดอร์ c:\ssl มา 2 ไฟล์

เราจะได้ไฟล์ SSL ที่ผ่านการ Certify มาตรฐาน Let's Encrypt ในโฟลเดอร์ c:\ssl มา 2 ไฟล์

กดแถบ Settings ด้านบน เพื่อให้โปรแกรมทำการ Auto Renew ( gen ไฟล์ SSL ใหม่ ) ทุกๆ 30 วัน

ขั้นตอนที่ 4 ผูก XAMPP ให้เชื่อมกับไฟล์ SSL ที่ได้

หลังจากได้ไฟล์ SSL ที่ผ่านการ Certify มาตรฐาน Let's Encrypt ในโฟลเดอร์ c:\ssl มาแล้ว 2 ไฟล์

เราจะต้องตั้งค่า config ใน XAMPP เพื่อให้รู้จักไฟล์ดังกล่าว  ดังนี้

กดปุ่ม Config แล้วเลือก Apache (httpd-ssl.conf) ดังภาพ

กดปุ่ม 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

กด Stop เพื่อหยุดการทำงาน Web Server
กด Start เพื่อเริ่มการทำงาน Web Server ใหม่อีกครั้ง

แล้วลูกค้าลองเข้าหน้าเวบแบบ https:// อีกครั้ง

จะพบว่า SSL ผ่านการ Certify ด้วย Let's Encrypt แล้ว

นั่นคือจะไม่ขึ้น errror อีกต่อไป  แล้วรูปกุญแจก็จะไม่ขึ้นเครื่องหมายตกใจแล้ว

ดังภาพ

ไม่ขึ้น errror อีกต่อไป แล้วรูปกุญแจก็จะไม่ขึ้นเครื่องหมายตกใจแล้ว
กดที่รูปกุญแจ จะพบว่า SSL นี้ผ่านการ Certify ด้วย Let's Encrypt

ลูกค้าก็จะได้ Website ที่พร้อมใช้งาน SSL บน Windows อย่างสมบูรณ์

เพิ่มเติม : ตั้งให้ Website รันอัตโนมัติ ( Auto Start  ) เมื่อ Restart เครื่อง Server

การจะตั้งใหระบบ Auto Start ได้นั้น  จะต้องรัน XAMPP Control Panel แบบผู้ดูแลระบบ ( Run as administrator )

ก่อนอื่นให้ลูกค้าปิดโปรแกรม  โดย click ขวาที่โปรแกรม ( บริเวณ Task bar ) แล้วเลือก Quit ดังภาพ

ปิดโปรแกรม XAMPP Control Panel

หลังจากนั้นให้เปิดโปรแกรม XAMPP Control Panel ขึ้นมาใหม่   แต่รอบนี้เปิดแบบผู้ดูแลระบบ ( Run as administrator ) โดย click ขวาที่ icon โปรแกรม แล้วเลือกเมนู  Run as administrator ดังภาพ

เปิดโปรแกรมแบบผู้ดูแลระบบ ( Run as administrator )

จะให้ Apache รันอัตโนมัติ ( Auto Start ) ทุกครั้งที่เรา Restart Windows ได้นั้น  เราจะต้องติดตั้ง Apache แบบ Service โดย

ก่อนอื่นให้หยุดการทำงาน Apache ก่อนด้วยการกดปุ่ม Stop

กดปุ่ม Stop บรรทัด Apache เพื่อหยุดการทำงานก่อน

หลังจากนั้นติดตั้ง Apache Service ด้วยการกดปุ่ม X ด้านหน้า

กดปุ่ม X ด้านหน้า Apache ( ใน Column ที่เขียนว่า Service )

XAMPP Control Panel จะติดตั้ง Apache Service ไว้ใน Windows Services

กดปุ่ม Services เพื่อดูผลการติดตั้ง Apache ลง Services

กดปุ่ม Services ( ลูกศรสีเขียว ดังภาพด้านบน ) เพื่อดูการทำงาน

ติดตั้ง Apache ลง Services ของ Windows เรียบร้อย

เมื่อทำตามขั้นตอนนี้   ระบบ Website ( Apache ) ของลูกค้าก็จะรันอัตโนมัติ ( Auto Start ) ทุกครั้งที่ลูกค้า Restart Windows


หากมีข้อสงสัย  สอบถามแอดมินได้ที่ inbox เพจเฟสบุ๊คของลิมิแทรคได้ครับ

ขอบคุณครับ

แอดมิน Limitrack.com

Tags

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.