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

Amazon S3 เป็นบริการพื้นที่จัดเก็บที่มีความปลอดภัยในการใช้งานสูง สามารถอัปโหลดข้อมูลที่เราต้องการเข้าไปได้ นอกจากนี้เรายังสามารถแก้ไขข้อมูลและ Deploy ขึ้นไปที่ S3 Bucket ผ่าน CloudBerry Explorer ได้อีกด้วย

#Classmethod Thailand

#Thai Language

#AWS

#AWS-Thai

#Amazon S3

Tinnakorn Maneewong

2022.02.10

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

ครั้งนี้จะมาแนะนำวิธีการอัปโหลดข้อมูลไปยัง 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

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

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

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

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

การสร้าง Policies

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

คลิกCreate Policy
create_iam-1

※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": [
                "*"
            ]
        }
    ]
}

create_iam-2

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

※Step ②
คลิกNext: Review
create_iam-4

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

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

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

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

การสร้าง Users

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

คลิกAdd users
create_iam-9

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

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

※Step ③
คลิกNext: Review
create_iam-12

※Step ④
คลิกCreate user
create_iam-13

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

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

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

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

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

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

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

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

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

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

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

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

คลิกClose
use_cloudBerry-6

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

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

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

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

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

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

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

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

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

คลิกYes
use_cloudBerry-14

คลิกYes
use_cloudBerry-15

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

สรุป

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