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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs-epc.gitbook.io/ncs-documents/storage/object-storage-s3/configure-a-static-website-using-s3-bucket.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.