Triển khai Website Tĩnh Trên AWS: Kết Hợp S3, CloudFront Và Origin Access Control (OAC) Chuyên mục Devops 2025-03-19 0 Lượt xem 0 Lượt thích 0 Bình luận

📌 Giới thiệu

Triển khai một website tĩnh trên AWS không chỉ giúp tiết kiệm chi phí mà còn tối ưu hiệu suất và bảo mật. Trong bài viết này, mình sẽ hướng dẫn cách:

Lưu trữ website trên Amazon S3.
Sử dụng CloudFront để tăng tốc và bảo vệ nội dung.
Cấu hình Origin Access Control (OAC) để hạn chế truy cập trực tiếp vào S3.
Giải quyết các lỗi phổ biến, như "Access Denied" khi truy cập trang.

1️⃣ Tạo S3 Bucket Để Lưu Trữ Website

Bước 1: Tạo S3 Bucket

Truy cập AWS S3 Console.
Chọn Create Bucket.
Đặt tên bucket (ví dụ: my-static-website).
Tắt chế độ public access để bảo mật (sẽ dùng OAC thay thế).
Chọn Create bucket.

Bước 2: Bật Static Website Hosting

Vào bucket → Properties → Bật Static website hosting.
Chọn Host a static website.
Nhập index.html vào Index document.
Lưu lại Endpoint để kiểm tra sau này (ví dụ: http://my-static-website.s3-website-us-east-1.amazonaws.com).

Bước 3: Tải File Website Lên S3

Sử dụng AWS CLI để tải file:

aws s3 cp index.html s3://my-static-website/ --acl bucket-owner-full-control

Hoặc dùng giao diện AWS để upload.

2️⃣ Tạo CloudFront Để Tăng Tốc Website

Bước 1: Tạo CloudFront Distribution

Truy cập AWS CloudFront Console.
Chọn Create Distribution.
Origin domain: Chọn tên bucket S3, nhưng KHÔNG chọn dạng s3-website-xxx.amazonaws.com.
Restrict Bucket Access: Bật (dùng OAC thay vì cho phép public access).
Viewer Protocol Policy: Chọn Redirect HTTP to HTTPS.
Default Root Object: Nhập index.html.
Chọn Create Distribution.

Sau khi tạo xong, AWS sẽ cung cấp một CloudFront URL như:

https://d1xxxxxx.cloudfront.net/

Bước 2: Tạo Origin Access Control (OAC)

Chạy lệnh AWS CLI:

aws cloudfront create-origin-access-control --origin-access-control-config '{
    "Name": "OAC-for-S3",
    "SigningProtocol": "sigv4",
    "SigningBehavior": "always",
    "OriginAccessControlOriginType": "s3"
}'

Lưu lại Id của OAC để sử dụng trong bước tiếp theo.

Bước 3: Gán OAC Cho CloudFront

Lấy cấu hình hiện tại của CloudFront:

aws cloudfront get-distribution-config --id YOUR_DISTRIBUTION_ID > cloudfront-config.json

Mở file cloudfront-config.json, tìm Origins, thêm OriginAccessControlId:

"Origins": {
    "Quantity": 1,
    "Items": [
        {
            "Id": "my-static-website.s3.amazonaws.com",
            "DomainName": "my-static-website.s3.amazonaws.com",
            "OriginAccessControlId": "E1LE60PH8BJPYS"
        }
    ]
}

Sau đó cập nhật lại CloudFront:

aws cloudfront update-distribution --id YOUR_DISTRIBUTION_ID --if-match ETag_VALUE --distribution-config file://cloudfront-config.json

(Lưu ý: Thay ETag_VALUE bằng ETag lấy từ lệnh get-distribution-config).

3️⃣ Cấu Hình Bucket Policy Để Cho Phép CloudFront Truy Cập

Mở S3 Bucket Policy và thêm đoạn sau:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::my-static-website/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::YOUR_AWS_ACCOUNT_ID:distribution/YOUR_DISTRIBUTION_ID"
                }
            }
        }
    ]
}

Lưu lại và thử truy cập CloudFront URL. 🚀

4️⃣ Xử Lý Lỗi "Access Denied" Khi Truy Cập CloudFront

Nếu gặp lỗi "Access Denied", hãy kiểm tra các bước sau:

❌ Lỗi 1: Không Gán OAC Cho CloudFront

✅ Cách khắc phục: Kiểm tra CloudFront có OAC chưa bằng lệnh:

aws cloudfront get-distribution-config --id YOUR_DISTRIBUTION_ID

Nếu chưa có, hãy cập nhật lại CloudFront để gán OAC.

❌ Lỗi 2: Bucket Policy Chưa Cho Phép CloudFront

✅ Cách khắc phục: Kiểm tra Bucket Policy đã đúng chưa.

❌ Lỗi 3: Cache CloudFront Chưa Được Xóa

✅ Cách khắc phục: Xóa cache CloudFront để áp dụng thay đổi:

aws cloudfront create-invalidation --distribution-id YOUR_DISTRIBUTION_ID --paths "/*"

Chờ vài phút và thử lại.

5️⃣ Kết Luận

Việc triển khai website tĩnh trên AWS bằng S3 + CloudFront + OAC mang lại nhiều lợi ích:
✅ Bảo mật tốt hơn (không cần public S3).
✅ Tốc độ truy cập nhanh nhờ CloudFront CDN.
✅ Dễ dàng mở rộng và giảm chi phí.