Lưu trữ (host) một Website tĩnh trên Amazon S3

Tạo S3 Bucket
Cho phép truy cập công cộng
Bật tính năng Static website hosting
Có thể bạn quan tâm

Trong bài viết này tôi sẽ hướng dẫn bạn tạo một website tĩnh với tài nguyên được đặt trên một S3 Bucket.

Nếu website của bạn nhiều tài nguyên và thay đổi thường xuyên bạn nên sử dụng API hoặc một ứng dụng khách S3 để cập nhập dữ liệu lên S3 Bucket. Trong bài viết này, mọi thứ sẽ được thực hiện một cách thủ công, nhưng nó giúp bạn hiểu rõ ràng hơn về cách một website tĩnh hoạt động trên S3 Bucket.

http://test.teamcoder.net.s3-website.eu-central-1.amazonaws.com

1. Tạo S3 Bucket

Trước hết, trên AWS Console tạo một S3 Bucket rỗng.

Tạo một vùng chứa Amazon S3 (S3 Bucket)

Chúng ta sẽ tạo một website tĩnh cực kỳ đơn giản, chỉ gồm 3 trang.

index.html
java/java-basic
java/advanced-java

Tạo một file index.html trên máy tính của bạn.

index.html

<!DOCTYPE html>
<html>
<head>
   <title>Home</title>
</head>
<body>
   <h1>Home</h1>
   <a href="/java/java-basic">Java Basic</a>
   <br/>
   <a href="/java/advanced-java">Advanced Java</a>
</body>
</html>

Tải file index.html lên thư mục gốc của S3 Bucket của bạn.

Tiếp theo, tạo 2 file không có phần mở rộng (extension).

java-basic
advanced-java

java-basic

<!DOCTYPE html>
<html>
<head>
   <title>Java Basic</title>
</head>
<body>
   <h1>Java Basic</h1>
   <a href="/">Home</a> 
</body>
</html>

advanced-java

<!DOCTYPE html>
<html>
<head>
   <title>Advanced Java</title>
</head>
<body>
   <h1>Advanced Java</h1>
   <a href="/">Home</a>
</body>
</html>

Tạo một thư mục "java" và upload 2 file trên vào thư mục này.

Hai file mà bạn vừa upload lên không có phần mở rộng, nên "Content-Type" của nó đang được thiết lập mặc định là "application/octet-stream", chúng ta cần đổi thành "text/html".

Chọn lần lượt từng file để thay đổi "Content-Type" của chúng.

Object actions > Edit metadata

Sét đặt giá trị cho "Content-Type" là "text/html":

Chú ý: Có thể giá trị "text/html" không hiển thị để bạn lựa chọn, nhưng không sao, bạn chỉ cần nhập giá trị này vào.

2. Cho phép truy cập công cộng

Để một S3 Bucket có thể hoạt động như một website tĩnh, nó cần cho phép các truy cập công cộng.

Bỏ việc chặn các quyền truy cập công cộng.

[Your Bucket] > Permissions > (bucket settings) > Edit

Bỏ việc chặn các quyền truy cập công cộng.

Thiết lập chính sách của Bucket.

[Your Bucket] > Permissions > Bucket policy > Edit

Thay đổi "your_bucket_name" trong đoạn văn bản dưới đây thành tên Bucket của bạn, sau đó copy và dán vào trình soạn thảo.

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "Stmt-GetObject",
      "Action": [
        "s3:GetObject"
      ],
      "Effect": "Allow",
      "Resource": "arn:aws:s3:::your_bucket_name/*",
      "Principal": "*"
    },
    {
      "Sid": "Stmt-ListBucket",
      "Action": [
        "s3:ListBucket"
      ],
      "Effect": "Allow",
      "Resource": "arn:aws:s3:::your_bucket_name",
      "Principal": "*"
    }
  ]
}

Ví dụ:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "Stmt-GetObject",
      "Action": [
        "s3:GetObject"
      ],
      "Effect": "Allow",
      "Resource": "arn:aws:s3:::test.teamcoder.net/*",
      "Principal": "*"
    },
    {
      "Sid": "Stmt-ListBucket",
      "Action": [
        "s3:ListBucket"
      ],
      "Effect": "Allow",
      "Resource": "arn:aws:s3:::test.teamcoder.net",
      "Principal": "*"
    }
  ]
}

Xem thêm bài viết chuyên đề về chính sách S3 Bucket:
Tạo các chính sách S3 Bucket

3. Bật tính năng Static website hosting

Bật tính năng "Static website hosting" cho Bucket.

[Your Bucket] > Properties > Static website hosting > Edit

Bật tính năng "Static website hosting":

Index document	Là trang chủ, trang mặc định của website.
Error document	Nội dung này sẽ được trả về nếu có lỗi xẩy ra khi người dùng truy cập vào một URL nào đó trên website.
Direction rules	Định nghĩa các quy tắc chuyển hướng. Chẳng hạn, khi người dùng truy cập vào các đường dẫn cũ (không còn tồn tại nữa), nó sẽ được chuyển hướng tới đường dẫn mới. Nếu bạn quan tâm tới cách thiết lập các quy tắc chuyển hướng hãy xem bài viết được đề xuất dưới đây: Các quy tắc chuyển hướng cho S3 Static Website

Sau khi nhấn "Save changes", các tài nguyên trên S3 Bucket của bạn có thể được truy cập như một website tĩnh. Bạn có thể nhìn thấy đường dẫn tới trang chủ của nó.

Truy cập vào trang chủ:

4. Có thể bạn quan tâm

Có rất nhiều câu hỏi mà bạn sẽ đặt ra sau khi tạo một website tĩnh theo hướng dẫn ở trên. Các bài viết được đề xuất dưới đây có thể trả lời một trong các câu hỏi của bạn.

Để quản lý các nguồn tài nguyên trên S3 Bucket bạn nên sử dụng một ứng dụng khách S3 (S3 Client), nó giúp bạn quản lý và cập nhập các tài nguyên trên S3 Bucket dễ dàng hơn.

S3 Client Tools

Sau khi thiết lập (host) một website tĩnh sử dụng Amazon S3, bạn muốn gắn một tên miền của bạn vào website này?

Cấu hình tên miền tuỳ chỉnh cho website tĩnh Amazon S3

Sau khi bạn có một website tĩnh được triển khai (host) trên Amazon S3, bạn muốn phân phối nội dung tới người dùng với tốc độ nhanh hơn và tin cậy hơn. Một giải pháp mà bạn nghĩ tới lúc này là Amazon CloudFront. Làm thế nào để tương tác CloudFront với website tĩnh trên?

Giới thiệu về Amazon Cloudfront và kiến trúc của nó

Tạo bản phân phối CloudFront cho S3 Bucket