Configure a static website using S3 Bucket

Prerequisite

• มียอดคงเหลือใน project มากกว่า 0 บาท (ขั้นตอนการเติมเงินเข้าสู่ project)

• ต้องมี bucket สร้างเอาไว้แล้ว (ขั้นตอนในการสร้าง bucket)

• สร้าง bucket policy ให้มีสิทธิ์เข้าถึง (ขั้นตอนในการสร้าง bucket policy)

Instructions

1. Upload file สำหรับทำ static website

ทำการ put file ขึ้นบน s3 ในที่นี้จะใช้ root path

s3cmd put ${OBJECT} s3://${BUCKET_ENDPOINT}/${PATH_TO_FILE} --acl-public

example command:

s3cmd put index.html s3://test-static-website/ --acl-public

Note: flag --acl-public จะเป็นการ grant file ให้ Everyone สามารถ read ได้เท่านั้น

run command s3cmd ls เพื่อ check ว่า file ถูก upload แล้ว

s3cmd ls s3://${BUCKET_ENDPOINT}/${PATH_TO_FILE}

example command:

s3cmd ls s3://test-static-website/

example result:

2024-07-24 05:28 139 s3://test-static-website/index.html

2. Configure static website

เข้าไปที่ NIPA cloud portal - Object Storage - Buckets - Action - Enable

ทำการ Configure Index Document (Require) และ Error Document (Optional)

• Index Document คือ path ของ index.html ในที่นี้จะใช้ที่ root path (index.html)

• Error Document คือ path ของ error.html ในที่นี้จะใช้ที่ root path (error.html)

เมื่อดำเนินการ configure เรียบร้อยแล้ว ให้กด Confirm แล้วจะมีหน้าต่างขึ้นมา ให้ทำการ copy Website Endpoint

จากนั้นลองเข้า url ที่ copy มาจาก Website Endpoint

example result:

การใช้งานด้วย Domain อื่นๆ ด้วยวิธีการ MAP CNAME

หลังจากที่ host website บน object storage bucket เรียบร้อยแล้ว และมี domain ที่ต้องการให้ user ใช้ในการเข้าถึง ผ่าน browser เราสามารถทำโดยวิธี map cname มายัง Target domain ของ bucket ได้

เมื่อทดสอบเข้าผ่าน domain หลักจะพบว่า domain สามารถใช้งานได้ และผ่าน protocal https เรียบร้อยแล้ว เนื่องจากระบบ PROXY ของ NIPA Cloud มีการทำ auto-generate-ssl สำหรับ bucket อัตโนมัติ

Troubleshooting

Error 404 Not found

สาเหตุ: Index Document หา index.html file หรือ Dependencies file ไม่เจอ

วิธีแก้ไขปัญหา: Check path ที่ได้ put file จาก Cyberduck หรือ s3cmd CLI ว่า path ถูกต้องหรือไม่

Error 403 Access denied

สาเหตุ: Permission public read หายไป ทำให้ไม่สามารถอ่าน file ได้

วิธีแก้ไขปัญหา: Check file permission ด้วยการ right click - Info - Permissions - Everyone ต้องเป็น READ

ถ้าหากไม่เป็นดังรูป ให้ทำการ put file ผ่าน s3cmd CLI ด้วย flag --acl-public แล้วตรวจสอบอีกครั้ง

Error พบ file css, js แล้ว แต่ Content type เป็น text/plain

สาเหตุ: ไม่ได้มีการให้ mime detect content type ผ่าน s3cmd CLI

วิธีแก้ไขปัญหา: ถ้าหากพบว่า Content-Type ไม่ตรงกับ file ที่ได้ upload เอาไว้ เช่น application/javascript ได้เป็น text/plain

ให้ทำใส่ flag ดังนี้ที่ s3cmd CLI --guess-mime-type --no-mime-magic