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:

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