การตั้งค่า Hostname (Domain) และ SSL ใน Amazon Lightsail

สวัสดีครับ POP จากบริษัท Classmethod (Thailand) ครับ

เป้าหมาย

ครั้งนี้จะมาทำการตั้งค่า Hostname (Domain) และ SSL ใน Amazon Lightsail

ข้อกำหนดเบื้องต้น

การตั้งค่าในบทความนี้ต้องสร้าง Function หลายอย่างใน Service Amazon Route 53 และ Amazon Lightsail โดยมีการตั้งชื่อ Function ต่างๆดังนี้

Service: Amazon Route 53

Service: Amazon Lightsail

สิ่งที่ต้องมี

※เปิดใช้งาน WordPress ด้วย Amazon Lightsail แล้ว (ดูตัวอย่างได้ที่ลิงก์ด้านล่างนี้)

การซื้อ Domain บน Route 53

ครั้งนี้ผมได้ซื้อ Domain บน Route 53 ที่ชื่อว่า cmth-train-ls.link ล่วงหน้าไว้แล้ว

การจดทะเบียน Domain อาจใช้เวลาถึง 3 วันจึงจะเสร็จสมบูรณ์

ดูตัวอย่างการซื้อ Domain บน Route 53 ตามลิงก์ด้านล่างนี้

การสร้าง DNS Zone

เข้ามาที่ Service Amazon Lightsail แล้วเลือกแท็บ Domains ＆ DNS จะเห็นว่ามี Registered domains ที่ซื้อไว้ล่วงหน้าแสดงอยู่ด้านล่าง ทีนี้ให้คลิกที่ Create DNS zone

เลื่อนลงมาด้านล่างที่หัวข้อ Domain configuration แล้วตั้งค่าดังนี้
» Domain source: ◎ Use a domain that is registered with Amazon Route 53
» Domain: เลือก Domain ที่ซื้อไว้ล่วงหน้า เช่น cmth-train-ls.link
» แล้วคลิก Create DNS zone

เมื่อสร้างเสร็จแล้วจะแสดงหน้าจอแบบนี้

การตั้งค่า Registered domains

กลับไปที่หน้าแรกของ Amazon Lightsail โดยคลิกแท็บ Home ด้านบนซ้าย แล้วเลือกแท็บ Domains ＆ DNS อีกครั้ง
แล้วเลื่อนลงมาด้านล่างที่หัวข้อ Registered domains แล้วคลิก Domain ที่ซื้อไว้ล่วงหน้า เช่น cmth-train-ls.link

ให้เลื่อนลงมาด้านล่างสุด แล้วคลิก Edit name servers ในหัวข้อ Name servers

หากแสดง "✅ Using Lightsail name servers" แบบนี้ ให้ทำขั้นตอนถัดไปได้เลย

*แต่ถ้าไม่แสดงแบบนี้ ให้คลิก Use Lightsail name servers แล้วจะมีป๊อปอัพแสดงขึ้นมาถามว่า "Replace name server?" ให้คลิก Yes, replace และคลิก Save เพียงเท่านี้การตั้งค่า Registered domains ก็จะเสร็จสิ้น

กลับมาที่หน้า DNS Zone ที่สร้างไว้เมื่อสักครู่นี้ โดยคลิกแท็บ Home ด้านบนซ้าย แล้วเลือกแท็บ Domains ＆ DNS แล้วคลิก DNS zone ของเราในหัวข้อ DNS zone เช่น cmth-train-ls.link
ก็จะเห็นว่า Domain ของเราแสดงอยู่ในหัวข้อ Domain แบบนี้ ครั้งนี้คือ Domain: cmth-train-ls.link เพียงเท่านี้เราก็สามารถใช้ DNS zone นี้เพื่อจัดการ Domain ของเราได้แล้ว

การใช้ Distribution เพื่อใช้ SSL

เข้าไปที่แท็บ Networking โดยคลิกแท็บ Home ด้านบนซ้าย
แล้วเลือกแท็บ Networking แล้วคลิกปุ่ม Create distribution

มาที่หัวข้อ Choose your origin แล้วตั้งค่าตามนี้
» เปลี่ยนรีเจี้ยนตรงคำว่า "! You have no available origins in Virginia ⌵ (us-east-1)." ให้ตรงกับที่เราสร้าง Instance ไว้ ครั้งนี้คือ Singapore
» เลือก Instance ของเรา
» คลิก Yes, apply ก็จะได้ทั้ง Static IP และ Instance แบบนี้

ต่อไปหัวข้อ Caching behavior ให้เลือก Presets ที่เหมาะสม
・ถ้าเป็น Web แบบคงที่(Static): Best for static content
・ถ้าเป็น Web แบบไดนามิก(Dynamic): Best for dynamic content
・ถ้าเป็น WordPress: Best for WordPress (← ครั้งนี้จะเลือกอันนี้ เนื่องจากใช้งาน WordPress)

ต่อไปหัวข้อ Choose your distribution plan
ให้เลือกปริมาณการถ่ายโอนข้อมูล(Data transfer) ที่ต้องการ ครั้งนี้จะเลือก 50 GB/month(ใช้งานได้ฟรีใน 1 ปีแรก)

ต่อไปหัวข้อ Identify your distribution
ให้ป้อนชื่อ Distribution ที่ต้องการ ครั้งนี้คือ tinnakorn-wordpress-dist แล้วคลิก Create distribution

เมื่อตั้งค่าเสร็จแล้วจะแสดงหน้าจอแบบนี้ โดยมี Status: In progress... (กำลังเริ่มต้นเปิดใช้งาน Distribution) และ Default domain แสดงอยู่ด้านขวาบน
สำหรับ Status ไม่ต้องรอจนเสร็จก้ได้ ให้เริ่มทำขั้นตอนถัดไปได้เลย

การตั้งค่า Distribution

เลือกแท็บ Custom domains แล้วคลิก I understand, continue (การตั้งค่าครั้งแรกจะแสดงหน้าจอแบบนี้)

แล้วคลิก + Create certificate ในหัวข้อ Attached certificates

เมื่อมีป๊อปอัพ Create certificate แสดงขึ้นมา ให้ป้อน Certificate name ที่ต้องการ ครั้งนี้คือ tinnakorn-wordpress-ssl แล้วคลิก Continue

แล้วป้อน domains or subdomains ที่ต้องการโดยสามารถระบุได้ถึง 10 domains or subdomains ครั้งนี้คือ tinnakorn-wordpress.cmth-train-ls.link แล้วคลิก Create certificate

คลิก Continue

แล้วรอ Pending certificates (1) สักครู่ ซึ่งจะแสดง Status: Attempting to validate your certificate… ใน Certificate ของเราแบบนี้ (หลังจากผ่านไปสัก 1-2 นาทีแล้วถ้ายังแสดงหน้าจอแบบเดิมอยู่ แนะนำให้ Reload หน้าเว็บไซต์)

แล้วคลิก Attach certificate (1 available) แล้วเลือก Certificate ที่สร้างเมื่อสักครู่นี้ ครั้งนี้คือ Select a certificate: tinnakorn-wordpress-ssl แล้วคลิก Attach

คลิก I understand

เมื่อเสร็จแล้วจะแสดง Status: ✅ Valid, in use อยู่ใน Certificate ของเราแบบนี้

การตั้งค่า DNS Zone

ไปที่หน้า DNS Zone โดยคลิกแท็บ Home ด้านบนซ้าย แล้วเลือกแท็บ Domains ＆ DNS แล้วคลิก DNS zone ของเราในหัวข้อ DNS zone เช่น cmth-train-ls.link

แล้วเลือกแท็บ Assignments แล้วคลิก + Add assignment ในหัวข้อ Domain assignments

แล้วตั้งค่า Assignments ตาม domain name ของเราดังนี้
» Select a domain name: แนะนำให้ป้อนชื่อเหมือนกับตอนที่ตั้งค่า domains or subdomains เช่น tinnakorn-wordpress.cmth-train-ls.link
» Select a resource: เลือก Distribution ที่สร้างไว้ก่อนหน้านี้ ครั้งนี้คือ tinnakorn-wordpress-dist
» แล้วคลิก Assign

เมื่อ Assign เสร็จแล้วจะแสดงหน้าจอแบบนี้ แล้วให้คัดลอก Record name เพื่อใช้ทดสอบในขั้นตอนถัดไป ครั้งนี้คือ tinnakorn-wordpress.cmth-train-ls.link (Record name นี้ผมจะเรียกว่า Hostname ในขั้นตอนถัดไป)

การทดสอบ Hostname

ตรวจสอบว่า Instance สามารถเข้าถึงจากเว็บเบราว์เซอร์โดยใช้ Hostname ได้หรือไม่ โดยเปิด URL บนเว็บเบราว์เซอร์ที่เราใช้งานตามนี้

https://[Hostname]/

ถ้าแสดงหน้าจอแบบนี้ถือว่าการเข้าถึงหน้าจอผู้ใช้งาน WordPress สำเร็จ

การตั้งค่าเพิ่มเติมสำหรับ WordPress Instance

โดยปกติการตั้งค่าจะเสร็จสมบูรณ์ที่จุดนี้ แต่กรณีที่จะใช้ WordPress เราต้องตั้งค่าเพิ่มเติมอีกนิดน่อย

ทีนี้มาลองทดสอบเข้าถึงหน้าจอผู้ดูแลระบบ WordPress กันบ้าง
เปิด URL บนเว็บเบราว์เซอร์ที่เราใช้งานตามนี้

https://[Hostname]/wp-admin/

จะเห็นว่าทั้งหน้าจอผู้ใช้งานและหน้าจอผู้ดูแลระบบ WordPress แสดงผลผิดปกติ เนื่องจาก CSS ไม่ถูกโหลดบน Hostname อย่างถูกต้อง ดังนั้นเราต้องทำการตั้งค่า URL ของ Website ใน WordPress ในขั้นตอนถัดไป

การตั้งค่า URL ของ Website ใน WordPress

ก่อนเริ่มทำการตั้งค่า ให้เราเชื่อมต่อเข้าไปใน Instance โดยเข้าไปหน้า Instance ของเรา
แล้วคลิก Connect using SSH ในหัวข้อ Connect to your instance (หากเชื่อมต่อกับ Instance อยู่แล้ว ให้ข้ามขั้นตอนนี้ไปได้เลย)

เมื่อ Terminal เปิดขึ้นมาแล้ว ให้รันคำสั่งนี้เพื่อเข้าไปยังโฟลเดอร์ wordpress

cd /opt/bitnami/wordpress/

แล้วรันคำสั่งนี้เพื่อดูข้อมูลในโฟลเดอร์ wordpress ไฟล์ที่เราจะตั้งค่านั้นคือ wp-config.php

ls -la

tinnakorn-wordpress - Terminal | Lightsail - Google Chrome

bitnami@ip-xxx-xxx-xxx-xxx:/opt/bitnami/wordpress$ ls -la
total 236
drwxrwxr-x  6 bitnami daemon  4096 Jan 24 08:12 .
drwxr-xr-x 20 root    root    4096 Jan 24 08:12 ..
-rw-rw-r--  1 bitnami daemon     0 Dec 15 12:12 .buildcomplete
-rw-rw-r--  1 bitnami daemon   405 Dec 15 12:12 index.php
drwxrwxr-x  2 bitnami daemon  4096 Dec 15 12:21 licenses
-rw-rw-r--  1 bitnami daemon 19915 Dec 15 12:12 license.txt
-rw-rw-r--  1 bitnami daemon  7389 Dec 15 12:12 readme.html
drwxrwxr-x  2 bitnami daemon  4096 Dec 15 14:38 tmp
-rw-rw-r--  1 bitnami daemon  7205 Dec 15 12:12 wp-activate.php
drwxrwxr-x  9 bitnami daemon  4096 Dec 15 12:21 wp-admin
-rw-rw-r--  1 bitnami daemon   351 Dec 15 12:12 wp-blog-header.php
-rw-rw-r--  1 bitnami daemon  2338 Dec 15 12:12 wp-comments-post.php
lrwxrwxrwx  1 root    root      32 Jan 24 08:12 wp-config.php -> /bitnami/wordpress/wp-config.php
-rw-rw-r--  1 bitnami daemon  3001 Dec 15 12:12 wp-config-sample.php
lrwxrwxrwx  1 root    root      29 Jan 24 08:12 wp-content -> /bitnami/wordpress/wp-content
-rw-rw-r--  1 bitnami daemon  5543 Dec 15 12:12 wp-cron.php
drwxrwxr-x 27 bitnami daemon 12288 Dec 15 12:21 wp-includes
-rw-rw-r--  1 bitnami daemon  2494 Dec 15 12:12 wp-links-opml.php
-rw-rw-r--  1 bitnami daemon  3985 Dec 15 12:12 wp-load.php
-rw-rw-r--  1 bitnami daemon 49135 Dec 15 12:12 wp-login.php
-rw-rw-r--  1 bitnami daemon  8522 Dec 15 12:12 wp-mail.php
-rw-rw-r--  1 bitnami daemon 24587 Dec 15 12:12 wp-settings.php
-rw-rw-r--  1 bitnami daemon 34350 Dec 15 12:12 wp-signup.php
-rw-rw-r--  1 bitnami daemon  4914 Dec 15 12:12 wp-trackback.php
-rw-rw-r--  1 bitnami daemon  3236 Dec 15 12:12 xmlrpc.php
bitnami@ip-xxx-xxx-xxx-xxx:/opt/bitnami/wordpress$

รันคำสั่งนี้เพื่อแก้ไขเนื้อหาในไฟล์ wp-config.php

nano /opt/bitnami/wordpress/wp-config.php

เมื่อเข้ามาในไฟล์ wp-config.php แล้ว ให้แก้ไขตามนี้
» เลื่อนลงมาเกือบด้านล่างสุดที่คำว่า /* That's all, stop editing! Happy publishing. */
» แล้ววาง Code นี้ด้านบนของคำที่ค้นหา

# เปิดใช้งาน HTTPS ให้สามารถเข้าใช้งานเว็บไซต์ได้
$_SERVER['HTTPS'] = 'on';

» และแก้ไข WP_HOME และ WP_SITEURL ตาม Hostname ของเรา (Hostname นี้เป็นแค่ตัวอย่าง)

# การตั้งค่าที่อยู่ WordPress ที่เป็นส่วนของหน้าผู้ดูแลระบบ
define( 'WP_HOME', 'https://tinnakorn-wordpress.cmth-train-ls.link/' );

# การตั้งค่า URL ของเว็บไซต์ หรือระบบหลังบ้านของ WordPress
define( 'WP_SITEURL', 'https://tinnakorn-wordpress.cmth-train-ls.link/' );

[↓ ผลลัพธ์ ↓] เมื่อได้ตามผลลัพธ์แล้วให้ Save โดยกดปุ่ม Ctrl+X ตามด้วยกดปุ่ม Y เพื่อ Save แล้วกดปุ่ม Enter

tinnakorn-wordpress - Terminal | Lightsail - Google Chrome

"...ไม่ได้แสดงโค้ดส่วนบน..."

if ( defined( 'WP_CLI' ) ) {
$_SERVER['HTTP_HOST'] = '127.0.0.1';
}

define( 'WP_HOME', 'https://tinnakorn-wordpress.cmth-train-ls.link/' );
define( 'WP_SITEURL', 'https://tinnakorn-wordpress.cmth-train-ls.link/' );
define( 'WP_AUTO_UPDATE_CORE', 'minor' );

$_SERVER['HTTPS'] = 'on';

/* That's all, stop editing! Happy publishing. */


/** Absolute path to the WordPress directory. */

if ( ! defined( 'ABSPATH' ) ) {

define( 'ABSPATH', __DIR__ . '/' );

}

"...ไม่ได้แสดงโค้ดส่วนล่าง..."

การทดสอบ Hostname หลังการตั้งค่า WordPress

เปิด URL บนเว็บเบราว์เซอร์ที่เราใช้งานตามนี้เพื่อเข้าไปยังหน้าจอผู้ใช้งาน WordPress อีกครั้ง

https://[Hostname]/

จะเห็นว่าแสดงผลหน้าจอปกติแล้ว

เปิด URL บนเว็บเบราว์เซอร์ที่เราใช้งานตามนี้เพื่อเข้าไปยังหน้าจอผู้ดูแลระบบ WordPress อีกครั้ง

https://[Hostname]/wp-admin/

จะเห็นว่าทั้งหน้าจอผู้ใช้งานและหน้าจอผู้ดูแลระบบ WordPress แสดงผลปกติแล้ว จากนั้นให้ทำการ Login

เพียงเท่านี้การตั้งค่าก็เสร็จสมบูรณ์และเราก็สามารถใช้งาน WordPress ได้ด้วย Hostname ที่มีความปลอดภัยและมีความน่าเชื่อถือแล้ว

สุดท้ายนี้

การตั้งค่า Hostname (Domain) และ SSL ใน Amazon Lightsail นี้มีกระบวนการทำงานเหมือนกับการตั้งค่า Free SSL กับ DNS ใน CloudFront โดยใช้ ACM กับ Route 53 แต่วิธีการเริ่มต้นระบบและการตั้งค่าต่างๆ จะแตกต่างกันบางส่วน

สำหรับผู้ที่สนใจเกี่ยวกับการติดตั้ง WordPress ใน Amazon Linux 2 และตั้งค่า Domain โดยใช้ Route 53 ให้ดูที่บทความด้านล่างนี้โดยเรียงตามลำดับได้เลย

ฟังก์ชัน Distribution ของ LightSail เป็นฟังก์ชันเหมือนกับ CloudFront (รายการที่สามารถตั้งค่าได้ถูกละเว้นบางส่วน)

หากต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับ CloudFront แนะนำให้อ่านบทความด้านล่างนี้

ผมหวังว่าบทความนี้จะเป็นประโยชน์ให้กับผู้อ่านได้นะครับ

POP จากบริษัท Classmethod (Thailand) ครับ !

Link อ้างอิง

• การเปิดใช้งาน WordPress ด้วย Amazon Lightsail
• วิธีการซื้อ Domain บน Route 53
• วิธีการเชื่อมต่อจาก WinSCP ไปยัง Lightsail