Triển khai Static Website trên Amazon S3

Amazon S3 cho phép lưu trữ và phục vụ website tĩnh (Static Website) một cách đơn giản, không cần máy chủ web truyền thống. Website tĩnh thường bao gồm HTML, CSS, JavaScript, hình ảnh, và các file tĩnh khác. -> Việc này rất phù hợp để deploy những website dưới dạng SPA.

1. Yêu cầu trước khi bắt đầu

Một tài khoản AWS.
Domain (tùy chọn, nếu muốn trỏ website vào tên miền riêng).
Nội dung website tĩnh đã chuẩn bị sẵn (HTML/CSS/JS).
- Nếu bạn dùng các Framework như VueJS, NextJS thì cần build nó ra HTML/CSS/JS trước nhé!

2. Các bước triển khai

Bước 1: Tạo Bucket

Vào Amazon S3 Console.
Nhấn Create bucket.
Đặt tên bucket (nếu dùng domain, nên đặt trùng tên domain).
Chọn Region phù hợp.
Bỏ chọn Block all public access (vì cần cho website public).
Tạo bucket.

Bước 2: Upload nội dung website

Upload tất cả file HTML, CSS, JS, và hình ảnh vào bucket.
Có thể tạo cấu trúc thư mục nếu cần.

Bước 3: Cấu hình Static Website Hosting

Trong bucket, vào Properties.
Kéo xuống Static website hosting → Edit.
Chọn Enable.
Chọn Host a static website.
Nhập:
- Index document: index.html
- Error document: error.html (tùy chọn).
Lưu lại.

Sau khi bật, AWS sẽ cung cấp một Endpoint URL để truy cập website.

Bước 4: Cấu hình quyền truy cập Public

Vào tab Permissions → Bucket policy.
Thêm policy cho phép public read:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::<tên-bucket>/*"
    }
  ]
}

3. Tích hợp với tên miền riêng

Nếu muốn truy cập website qua domain riêng:

Sử dụng Amazon Route 53 hoặc DNS provider khác.
Trỏ domain (hoặc subdomain) tới S3 Static Website Endpoint.
Nếu muốn hỗ trợ HTTPS, nên dùng Amazon CloudFront để phân phát nội dung và cấp SSL.

4. S3 CORS là gì?

Khi ứng dụng web (frontend) truy cập S3 trực tiếp qua Access Point hoặc bucket URL từ một domain khác, trình duyệt sẽ kiểm tra CORS configuration.

Lý do cần CORS:

Trình duyệt mặc định chặn request cross-origin vì lý do bảo mật.
CORS cho phép bạn định nghĩa domain nào, phương thức nào (GET, PUT, v.v.) được phép truy cập dữ liệu S3.

Phương thức truy cập S3 S3 Event Notifications