> For the complete documentation index, see [llms.txt](https://docs-epc.gitbook.io/ncs-documents/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-epc.gitbook.io/ncs-documents/storage/object-storage-s3/configure-a-static-website-using-s3-bucket.md).

# Configure a static website using S3 Bucket

## Prerequisite

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

## 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="/files/qyHL199SX22ymMsIo1ct" 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="/files/G1ZEiJZeLyjwsXW8FpUU" alt="" width="375"><figcaption></figcaption></figure>

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

<figure><img src="/files/qbVfLKqu2UDiglwuCAO7" alt="" width="375"><figcaption></figcaption></figure>

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

**example result:**

<figure><img src="/files/iyRmMD80NsY8lnhJ9Cme" 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="/files/YmR6SRNy39TM2Ki3iFVO" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/waNZorhWdRIfm47KoyxU" 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="/files/nNFo9VdAw2CafaLT2WMb" 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="/files/3ZACHPNTA74LGLzA1QkR" alt="" width="375"><figcaption></figcaption></figure>

<figure><img src="/files/V6cozyGA5k6IPN6a0mFU" 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="/files/mcp9wfEfRpTVyrPQR7Xo" alt="" width="375"><figcaption></figcaption></figure>