สวัสดีครับ POP จากบริษัท Classmethod (Thailand) ครับ
ครั้งนี้จะมาแนะนำเกี่ยวกับการทำเว็บไซต์ที่สร้างด้วย Elastic Beanstalk โดยการเชื่อมต่อ Elastic Beanstalk กับ CloudFront และทำให้เป็น HTTPS ครับ
สิ่งที่ต้องมี
สร้าง Environment
※สร้าง Environment ใน Application บน Elastic Beanstalk แล้ว
สมมติว่าผมได้สร้าง Environment ใน Application เตรียมไว้แล้วโดยใช้ชื่อดังนี้
Name:tinnakorn-single.ap-southeast-1.elasticbeanstalk.com
หากยังไม่มี Environment ลองสร้างตามลิงก์ด้านล่างนี้เพื่อใช้ในการทดสอบได้ครับ
Hosted zone ใน Route 53
※สมมติว่า cmth.link ได้มีการตั้งค่าเป็น Host Zone ใน Route 53 แล้ว
ดูได้ที่ลิงก์ด้านล่างนี้
เป้าหมาย
ผมจะเชื่อมต่อ CloudFront กับ Elastic Beanstalk เพื่อทำให้เว็บไซต์เป็น HTTPS แล้วเปลี่ยน Domain name ด้วย Route 53 และขอใบรับรอง SSL Certificate เพื่อให้เว็บไซต์มีความน่าเชื่อถือในการเข้าใช้งาน
ครั้งนี้จะเปลี่ยน Domain ของ Elastic Beanstalk เป็นชื่อ Domain name ด้านล่างนี้
https://tinnakorn-single.cmth.link
สร้าง Certificate SSL
เข้ามาที่ Service AWS Certificate Manager (ACM) แล้วเปลี่ยนเป็น Region N.Virginia
คลิกที่ List certificates จากเมนูด้านซ้าย และคลิก Request
คลิก Next
การตั้งค่า Domain names ในหน้า Request public certificate:
・Fully qualified domain name: tinnakorn-single.cmth.link (ชื่ออะไรก็ได้)
・เลื่อนลงมาด้านล่างสุด คลิกปุ่ม Request
คลิกปุ่ม Reload แล้ว Domain name ที่เราสร้างจะแสดงขึ้นมา แล้วคลิกเข้าไปที่ Certificate ID ของเราได้เลย
คลิก Create records in Route 53
คลิก Create records (ในกรณีที่ไม่แสดงแบบนี้ ให้ออกไปหน้าหลักแล้วกลับเข้ามาอีกครั้ง)
เมื่อคลิกปุ่มนี้แล้ว record นี้จะถูกสร้างขึ้นใน Hosted zones ของ cmth.link ใน Route 53 ทันที
เมื่อการสร้าง Domain name เสร็จแล้ว ดูที่หัวข้อ Domains จะเห็นว่า Status เป็น ✅ Issued แบบนี้
เข้ามาที่ [Service Route 53 ＞ Hosted zones ＞ cmth.link]
แล้วดูที่หัวข้อ Records และค้นหา Record name ตาม Domain name ที่สร้างเมื่อสักครู่นี้
จะเห็นว่ามี Record name ที่เป็น Type CNAME ของเราถูกสร้างขึ้นและเป็นชื่อเหมือนกับ Domain name ใน ACM
เมื่อสร้างใบรับรอง SSL บน Certitication Manager ได้แล้วให้เปลี่ยนรีเจี้ยนกลับมาเป็น Singapore หรือรีเจี้ยนที่เรากำลังใช้งานอยู่ครับ
เชื่อมต่อ Elastic Beanstalk กับ CloudFront และทำให้เป็น HTTPS
เข้ามาที่หน้า [Service AWS Elastic Beanstalk ＞ Environments ＞ คลิก Environment ของเราใน Region ที่เราใช้งาน เช่น tinnakorn-single ใน Singapore] และคัดลอก Domain เตรียมไว้
แล้วเข้าไปที่ [Service CloudFront ＞ Distributions] และคลิก Create distribution
การตั้งค่าหน้า Create distribution
Origin
・Origin domain: [your_environment_name].ap-southeast-1.elasticbeanstalk.com (วาง Domain ของ Environment ที่นี่)
・ProtocolInfo: ◉ HTTP only
Default cache behavior
Viewer
・Viewer protocol policy: ◉ Redirect HTTP to HTTPS
・Allowed HTTP methods: ◉ GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
Cache key and origin requests
・Cache policy: CachingDisabled
・Origin request policy - optional: AllViewer
Web Application Firewall (WAF)
・เลือก Do not enable security protections
Settings
・Alternate domain name (CNAME) - optional: คลิก Add item และป้อน Domain name ที่สร้าง Certificate SSL ใน ACM เช่น tinnakorn-single.cmth.link
・Custom SSL certificate - optional: tinnakorn-single.cmth.link (เลือก Certificate ที่สร้างไว้ตอนแรก)
เลื่อนลงมาด้านล่างสุดแล้วทำตามนี้
・Description - optional: tinnakorn-single.cmth.link (จะป้อนหรือไม่ป้อนก็ได้)
・แล้วคลิก Create distribution
หมายเหตุ: การตั้งค่าที่ไม่ได้อธิบายทั้งหมดนี้จะใช้ค่าเริ่มต้น
เมื่อสร้างเสร็จแล้วรอการ Deploying สักครู่ เมื่อเสร็จแล้วสถานะ Last modified จะแสดง datetime ปัจจุบันแบบนี้
จากนั้นให้คัดลอก Distribution domain name ไปทดสอบในหน้าเว็บบราวเซอร์
ถ้าแสดงผลได้ปกติให้นำ Distribution domain name นี้ไปใช้ในการ Create record ใน Route 53 ในขั้นตอนถัดไป
สร้าง Route 53
เข้ามาที่ [Service Route 53 ＞ Hosted zones ＞ cmth.link] คลิก Create record
การตั้งค่าหัวข้อ Quick create record:
・Record name: tinnakorn-single (ป้อนชื่ออะไรก็ได้)
・Route traffic to: คลิกปุ่ม Alias เพื่อเปิดใช้งาน และเลือก Alias to CloudFront distribution
・วาง Distribution domain name ที่ Copy มาจาก Cloudfront เช่น xxxxxxxx.cloudfront.net (หากมี https:// ให้ลบออก)
・คลิก Create records
เมื่อเสร็จแล้ว ค้นหา Record name ของเรา ก็จะแสดงหน้าจอแบบนี้
ต่อไปให้คัดลอก Record name นี้เพื่อนำไปทดสอบแสดงผลในหน้าเว็บบราวเซอร์ในขั้นตอนถัดไป
ทดสอบ Record name
Record name ที่จะทดสอบคือ
https://tinnakorn-single.cmth.link/หน้าจอนี้คือหน้าจอเริ่มต้นของ "Application code: Sample application" ใน Elastic Beanstalk
สรุป
เราสามารถเพิ่มความปลอดภัยในการใช้งานเว็บไซต์ที่ทำงานบน Elastic Beanstalk ได้โดยเชื่อมโยง Domain ของ Elastic Beanstalk ใน CloudFront และเปลี่ยนชื่อ Distribution domain name ของ CloudFront ด้วย Route 53 และ สร้าง Certificate SSL เพื่อขอใบรับรองใน AWS Certificate Manager (Region: N.Virginia เท่านั้น) ให้กับ Route 53 เมื่อทำตามวิธีดังกล่าวจะทำให้เว็บไซต์ที่สร้างด้วย Elastic Beanstalk เป็น HTTPS และมีความปลอดภัยในการใช้งานครับ
ผมหวังว่าบทความนี้จะเป็นประโยชน์ให้กับผู้อ่านได้นะครับ
POP (Tinnakorn Maneewong) จากบริษัท Classmethod (Thailand) ครับ !
16
