# Configure a static website using S3 Bucket

## Prerequisite

* มียอดคงเหลือใน project มากกว่า 0 บาท ([ขั้นตอนการเติมเงินเข้าสู่ project](https://docs-epc.gitbook.io/ncs-documents/nipa-cloud-space-overview/billing-and-wallet/topup-a-project-wallet))
* ต้องมี bucket สร้างเอาไว้แล้ว ([ขั้นตอนในการสร้าง bucket](https://docs-epc.gitbook.io/ncs-documents/storage/object-storage-s3/create-an-object-storage-bucket))
* สร้าง bucket policy ให้มีสิทธิ์เข้าถึง ([ขั้นตอนในการสร้าง bucket policy](https://docs-epc.gitbook.io/ncs-documents/storage/object-storage-s3/create-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
```

{% hint style="info" %}
Note: flag --acl-public จะเป็นการ grant file ให้ Everyone  สามารถ read ได้เท่านั้น
{% endhint %}

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

<figure><img src="https://1352697161-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq2BYmWTMiaonrEL8QBP2%2Fuploads%2FApKRzCsIzZUMXFkJk1IJ%2Fimage.png?alt=media&#x26;token=27ef25a3-f808-4ee9-b5ef-3e0b0d6a15e8" alt=""><figcaption></figcaption></figure>

ทำการ 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)

<figure><img src="https://1352697161-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq2BYmWTMiaonrEL8QBP2%2Fuploads%2FWiY30oP2xfO5taigVuEj%2Fimage.png?alt=media&#x26;token=63425d01-1f28-4768-b155-5b32d5a01a15" alt="" width="375"><figcaption></figcaption></figure>

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

<figure><img src="https://1352697161-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq2BYmWTMiaonrEL8QBP2%2Fuploads%2FKwAalY7dHGYCDK1M013F%2Fimage.png?alt=media&#x26;token=15f76d35-1f71-4a6b-9b1b-0147c9bdadde" alt="" width="375"><figcaption></figcaption></figure>

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

**example result:**

<figure><img src="https://1352697161-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq2BYmWTMiaonrEL8QBP2%2Fuploads%2FA9AaQMIFydG3jXnl3ZPA%2Fimage.png?alt=media&#x26;token=f8d35a82-9411-4704-beb7-f15cdcd5125f" alt="" width="333"><figcaption></figcaption></figure>

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

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

<figure><img src="https://1352697161-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq2BYmWTMiaonrEL8QBP2%2Fuploads%2FrEsUHMlynMfD9ONr18m9%2Fimage.png?alt=media&#x26;token=bc4b1d5e-80aa-4ca1-9e11-bbbbdb747024" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1352697161-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq2BYmWTMiaonrEL8QBP2%2Fuploads%2FapGOTA1BuyLDc7888yLl%2Fimage.png?alt=media&#x26;token=30a6f3a6-a45b-4556-aac2-6c3f3f6491ec" alt=""><figcaption></figcaption></figure>

## Troubleshooting

### Error 404 Not found

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

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

<figure><img src="https://1352697161-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq2BYmWTMiaonrEL8QBP2%2Fuploads%2FqghRZfTuNlHh3bdm8vHU%2Fimage.png?alt=media&#x26;token=90af1d3f-b6a5-4c46-90d0-32be3a0d55a4" alt="" width="375"><figcaption></figcaption></figure>

### Error 403  Access denied

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

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

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

<figure><img src="https://1352697161-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq2BYmWTMiaonrEL8QBP2%2Fuploads%2FrrXq50FcYTTAfdnPWJnx%2Fimage.png?alt=media&#x26;token=b6f7fd07-749b-4b04-8235-22807f9a9561" alt="" width="375"><figcaption></figcaption></figure>

<figure><img src="https://1352697161-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq2BYmWTMiaonrEL8QBP2%2Fuploads%2FGQp4IZfuH7ywPPDq09oV%2Fimage.png?alt=media&#x26;token=09494c3a-bd35-4b81-abbd-1605bc8f5883" alt="" width="375"><figcaption></figcaption></figure>

### 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`

<figure><img src="https://1352697161-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq2BYmWTMiaonrEL8QBP2%2Fuploads%2FMfjYaOvEyyS5MutCOVKe%2Fimage.png?alt=media&#x26;token=99121acf-e3c3-47c5-b59e-bde57a69c1b4" alt="" width="375"><figcaption></figcaption></figure>