ตั้งค่า xampp ให้รองรับ SSL แบบ Self Signed Certificate

เขียนเมื่อ 3 ปีก่อน โดย Ninenik Narkdee
ssl openssl self signed certificate ca signed certificate

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ssl openssl self signed certificate ca signed certificate

ดูแล้ว 13,462 ครั้ง


เนื่องจากปัจจุบันและในอนาคต เว็บไซต์ต่างๆ ควรรองรับการใช้งาน
ผ่าน https หรือรองรับการใช้งาน ssl ซึ่งเป็นเทคโนโลยีในการเข้ารหัสข้อมูล 
เพื่อให้การรับส่งข้อมูลในเครือข่ายอินเตอ์เน็ต ให้มีความปลอดภัยยิ่งขึ้น
    นอกจากนั้นบริการต่างๆ ก็บังคับหรือกำหนดเงื่อนไขการใช้งาน โดยต้องผ่าน
https เท่านั้น ตัวอย่างเช่น api การเรียกดูข้อมูล ก็กำหนดเงื่อนไขต้องเรียกใช้งานผ่านา https 
บริการการระบุตำแหน่งใน google map หรือการใช้ฟิเจอร์พิเศษ ของบราวเซอร์ เช่น การใช้งาน camera 
การใช้งาน microphone เหล่านี้เป็นต้น
 
 

ความจำเป็นในการใช้งาน SSL

    สำหรับนักพัฒนาแล้ว สภาพแวดล้อมในการทดสอบระบบ มีความจำเป็น ช่วยให้การทดสอบระบบเป็นไปอย่าง
ถูกต้อง การใช้งาน https ก็เหมือนกัน เมื่อใช้งานจริง ถึงแม้ว่าเราจะสามารถเรียกใช้งานผ่าน http ปกติได้ก็ตาม 
แต่ก็ไม่ได้เป็นสภาพแวดล้อม ที่เราจะใช้จริงในอนาคต และอาจทำให้การตรวจสอบ การกำหนดเงื่อนไข ต่างๆ ที่จำเป็น
ผิดพลาดได้
 
    ในที่นี้ใช้ xampp เป็น server จำลอง เราจะสร้างโฟลเดอร์โปรเจ็คขึ้นมา สมมติใช้ชื่อเป็น mysslweb
ไว้ใน htdocs ของ xampp ตาม path ดังนี้ C > xampp > htdocs > mysslweb 
    จากนั้นทดสอบสร้างไฟล์ index.php ที่มีการเรียกใช้งานการระบุตำแหน่ง location ปัจจุบัน ดังนี้
 

    ไฟล์ index.php

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='utf-8' />
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
    <title>Document</title>
  </head>
<body>

<div class="w-50 mx-auto mt-5">
<div>พิกัดตำแหน่ง</div>
<div id="mylat"></div>
<div id="mylon"></div>
</div>
<script>
    // เรียกใช้คุณสมบัติ ระบุตำแหน่ง ของ html 5 ถ้ามี    
    if(navigator.geolocation){    
              
        // หาตำแหน่งปัจจุบันโดยใช้ getCurrentPosition เรียกตำแหน่งครั้งแรกครั้งเดียวเมื่อเปิดมาหน้าแผนที่
        navigator.geolocation.getCurrentPosition(function(position){    
            var myPosition_lat=position.coords.latitude; // เก็บค่าตำแหน่ง latitude  ปัจจุบัน  
            var myPosition_lon=position.coords.longitude;  // เก็บค่าตำแหน่ง  longitude ปัจจุบัน           
            document.querySelector("#mylat").innerHTML = myPosition_lat;
            document.querySelector("#mylon").innerHTML = myPosition_lon;
        },function() {    
            // คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน    
        });    
    
        // ให้อัพเดทตำแหน่งในแผนที่อัตโนมัติ โดยใช้งาน watchPosition
        // ค่าตำแหน่งจะได้มาเมื่อมีการส่งค่าตำแหน่งที่ถูกต้องกลับมา
        navigator.geolocation.watchPosition(function(position){    
            var myPosition_lat=position.coords.latitude; // เก็บค่าตำแหน่ง latitude  ปัจจุบัน  
            var myPosition_lon=position.coords.longitude;  // เก็บค่าตำแหน่ง  longitude ปัจจุบัน  
            document.querySelector("#mylat").innerHTML = myPosition_lat;
            document.querySelector("#mylon").innerHTML = myPosition_lon;
        },function() {    
            // คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน    
        });    
              
      }else{    
           // คำสั่งทำงาน ถ้า บราวเซอร์ ไม่สนับสนุน ระบุตำแหน่ง    
      }     

</script> 	
</body>
</html>
 
    เมื่อเราเรียกใช้งานไฟล์ข้างต้นผ่าน http://localhost/mysslweb/ ถ้าเป็นการทดสอบที่เครื่องที่เรากำลังใช้งาน และเครื่องที่
เป็นตัวจำลอง server จะขึ้นแจ้งขออนุญาตการใช้งานตำแแหน่ง แต่ในการใช้งานจริง ผ่านเครือข่ายอินเทอร์เน็ต หรือแม้แต่ผ่าน
ระบบเครื่อข่ายภายใน เช่น เราเปิดผ่านมือถือ สมมติเครื่องที่เราจำลอง server มี ip เป็น 192.168.8.103 เราก็เข้าผ่าน
http://192.168.8.103/mysslweb โดยมือถือของเราต้องอยู่ในเครือข่ายเดียวกัน เช่น ใช้ไวไฟเดียวกันอยู่ เราจะพบว่าที่มือถือของ
เราจะไม่ขึ้นการระบุตำแหน่งให้ทำการอนุญาตใดๆ และนี่คือเหตุการณ์เสมือนจริง ในการใช้งาน
    เหตุผลและความจำเป็นคร่าวๆ ก็จะประมาณนี้ ต่อไป เราจะทำการกำหนดการใช้งาน ssl ให้กับ xampp
 
 

การกำหนดให้ xampp รองรับการใช้งาน ssl

    ก่อนไปสู่รายละเอียด และวิธีการ ขอธิบายเพิ่มเติมก่อนว่า ปกติเวลาเราเรียกใช้งานเว็บแอปพลิเคชั่นที่กำลังพัฒนาผ่าน localhost
จะประกอบด้วย protocal ในที่นี้คือ http และตามด้วยชื่อโดนเมน (localhost)  และ port ซึ่งค่าเริ่มต้นที่เป็น default ของการใช้งาน
อินเตอร์เน็ตทั่วไป จะผ่าน port 80 [หรือ 443 กรณีเป็น https]  ซึ่งถ้าหากเราสามารถใช้งาน port ทั้งสองได้ เวลาเรียกใช้งานเว็บ เราไม่
จำเป็นต้องกำหนด port ด้วยก็ได้ นั่นคือ
    http://localhost จะเท่ากับ http://localhost:80
    https://localhost จะเท่ากับ https://localhost:443
 
    แต่ในกรณี สมมติเช่น port 443 สำหรับ https ของเราถูกใช้งานไปใน service อื่นแล้ว และเราเปลี่ยนมาใช้เป็น port 444 แทน
เวลาเรียกใช้งาน เราต้องระบุ port 444 ด้วย นั่นคือ จะต้องเรียกเป็น
    https://localhost:444 เท่านั้น ไม่สามารถเรียกใช้งานผ่าน https://localhost แบบกรณีเป็น port 443 ซึ่งเป็นค่า default ได้
 
    การทำให้ xampp รองรับ ssl ในที่นี้จะแนะนำ 2 วิธี วิธีแรกเราสร้าง Self Signed Certificate ขึ้นมาเองผ่าน openssl command
และแบบที่สองผ่านการใช้งานบริการจากเว็บไซต์ https://ssl.indexnl.com ที่สร้าง Certificate สำหรับใช้ในการพัฒนาโดยเฉพาะและ
ผ่านการรับรองจาก CA (Certificate Authority ผู้ออกใบรับรองอิเล็กทรอนิกส์) แน่นอนว่าวิธีที่สอง จะเป็นวิธีที่ดี และสะดวกที่สุด แต่
ในที่นี้จะแนะนำวิธีการแรกเป้นข้อมูลทางเลือกเพิ่มเติมไว้

 

    วิธีที่ 1 ออก Self Signed Certificate ผ่าน openssl command

    เริ่มต้นให้เราหา path หรือโฟลเดอร์ที่จะจัดการข้อมูลก่อน ใช้ path ใดๆ ก็ได้ ในที่นี้สมมติใช้เป็น C > ssl 
    จากนั้นตรวจสอบว่า เครื่องเราสามารถใช้งาน openssl ผ่าน command line ได้หรือไม่ โดยใช้คำสัง openssl version
ตามรูปการใช้งานด้านล่าง

 

 
 
    หากไม่ขึ้นเวอร์ชั่น หรือไม่สามารถเรียกใช้งานคำสั่ง นี้ได้ ให้ทำการดาวน์โหลด และติดตั้ง openssl สำหรับ windows ตามลิ้งค์

 

 
 
    เลือกเวอร์ชั่นให้ตรงกับระบบปฏิบัติการของเราว่าเป็น 64bit หรือ 32bit แนะนำไฟล์ที่ไม่ใช่ light 
 
    เมื่อดาวน์โหลด และติดตั้งพร้อมใช้งานเรียบร้อยแล้ว เราจะไปต่อที่ขั้นตอนการสร้าง สามส่วนดังนี้คือ
  •         Private Key, 
  •         Certificate Siging Request (CSR) 
  •         และ Self-Signed Certificate 
    โดยทั้ง 3 ไฟล์จะมีนามสกุลเป็น .key .csr และ .crt
    เราจะสร้างไฟล์ทั้ง 3 นี้ในโฟลเดอร์ ssl ที่เรากำหนดไว้
 
    ในเนื้อหานี้ เราจะสร้าง ssl ให้กับ localhosst เพื่อให้สามารถเรียกใช้งาน https://localhost ได้ โดยในวิธีที่ 1
เราจะใช้ชื่อสำหรับไฟล์ crt เป็น localhost2.crt จะสงวนชื่อ  localhost.crt ไว้สำหรับวิธีที่ 2
 
 
    คำสั่งแรกสร้าง key
openssl genrsa -out localhost2.key 2048 
 
    เปลี่ยนชื่อไฟล์ตามต้องการ ในที่นี้ใช้ localhost2.key
 
    คำสั่งที่สองสร้าง csr
openssl req -new -key localhost2.key -sha256  -out localhost2.csr -subj "/C=TH/ST=Bangkok/L=Din Daeng/O=Self Signed/OU=IT/CN=Ninenik/emailAddress=admin@localhost"
 
    นอกจากชื่อไฟล์ เราสามารถค่าต่างๆ ในคำสั่งที่ 2 ได้ตามนี้
  • Country Name (2 letter code) [GB]: เช่น: TH
  • State or Province Name (full name) [Berkshire]: เช่น: Bangkok
  • Locality Name (eg, city) [Newbury]: เช่น: Din Daeng
  • Organization Name (eg, company) [My Company Ltd]: เช่น: Self Signed
  • Organizational Unit Name (eg, section) []:For example: IT
  • Common Name (eg, your name or your server's hostname) []:เช่น: Ninenik
  • Email Address []:เช่น: admin@example.com
Please enter the following 'extra' attributes
to be sent with your certificate request
  • A challenge password []:
  • An optional company name []:
 
    ในคำสั่งที่สอง ถ้าเราพิมพ์แค่
openssl req -new -key localhost2.key -sha256  -out localhost2.csr
    คำถามต่างๆ สำหรับค่าตามข้างต้น จะแสดงให้เราพิมพ์จนครบ แต่ในที่นี้ เรากำหนดเป็น option เข้าไปตอนเรียกคำสั่งเลย
เพื่อไม่ให้เสียเวลาพิมพ์ทีละรายการ
 
    คำสั่งที่สามสร้าง crt
openssl x509 -req -days 365 -in localhost2.csr -signkey localhost2.key -sha256 -out localhost2.crt
 
    จะได้หน้าตาการรันทำงานของคำสั่งทั้งสามผ่าน command line ดังรูปด้านล่าง
 
 

 
 
    เราจะได้ไฟล์ท้้ง 3 ดังรูป
 
 

 
 
    คลิกขวาที่ไฟล์ .crt แล้วเลือก install certificate แล้วทำตามขั้นตอนดังรูป จนเสร็จขั้นตอน
 

 

 
 

 
 

 
 
    หากต้องการดูว่า ที่เราเพิ่มนั้นไปอยู่ไหน ให้ค้นหาคำว่า computer certificate 
 
 

 
 

 
 
    แล้วเข้าไปดูส่วนของใบรับรองที่เราได้เพิ่มเข้าไป ตามหมวดที่เรากำหนดได้ ส่วนนี้เราสามารถลบหรือแก้ไขได้
 
    ต่อไปให้เราทำการ copy ไฟล์ localhost2.crt และ localhost2.key ไปไว้ในโฟลเดอร์
C > xampp > apache > conf > ssl.crt 
C > xampp > apache > conf > ssl.key
    ตามลำดับ 
    เราจะ copy ไฟล์ localhost2.csr ไปไว้ในโฟลเดอร์ด้านล่างนี้ ด้วยหรือไม่ก็ได้ ในที่นี้จะไม่ copy ไป
C > xampp > apache > conf > ssl.csr
 
    จากนั้นในโปรแกรมจัดการ xampp หรือ xampp control ให้เราปิดการทำงาน server ทั้งหมดก่อน แล้วเลือกไปที่ config
ของ apache แล้วเลือก httpd-ssl.config จะเปิดไฟล์กำหนดเกี่ยวกับการใช้งาน ssl มาให้
 

 
 
    ให้เราดูบรรทัดตามนี้ โดยใช้วิธีการค้นหาคำด้านหน้า ก็ได้เช่น Listen
 
Listen 444
    เนื่องจาก port 443 ไม่สามารถใช้งานได้ ในที่จึงใช้เป็น 444 หากใครสามารถใช้ 443 ได้ก็ไม่่ต้องเปลี่ยนค่านี้
 
<VirtualHost _default_:444>
 
<VirtualHost _default_:444>

#   General setup for the virtual host
DocumentRoot "C:/xampp/htdocs"
ServerName localhost:444
ServerAdmin admin@localhost
ErrorLog "C:/xampp/apache/logs/error.log"
TransferLog "C:/xampp/apache/logs/access.log"
กำหนดตรงตัวเลข เป็น 444 
    DocumentRoot เป็นส่วนของโฟลเดอร์หลักของ server เราใช้ใน localhost ทั้งหมด ก็กำหนดเป็น C:/xampp/htdocs
    ServerName กำหนดการเรียกใช้งาน ถ้าใครเป็น 443 ก็กำหนดแค่ localhost ก็ได้ แต่ถ้าเป็น port อื่นต้องกำหนด port ด้วย
    ServerAdmin ใส่อีเมลจำลองไป ที่เหลือใช้ค่าเดิม
 
    ต่อไปส่วนการกำหนดไฟล์ crt เดิมจะใช้งานไฟล์ server.crt ให้เราปิด โดยใช้ # ไว้ด้านหน้า แล้วเพิ่มรายการใหม่เข้ามา
ตามชื่อไฟล์ที่เราใช้งานคือ localhost2.crt ดังนี้
 
SSLCertificateFile "conf/ssl.crt/localhost2.crt"
#SSLCertificateFile "conf/ssl.crt/server.crt"
#SSLCertificateFile "conf/ssl.crt/server.crt"
#SSLCertificateFile "conf/ssl.crt/server.crt"
    เช่นเดียวกันกับไฟล์ key ก็กำหนดเป็นดังนี้
 
SSLCertificateKeyFile "conf/ssl.key/localhost2.key"
#SSLCertificateKeyFile "conf/ssl.key/server.key"
#SSLCertificateKeyFile "conf/ssl.key/server.key"
#SSLCertificateKeyFile "conf/ssl.key/server.key"
 
    เป็นอันเสร็จเรียบร้อย ให้เราบันทึก และปิดไป แล้วทำการ start server service 
    หากไม่มีอะไรผิดพลาดตัว xampp ก็จะทำงานปกติดังรูป
 
 

 
 
    ทดสอบเรียกใช้งานไฟล์ทดสอบของเรา ผ่าน https://localhost:444/mysslweb หรือถ้าเป็น port 443 ก็กำหนดแค่
https://localhost/mysslweb จะขึ้นแจ้งเตือน Not secure ดังรูป 
 
 

 
 
เพราะเป็น cert ที่เราสร้างขึ้นมาเอง และไม่ได้รับรองจาก CA แต่ไม่ใช่ปัญหาสำหรับใช้งานในระบบทดสอบ ให้เรากด ปุ่ม 
Advanced แล้วกดคำว่า Proceed to localhost (unsafe) ที่แสดงขึ้นมา 
 
 

 
 
    หน้าเว็บก็จะแสดงจำแหน่งพิกัดของเรา ตามโค้ดตัวอย่างที่เรากำหนดในตอนต้น แต่สังเกตว่าจะมีข้อความ Not secure แสดง
กำกับตลอด ตามเหตุผลที่เราได้อธิบายไป ซึ่งการเตือนนั้นจะแสดงแค่เพียงครั้งแรกเท่านั้น ไม่มีผลสำหรับใช้ในการทดสอบระบบ
ที่ต้องอาศัยการใช้งานผ่าน ssl
    เราลองคลิกที่คำว่า Not secure ตรง address bar แล้วเลือก certificate ก็จะแสดงข้อมูล certificate ที่เราสร้างขึ้น ตามรูป
 


 
 
 

    วิธีที่ 2 สร้าง CA-Signed Certificate จากเว็บไซต์ ssl.indexnl.com 

    ตามที่ได้อธิบายไปแล้ว วิธีนี้เป็นวิธีที่ง่าย และสะดวก และดีกว่าวิธีแรก เพราะเป็น Certificate ที่ผ่านการรับรองจาก CA และออก
มาเพื่อใช้สำหรับการพัฒนาโดยเฉพาะ ให้เราไปที่เว็บไซต์ สร้าง Certificate ที่ 
 
    กรอกโดเมน ในที่นี้เราจะใช้เป็น localhost ก็กรอก localhost แล้วกดปุ่ม Get me the Certificate 
 
 

 
 
    ทำการดาวน์โหลด ไฟล์ สังเกตว่า certificate นี้รองรับการใช้งานถึง 5 ปี
 
 

 
 
    ทำการแตกไฟล์ จะพบไฟล์ 3 ไฟล์ ตามรูป
 
 

 
 
    ให้ทำตามขึ้นตอนเหมือนวิธีที่ 1 โดยให้ติดตั้ง certificate จากไฟล์แรกที่ชื่อ ca.ssl.indexnl.com.crt คลิกขวาเลือก
install certificate ทำตามขั้นตอนจนเสร็จ ไฟล์นี้เราไม่ได้ทำอะไรอีก ต่อจากนั้น copy ไฟล์ localhost.crt และ localhost.key 
ไปไว้ในที่เดียวกันกับวิธีที่ 1 ปิด server service และเข้าไปแก้ไขไฟล์ httpd-ssl.config แก้เฉพาะส่วนดังนี้
 
SSLCertificateFile "conf/ssl.crt/localhost.crt"
#SSLCertificateFile "conf/ssl.crt/localhost2.crt"
#SSLCertificateFile "conf/ssl.crt/server.crt"
#SSLCertificateFile "conf/ssl.crt/server.crt"
#SSLCertificateFile "conf/ssl.crt/server.crt"
    และ 
 
SSLCertificateKeyFile "conf/ssl.key/localhost.key"
#SSLCertificateKeyFile "conf/ssl.key/localhost2.key"
#SSLCertificateKeyFile "conf/ssl.key/server.key"
#SSLCertificateKeyFile "conf/ssl.key/server.key"
#SSLCertificateKeyFile "conf/ssl.key/server.key"
    ปิดส่วนการใช้งานไฟล์ localhost2 แล้วเพิ่มส่วนการใช้งาน localhost.crt และ localhost.key ที่ได้จากเว็บไซต์ 
https://ssl.indexnl.com/ แทน เสร็จแล้ว restart server ไปหน้าทดสอบเรียกใช้งานเหมือนเดิม
 
 

 
 
    จะเห็นว่าตอนนี้ ไม่มีส่วนของการแจ้งเตือน Not secure ที่เป็นสีแดงแล้ว แต่บางกรณีอาจจะมีคำว่า Not secure สีปกติแจ้งกรณี
หน้านั้นยังมีการเรียกใช้งานไฟล์ ที่มาจาก http หรือบราวเซอร์มีการใช้งาน plugin ที่เรียกไฟล์จาก http อยู่ก็มีส่วนให้ขึ้น
 
 

 
 
เป็น Not secure แบบ not fully secure เราสามารถใส่ meta นี้ เพื่อบล็อกทุกๆ ไฟล์ที่ไม่ได้เรียกใช้งานผ่าน https ได้
 
 <meta http-equiv="Content-Security-Policy" content="block-all-mixed-content">
    ข้อความ Not secure ก็จะหายไป แต่เราต้องมั่นใจว่า จะไม่มีการเรียกใช้ไฟล์จาก http และจะเรียกใช้งานไฟล์ในเพจนั้นจาก 
https เท่านั้น เพราะหากใส่ meta ของต้นไป ไฟล์ที่เรียกผ่าน http จะไม่แสดงนั่นเอง
    หน้าตาข้อมูลของ certificate ก็จะประมาณนี้ มีอายุ 5 ปี
 

 

 
 

การกำหนด Virtual Host

    ยังมีวิธีการกำหนดเพิ่มเติม เพื่อให้รองรับการพัฒนาเสมือนจริงมากขึ้น ก็คือการสร้าง domian และ host สมมติเพื่อจำลอง
server เช่น ในโฟลเดอร์ตัวอย่าง เราชื่อ mysslweb เวลาเราเราเรียกใช้งานก็จะเป็น https://localhost/mysslweb แต่ถ้า
เราอยากให้เสมือนว่าเข้าเว็บไซต์มากขึ้น อยากให้เป็นเช่น https://www.mysslweb.com ส่วนนี้ เราก็สามารถทำได้ โดยการไป
แก้ไขไฟล์ hosts ใน C > Windows > System32 > drivers > etc 
    จำไว้ว่า การกำหนดชื่อโดนเมนส่วนนี้ เราจะต้องใช้ชื่อโดเมนที่ไม่ซ้ำกับซื่อที่มีอยู่จริง เพราะไม่เช่นนั้น ถ้าเราจะเข้าเว็บดังกล่าว
ก็จะกลายเป้นวิ่งมาที่ localhost แทน เช่น อาจจะเปลี่ยนจาก .com เป้น .local เป็นต้น ในที่นี้ใช้ชื่อเป็น mysslweb.com
 
 

 
 
    เปิดไฟล์ hosts ด้วย text editor เช่น nodepad หรือ nodepad++ ตามต้องการ 
    การกำหนดส่วนของไฟล์นี้ ก็เหมือนกับการกำหนด DNS หรือ domina name server ให้ domina ที่เรากำหนด ยิงไปยังเครื่อง
host หรือ server ที่เราต้องการ
 
 

 
 
    การแก้ไขไฟล์นี้ จำเป็นจะต้องเป็น admin หรือ Administrator
 
    เสร็จแล้วให้เราเอาชื่อ domain ที่กำหนดไปสร้าง certificate ในเว็บไซต์ https://ssl.indexnl.com โดยเวลากรอกโดนเมน
ให้กรอกแค่ mysslweb.com ก็ได้ ไม่ต้องมี www ด้านหน้า ดาวน์โหลด certificate เหมือนขั้นตอนผ่านๆ มา
 
    หลังจากดาวน์โหลดเรียบร้อยแล้ว ใหัคลิกที่เมนูในเว็บ ssl.indexnl.com แล้วเลือกเมนู XAMPP SSL 
หรือไปที่ลิ้งค์นี้ก็ได้ https://ssl.indexnl.com/xampp-wamp-ssl/
    จะบอกวิธีการกำหนด vitual host ใน xampp แต่ก่อนอื่น ให้เราทำตามขั้นตอนการติดตั้ง certificate เหมือนเดิม ยกเว้นส่วน
ของการกำหนดใน ไฟล์ httpd-ssl.config เพราะเราจะกำหนดอีกไฟล์หนึ่งแทนสำหรับกรณีนี้ ทำส่วนอื่นๆ เช่น ติดตั้ง certificate
copy ไฟล์ต่างๆ ไปไว้ให้เรียบร้อยก่อน
    หลังจากเสร็จขั้นตอนการติดตั้งเบื้องต้นแล้ว เราก็มาทำตามวิธีของ ssl.indexnl.com แนะนำต่อ
โดยเข้าไปกำหนด virtualhost ที่ไฟล์ C > xampp > apache > conf > extra  > httpd-vhosts.conf
    แล้วทำการเพิ่มรูปแบบประมาณนี้ไว้ด้านล่างสุด
 
<VirtualHost *:80>
    ServerAdmin webmaster@mysslweb.com
    DocumentRoot "C:\xampp\htdocs\mysslweb"
    ServerName mysslweb.com
    ServerAlias www.mysslweb.com
	ErrorLog "logs/mysslweb.com-error.log"
    CustomLog "logs/mysslweb.com-access.log" common
</VirtualHost>

<VirtualHost *:444>
    ServerAdmin webmaster@mysslweb.com
    DocumentRoot "C:\xampp\htdocs\mysslweb"
    ServerName mysslweb.com
    ServerAlias www.mysslweb.com
	SSLEngine on
	 SSLCertificateFile "C:\xampp\apache\conf\ssl.crt\mysslweb.com.crt"
	 SSLCertificateKeyFile "C:\xampp\apache\conf\ssl.key\mysslweb.com.key"
	 <FilesMatch "\.(cgi|shtml|phtml|php)$">
	 SSLOptions +StdEnvVars
	 </FilesMatch>
	ErrorLog "logs/mysslweb.com-error.log"
    CustomLog "logs/mysslweb.com-access.log" common
</VirtualHost>
 
   เราต้องเพิ่มทั้งแบบ http port 80 และ https port 444 (หรือ 443 ตามเครื่องของเรา) กำหนด domain เปลี่ยน
ค่าตามที่เราใช้งาน เสร็จแล้วทำการบันทึก แล้ว restart server ใหม่อีกครั้ง
    เปิดหน้าเว็บเพจ https://www.mysslweb.com จะเห็นว่าเราสามารถเข้าหน้าโปรเจ็คของเราผ่าน domain ที่เรากำหนด
เป้นการจำลองสภาพแวดล้อมสำหรับการพัฒนาเว็บแอปพลิเคชั่นได้เป็นอย่างดี
 
 

 
 


 
    เนื่องจากใช้เป็น port 444 จึงจำเป็นต้องกำหนด port เข้าไปด้วย เท่านี้ก็เสมือนเราทดสอบระบบผ่าน server จริงโดยไม่ต้อง
กังวลการแก้ไข path ต่างๆ มาอัพขึ้น server
    หวังว่าเนื้อหานี้จะเป็นแนวทาง สำหรับนำไปประยุกต์ใช้งานต่อไป


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ







เนื้อหาที่เกี่ยวข้อง









URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ