AWS Builder Center

Builder Center

Bắt đầu với AWS: Triển khai một website tĩnh cực nhanh bằng Amazon S3

Hướng dẫn từng bước giúp người mới bắt đầu cấu hình Amazon S3 để đưa website tĩnh (HTML/CSS/JS) lên môi trường internet chỉ trong vài phút.

Tiến Minh Nguyễn

Sinh viên
Chào các bạn,
Nếu mới bắt đầu tiếp cận AWS, việc lựa chọn dịch vụ nào để làm quen mà không bị ngợp là câu hỏi khá phổ biến. Amazon S3 (Simple Storage Service) là điểm xuất phát lý tưởng nhất: dễ hiểu, trực quan và chi phí gần như bằng 0 đối với các website cá nhân đơn giản.
Nói đơn giản: S3 giống như một chiếc ổ cứng trên mây của Amazon. Bình thường nó lưu ảnh, file, tài liệu; nhưng khi bật chế độ "Static website hosting", nó lập tức biến thành một web server phục vụ các file HTML, CSS và JavaScript mà bạn không cần phải tự cài đặt hay bảo trì bất kỳ máy chủ nào.
Sau đây là các bước triển khai chi tiết:

Bước 1: Tạo S3 Bucket

  1. Đăng nhập vào AWS Management Console và tìm đến dịch vụ S3.
  2. Chọn Create bucket.
  3. Đặt tên Bucket (lưu ý: tên phải là duy nhất trên toàn cầu, ví dụ: my-static-web-2026).
  4. Tại phần Object Ownership, chọn ACLs disabled (recommended).
  5. Để public được website, tạm thời bỏ tick ở ô Block all public access (AWS sẽ yêu cầu bạn xác nhận cảnh báo này).
  6. Bấm Create bucket.

Bước 2: Bật tính năng Static Website Hosting

  1. Nhấn vào tên Bucket vừa tạo, chuyển sang tab Properties.
  2. Kéo xuống cuối trang tìm mục Static website hosting, chọn Edit.
  3. Chọn Enable.
  4. Ở phần Index document, điền index.html. Nếu có trang lỗi thì điền error.html vào ô Error document.
  5. Nhấn Save changes. Lúc này, ở cuối mục sẽ xuất hiện một đường link dạng http://...s3-website... (đây chính là URL của website sau khi hoàn thành).

Bước 3: Cấu hình Bucket Policy (Cấp quyền truy cập)

Để khách ghé thăm đọc được nội dung trên web, ta cần cấp quyền đọc công khai (read-only):
  1. Vào tab Permissions, tìm mục Bucket policy rồi chọn Edit.
  2. Dán đoạn mã JSON sau (thay my-static-web-2026 bằng đúng tên bucket của bạn):
1
2
3
4
5
6
7
8
9
10
11
12
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::my-static-web-2026/*"
}
]
}
Any opinions in this article are those of the individual author and may not reflect the opinions of AWS.
Enjoyed reading this content? Let the author know!

Your likes, comments, shares, and saves help creators reach more builders.

Loading recommendations

Loading article