การอัปโหลดข้อมูลไปยัง Amazon S3 ด้วย CloudBerry Explorer

ครั้งนี้จะมาแนะนำวิธีการอัปโหลดข้อมูลไปยัง Amazon S3 ด้วย CloudBerry Explorer ต่อจากบทความ How To Static Website EP2: การเก็บข้อมูลเว็บไซต์ลงบน Amazon S3 เพื่อให้ไปแสดงผลผ่าน Amazon CloudFront

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

ต้องทำการสร้างและอัปโหลดข้อมูลไปยัง S3 Bucket ก่อน จากนั้นก็แสดงผลด้วย CloudFront สามารถดูวิธีการทำได้ที่ลิงก์ด้านล่างนี้

• How To Static Website EP2: การเก็บข้อมูลเว็บไซต์ลงบน Amazon S3 เพื่อให้ไปแสดงผลผ่าน Amazon CloudFront

เมื่อทำขั้นตอนด้านบนนี้เสร็จแล้ว ก็จะได้หน้าตาแบบนี้

การสร้าง Policies กับ Users ใน IAM

เราจะทำการสร้าง Policies กับ Users เพื่อนำไปใช้ในการ Login เข้ามายัง Amazon S3 ผ่าน CloudBerry Explorer

เข้ามาที่ Service IAM โดยค้นหา?︎ IAM» เลือกIAM

การสร้าง Policies

มาที่เมนูด้านซ้าย เลือกPolicies

คลิกCreate Policy

※Step ①
เลือกJSONแล้ววาง Code ด้านล่างนี้

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": "s3:*",
            "Resource": [
                "arn:aws:s3:::your_name_s3_bucket",
                "arn:aws:s3:::your_name_s3_bucket/*"
            ]
        },
        {
            "Effect": "Deny",
            "Action": [
                "s3:DeleteBucket",
                "s3:CreateBucket"
            ],
            "Resource": [
                "*"
            ]
        }
    ]
}

ดูที่ "Resource" ให้เปลี่ยนเป็นชื่อ S3 Bucket ของคุณ ตัวอย่างนี้คือs3-cf-chawish-web
จากนั้นคลิกNext: Tags

※Step ②
คลิกNext: Review

※Step ③
Name*:s3-cf-chawish-web-policy(ชื่ออะไรก้ได้)

เลื่อนลงมาด้านล่างสุด คลิกCreate policy

ค้นหาชื่อ Policy ของคุณ เช่นs3-cf-chawish-web-policy+ Enter แล้วคลิกเข้าไป

เราสามารถดูข้อมูล Policy ของเราได้ที่หน้านี้

การสร้าง Users

มาที่เมนูด้านซ้าย เลือกUsers

คลิกAdd users

※Step ①
การตั้งค่า Set user details นี้คือ:
» User name*:s3-cf-chawish-web-user(ชื่ออะไรก้ได้)
» Select AWS credential type*: Check✅Access key - Programmatic access
» คลิกNext: Permissions

※Step ②
การตั้งค่า Set permissions นี้คือ:
» เลือกAttach existing policies directly
» ค้นหา policies ของคุณ เช่น?︎ s3-cf-chawish-web-policy
» Check✅▶ s3-cf-chawish-web-policy
» คลิกNext: Tags

※Step ③
คลิกNext: Review

※Step ④
คลิกCreate user

※Step ⑤
เมื่อสร้าง User เสร็จเรียบร้อยแล้ว จะได้ Access key ID กับ Secret access key แบบนี้
!แนะนำให้ Copy แล้วเก็บไว้ที่ Notepad ของเราไว้

การดาวน์โหลดโปรแกรม CloudBerry Explorer

ก่อนอื่นต้องติดตั้งโปรแกรม CloudBerry Explorer ก่อน
สามารถดาวน์โหลดได้ที่ลิงก์: Download CloudBerry Explorer

เมื่อมาที่หน้า CloudBerry Explorer แล้ว ให้คลิกFree Download*ได้เลย

ใส่ Email* ของคุณ และคลิกDownload

เมื่อดาวน์โหลดไฟล์ CloudBerry Explorer เสร็จแล้ว ดูที่ Activation แนะนำให้ Copy code มาเก็บไว้ที่ Notepad ของเรา เพราะจะต้องใช้ตอนเข้าโปรแกรมครั้งแรก จากนั้นทำการติดตั้งโปรแกรมได้เลย

การ Login เข้าไปยัง Amazon S3 ผ่าน CloudBerry Explorer

เมื่อติดตั้งโปรแกรม CloudBerry Explorer เรียบร้อยแล้ว คลิกที่ Icon ได้เลย

※ในกรณีเข้าใช้งานครั้งแรกสามารถทำตามตัวอย่างได้เลย

เมื่อคลิกที่ Icon แล้ว เลือกFreeware edition ✓และคลิกNext

ใส่ Code ที่ Copy มาตอนที่ดาวน์โหลดโปรแกรมเสร็จ แล้วคลิกStart Freeware

เมื่อเข้ามาที่โปรแกรม CloudBerry Explorer แล้วดูที่ Popup จากนั้นดับเบิ้ลคลิกที่Amazon S3

ทำการ Login ดังนี้:
» Display name:s3-cf-chawish-web(ใส่ชื่ออะไรก็ได้ แนะนำให้เป็นชื่อเดียวกับ S3 Bucket)
» Access key:your_Access_key
» Secret key:your_Secret_key
» คลิกOK

คลิกClose

เมื่อ　Login เข้ามาได้แล้ว จะได้หน้าตาแบบนี้
ด้านซ้ายคือที่เก็บข้อมูลเครื่องคอมพิวเตอร์ของเรา และด้านขวาคือหน้าที่เราจะ Remote ไปยัง Amazon S3

มาที่ด้านขวา เลือก Source เป็นชื่อ Display name ของเรา เช่นs3-cf-chawish-web

ช่องถัดมา ตอนแรกจะเป็น Root ทีนี้ให้คลิกลงไปเลย แล้วใส่ชื่อ S3 Bucket ของเราลงไป

จะเห็นว่าเราเข้ามายัง S3 Bucket ของเราได้แล้ว โดยสามารถตรวจสอบได้จากหน้า S3 Bucket ของเรา

การแก้ไขไฟล์และ Deploy ข้อมูลขึ้นไปยัง S3 Bucket

ในส่วนนี้จะเป็นการแก้ไฟล์ index.html และ Deploy ไปยัง S3 Bucket ผ่าน CloudBerry Explorer

ผมจะลองแก้ไฟล์ index.html โดยลากไฟล์ลงไปที่ Visual Studio Code
จริงๆ แล้วเราสามารถนำไฟล์ไปแก้ใน Nodepad ได้เหมือนกัน เพื่อให้ง่ายต่อการสาธิตผมจะใช้โปรแกรมนี้

จากนั้นจะทำการเปลี่ยนข้อความจากactivityให้เป็นactivities

เมื่อแก้ไขเสร็จเรียบร้อยแล้วให้ลากไฟล์index.htmlลงไปที่ Remote ของ S3 Bucket

คลิกYes

คลิกYes

มาที่หน้าเว็บไซต์ แล้ว Reload อีกครั้ง จะเห็นว่ายังไม่มีการเปลี่ยนแปลง เพราะว่าเว็บไซต์นี้ใช้งาน CloudFront ในการแสดงผล ซึ่ง CloudFront เป็นเว็บ Cache Server โดยจะทำการดึง Cache file ที่ทำการ Backup ไว้จากข้อมูลจริงมาแสดงผลแทน เพื่อให้เกิดความเร็วและประสิทธิภาพในการใช้งานมากขึ้น เนื่องจากมี Cache file ที่เตรียมพร้อมที่จะเปิดใช้งานอยู่แล้ว ไม่จำเป็นต้องดึงข้อมูลจริงที่อยู่ใน Server มาแสดง นั่นคือสาเหตุที่ Deploy file ใหม่เข้าไปแล้ว ตัวเว็บไซต์ก็ยังแสดงข้อมูลเดิม ไม่ใช่ข้อมูลล่าสุดนั่นเอง

สรุป

ในการสาธิตการอัปโหลดข้อมูลไปยัง Amazon S3 ด้วย CloudBerry Explorer ก็จบเป็นที่เรียบร้อยแล้ว โดยเราทำการสร้าง Amazon S3 แล้วอัปโหลดข้อมูลลงไป จากนั้นก็ใช้ CloudFront ในการแสดงผล แล้วก็ทำการสร้าง Policies กับ User ใน IAM เพื่อใช้ในการ Login เข้ามายัง Amazon S3 ผ่าน CloudBerry Explorer เพียงเท่านี้ก็จะทำให้สามารถ Remote เข้ามายัง S3 Backet และทำการ Deploy ข้อมูลได้ตามต้องการ

บทความที่เกี่ยวข้อง

• Amazon S3 คืออะไร? การแนะนำฟังก์ชันล่าสุดของ AWS ในปี 2022
• เชื่อมต่อ Amazon S3 ด้วย WinSCP
• How To Static Website EP2: การเก็บข้อมูลเว็บไซต์ลงบน Amazon S3 เพื่อให้ไปแสดงผลผ่าน Amazon CloudFront
• How To Static Website EP3: เปลี่ยนชื่อ Domain Name (ชื่อเว็บไซต์) ง่าย ๆ ด้วย Amazon Route 53 และ AWS Certificate Manager พร้อมสอนการสร้าง SSL