Giới thiệu

Bạn đã từng thấy website của mình chậm lại vì phải tải quá nhiều hình ảnh và assets chưa?

Hoặc có thể bạn đã gặp rắc rối khi quản lý các file này khi website ngày càng mở rộng. Vấn đề là: việc lưu trữ và load hình ảnh trực tiếp từ server web tuy có vẻ tiện lợi ban đầu, nhưng về lâu dài nó có thể trở thành nút thắt cổ chai khiến hiệu năng giảm đáng kể.

Đó là lúc AWS trở thành cứu tinh. Với các dịch vụ như S3 để lưu trữ và CloudFront như một CDN mạnh mẽ, bạn có thể dễ dàng quản lý, tối ưu và phân phối hình ảnh cùng assets đến người dùng một cách nhanh chóng — dù họ ở bất kỳ đâu trên thế giới.

Trong hướng dẫn này, tôi sẽ chia sẻ với bạn vì sao việc lưu trữ hình ảnh trực tiếp trên máy chủ web không phải là lựa chọn tối ưu, lý do nên tách riêng các dịch vụ, và cách các dịch vụ từ AWS có thể giúp bạn quản lý mọi thứ hiệu quả hơn rất nhiều. Hãy cùng bắt đầu khám phá nhé!

Lý Do Không Nên Lưu Trữ Hình Ảnh Trên Máy Chủ Web Của Bạn

Tăng Tải Máy Chủ

Khi web server của bạn phải đồng thời xử lý cả ứng dụng và phục vụ hình ảnh, nó có thể nhanh chóng trở nên quá tải. Mỗi lần người dùng tải ảnh, là thêm một gánh nặng cho server — khiến mọi thứ chậm lại. Nếu website của bạn có nhiều lượt truy cập cùng lúc, server rất dễ “đuối”, gây ra độ trễ hoặc thậm chí là sập.

Hãy tưởng tượng bạn vừa phải mang tất cả túi đồ đi chợ, vừa phải chạy nước rút — rõ ràng không hiệu quả chút nào, đúng không?

Khả Năng Mở Rộng Hạn Chế

Khi trang web của bạn phát triển, số lượng hình ảnh và người dùng cũng sẽ tăng theo. Một máy chủ web duy nhất chỉ có thể xử lý đến một mức nhất định trước khi bạn đụng phải “bức tường giới hạn”. Việc mở rộng thường đồng nghĩa với việc chi thêm tiền cho máy chủ mạnh hơn — hoặc đối mặt với phiền phức khi phải di chuyển toàn bộ hệ thống.

Với các dịch vụ lưu trữ đám mây như AWS S3, bạn không cần lo lắng về chuyện “hết chỗ” nữa. Nó tự động mở rộng theo nhu cầu, giúp bạn yên tâm phát triển mà không bị ràng buộc bởi hạ tầng.

Rủi Ro Về Điểm Nghẽn Hiệu Suất

Các tệp hình ảnh lớn có thể làm chậm trang web của bạn đến mức gần như không thể sử dụng, đặc biệt nếu bạn tải chúng từ cùng một máy chủ đang xử lý logic ứng dụng. Khi một phần của trang bị chậm, nó kéo theo mọi thứ khác cũng ì ạch — tạo ra trải nghiệm không mấy dễ chịu cho người dùng.

Hãy tưởng tượng một con đường một làn xe bị tắc — chỉ cần một xe gặp sự cố là cả dòng xe phía sau bị kẹt lại.

Vấn đề Về Bảo Mật

Tải hình ảnh và asset trực tiếp từ máy chủ web có thể khiến bạn đối mặt với những rủi ro không đáng có. Tin tặc có thể lợi dụng lỗ hổng để truy cập dữ liệu nhạy cảm, hoặc tệ hơn là các trang web khác “ăn cắp” băng thông của bạn bằng cách hotlink hình ảnh.

Nếu không có các biện pháp bảo vệ phù hợp, bạn có thể vô tình để lộ đường dẫn nội bộ đến file — giống như để cửa trước nhà mở toang và mời gọi người lạ bước vào.

Tại Sao Chúng Ta Nên Sử Dụng CDN?

Nếu bạn từng thấy khó chịu vì một trang web tải chậm, bạn sẽ hiểu tại sao CDN lại là một yếu tố thay đổi cuộc chơi. CDN giống như một mạng lưới “kho hàng mini” được đặt khắp nơi trên thế giới, mỗi kho lưu trữ các bản sao của hình ảnh và asset từ trang web của bạn.

Thay vì mỗi người dùng phải tải nội dung từ máy chủ chính (thường ở xa), CDN sẽ phân phối nội dung từ vị trí gần nhất với họ — giúp mọi thứ nhanh hơn, mượt hơn và tối ưu trải nghiệm người dùng.

CDN tăng tốc độ giao hàng nội dung bằng cách phân phối dữ liệu đến các máy chủ biên toàn cầu.
CDN tăng tốc độ giao hàng nội dung bằng cách phân phối dữ liệu đến các máy chủ biên toàn cầu.

Vì sao dùng CDN để phục vụ hình ảnh và asset là điều hiển nhiên mà bạn nên làm:

Giúp Người Dùng Truy Cập Nhanh Ở Mọi Nơi

Giả sử máy chủ chính của bạn ở New York, nhưng một người ở Tokyo truy cập trang web của bạn. Nếu không có CDN, yêu cầu của họ phải di chuyển nửa vòng trái đất, điều này mất thời gian. Với một CDN, một máy chủ gần Tokyo sẽ giao nội dung, giảm thời gian di chuyển và làm cho trang web của bạn tải nhanh chóng. Thời gian tải nhanh hơn có nghĩa là người dùng hài lòng hơn, và người dùng hài lòng sẽ ở lại lâu hơn.

Giảm Độ Trễ và Cải Thiện Trải Nghiệm Người Dùng

Độ trễ là khoảng thời gian khó chịu giữa việc người dùng nhấp vào một cái gì đó và nội dung thực sự xuất hiện. Càng xa máy chủ của bạn, độ trễ càng cao. Một CDN giải quyết vấn đề này bằng cách đưa hình ảnh và tài sản của bạn gần hơn với người dùng, giảm độ trễ và làm cho mọi thứ cảm giác ngay lập tức. Dù ai đó đang duyệt trang web của bạn từ ghế sofa ở London hay một quán cà phê ở Sydney, họ sẽ có cùng một trải nghiệm liền mạch.

Giảm Tải Lưu Lượng Từ Máy Chủ Chính Của Bạn

Hãy tưởng tượng máy chủ web của bạn như một đầu bếp bận rộn trong một nhà hàng. Nếu không có CDN, đầu bếp phải xử lý mọi thứ: nấu ăn, phục vụ, và thậm chí giao thực phẩm đến những khách hàng ở xa. Với một CDN, đầu bếp (máy chủ của bạn) có thể tập trung vào việc nấu ăn (chạy ứng dụng của bạn), trong khi CDN xử lý việc giao hàng (phục vụ hình ảnh và tài sản). Điều này giảm tải rất nhiều lưu lượng từ máy chủ chính của bạn, ngăn ngừa quá tải và giữ cho trang web của bạn hoạt động trơn tru ngay cả trong những thời điểm lưu lượng truy cập cao.

S3 và CloudFront Là Gì?

S3 (Simple Storage Service) 

S3 là giải pháp lưu trữ đám mây an toàn, có khả năng mở rộng và rất đáng tin cậy của Amazon. Nó được thiết kế để lưu trữ bất kỳ loại dữ liệu nào, bao gồm hình ảnh, video và các asset khác, làm cho nó trở thành lựa chọn lý tưởng cho các trang web và ứng dụng. Dù bạn đang lưu trữ một blog cá nhân nhỏ hay chạy một nền tảng thương mại điện tử quy mô lớn, S3 có thể đáp ứng nhu cầu lưu trữ của bạn một cách dễ dàng. Hơn nữa, nó cung cấp các cấp độ lưu trữ linh hoạt, vì vậy bạn chỉ phải trả tiền cho những gì bạn sử dụng.

CloudFront

CloudFront là dịch vụ CDN (Content Delivery Network) của Amazon, đảm bảo việc giao nội dung nhanh chóng và an toàn. Nó hoạt động bằng cách lưu trữ hình ảnh và asset của bạn trên các máy chủ nằm rải rác trên toàn cầu, vì vậy người dùng có thể truy cập chúng nhanh chóng từ máy chủ gần nhất. Khi kết hợp với S3, CloudFront tối ưu hóa quy trình tải asset bằng cách tự động lấy các asset đã lưu trữ và phục vụ chúng với độ trễ tối thiểu. Cùng nhau, S3 và CloudFront cung cấp một giải pháp mạnh mẽ, hiệu quả và có khả năng mở rộng cho việc quản lý và giao hàng nội dung trang web.

Chi Phí Sử Dụng S3 và CloudFront

Một trong những điều tốt nhất về AWS là bạn chỉ phải trả tiền cho những gì bạn sử dụng. Dưới đây là một cái nhìn nhanh về chi phí:

  • Chi Phí S3:
    • Chi Phí Lưu Trữ: Bạn phải trả tiền cho mỗi GB dữ liệu được lưu trữ, với các mức giá khác nhau tùy thuộc vào cấp độ lưu trữ (ví dụ: Standard, Infrequent Access, Glacier).
    • Chi Phí Yêu Cầu: Có phí cho các yêu cầu PUT, GET và các yêu cầu khác được thực hiện đến bucket của bạn.
    • Chuyển Dữ Liệu: Việc chuyển dữ liệu ra khỏi S3 đến internet sẽ phát sinh thêm phí.
  • Chi Phí CloudFront:
    • Chuyển Dữ Liệu: Bạn phải trả tiền cho lượng dữ liệu được tải đến người dùng thông qua các vị trí server.
    • Các Yêu Cầu: Có phí cho các yêu cầu HTTP/HTTPS được thực hiện đến CloudFront.
    • Giá Theo Khu Vực: Chi phí có thể thay đổi tùy thuộc vào vị trí của người dùng.

Bạn có thể tham khảo Giá S3 của Amazon và Giá CloudFront của Amazon để biết thêm thông tin chi tiết.

Ví Dụ: Chi Phí Sử Dụng S3 và CloudFront

Giả sử bạn điều hành một trang web nhỏ về thương mại điện tử và cần lưu trữ và phục vụ hình ảnh sản phẩm. Dưới đây là một phân tích chi phí đơn giản:

Chi Tiết Tình Huống

  • Lưu Trữ: 100 GB hình ảnh được lưu trữ trong S3 (Cấp độ Standard).
  • Các Yêu Cầu: 50,000 yêu cầu GET và 10,000 yêu cầu PUT đến S3 mỗi tháng.
  • Chuyển Dữ Liệu: 100 GB dữ liệu được chuyển ra CloudFront.
  • Giao Dữ Liệu CloudFront: 100 GB dữ liệu được tải đến người dùng cuối thông qua CDN.

Chi Phí S3

  1. Chi Phí Lưu Trữ:
  • 100 GB trong Lưu Trữ Standard S3 = $2.30 mỗi tháng (khoảng $0.023 mỗi GB).
  1. Chi Phí Yêu Cầu:
  • 50,000 yêu cầu GET = $0.04 (khoảng $0.0004 mỗi 1,000 yêu cầu).
  • 10,000 yêu cầu PUT = $0.05 (khoảng $0.005 mỗi 1,000 yêu cầu).
  1. Chi Phí Chuyển Dữ Liệu (đến CloudFront):
  • 100 GB = $0 (việc chuyển dữ liệu từ S3 đến CloudFront là miễn phí).

Tổng Chi Phí S3: $2.39/tháng

Chi Phí CloudFront

  1. Chi Phí Chuyển Dữ Liệu (từ CloudFront đến người dùng):
  • 100 GB tải đến người dùng cuối = $8.50 (khoảng $0.085 mỗi GB cho 10 TB đầu tiên).
  1. Chi Phí Yêu Cầu:
  • 50,000 yêu cầu HTTP/HTTPS = $0.10 (khoảng $0.002 mỗi 1,000 yêu cầu).

Tổng Chi Phí CloudFront: $8.60/tháng

Tổng Cộng

Tổng Chi Phí Hàng Tháng: $2.39 + $8.60 = $10.99

Cài Đặt AWS S3 và CloudFront Để Lưu Trữ Hình Ảnh và Tài Sản

Hướng dẫn này sẽ hướng dẫn bạn cách cấu hình AWS S3 và CloudFront để tải hình ảnh và asset một cách hiệu quả với một subdomain tùy chỉnh.

Cài đặt này đảm bảo rằng:

  • Các request từ các miền được phép của bạn (ví dụ: yoursite.com) có thể truy cập tài sản.
  • Các request không có tiêu đề Referer (ví dụ: truy cập trực tiếp vào các URL S3) sẽ bị chặn.
  • Các request từ các trang web không được ủy quyền (hotlinking) sẽ bị từ chối.
  1. Tạo Chứng Chỉ SSL Trong AWS Certificate Manager (ACM)

Vì CloudFront yêu cầu một chứng chỉ SSL hợp lệ để sử dụng HTTPS với một tên miền tùy chỉnh, bước đầu tiên là tạo một chứng chỉ SSL.

  • Đi đến AWS Certificate Manager (ACM).
  • Nhấp vào Yêu cầu một chứng chỉ.
  • Chọn Yêu cầu một chứng chỉ công khai.
  • Nhập subdomain của bạn (images.yoursite.com), và tùy chọn thêm *.yoursite.com nếu bạn muốn một chứng chỉ wildcard.
  • Chọn Xác thực DNS (Được khuyến nghị).
  • Sau khi gửi, AWS sẽ cung cấp CNAME records mà bạn cần thêm vào nhà cung cấp DNS của bạn (ví dụ: Route 53, Cloudflare, GoDaddy).
  • Khi bản ghi DNS được xác thực, chứng chỉ sẽ được cấp.
AWS Certificate Manager: Chứng chỉ SSL cho các tên miền con đã được cấp thành công
AWS Certificate Manager: Chứng chỉ SSL cho các tên miền con đã được cấp thành công
  1. Tạo Một Subdomain Phục Vụ Việc Tải Asset và Hình Ảnh

Bây giờ mà chứng chỉ SSL đã sẵn sàng, hãy thiết lập một subdomain (images.yoursite.com) để phục vụ hình ảnh của bạn.

  • Đi đến nhà cung cấp DNS của bạn (Route 53, Cloudflare, hoặc một nhà cung cấp khác).
  • Tạo một bản ghi CNAME:
    • Tên bản ghi: images
    • Loại: CNAME
    • Giá trị: <your-cloudfront-distribution-id>.cloudfront.net
  1. Tạo Một Phân Phối CloudFront

Bây giờ, hãy thiết lập CloudFront để phục vụ hình ảnh từ S3.

  • Đi đến AWS CloudFront → Tạo Phân Phối.
  • Dưới Nguồn, cấu hình:
    • Tên Miền Nguồn: Chọn bucket S3 của bạn.
    • Truy Cập Nguồn: Chọn Danh tính truy cập cũ → Tạo Danh Tính Truy Cập Nguồn (OAI).
    • Chính Sách Bucket: Chọn Tôi sẽ cập nhật chính sách bucket thủ công.
  • Cấu Hình Hành Vi:
    • Tự Động Nén Đối Tượng: ✅ Có
    • Chính Sách Giao Thức Người Xem: Chuyển hướng HTTP sang HTTPS
    • Các Phương Thức HTTP Được Cho Phép: GET, HEAD
    • Giới Hạn Truy Cập Người Xem: ❌ Không (trừ khi bạn muốn URL đã ký)
  • Cấu Hình Bộ Đệm và Yêu Cầu Nguồn:
    • Chính Sách Bộ Đệm: ✅ CachingOptimized
    • Chính Sách Yêu Cầu Nguồn: ✅ UserAgentRefererHeaders (Chuyển tiếp Referer đến S3)
  • Gán Chứng Chỉ SSL:
    • Dưới Cài Đặt, chọn Chứng Chỉ SSL Tùy Chỉnh.
    • Chọn chứng chỉ bạn đã tạo trong AWS Certificate Manager.
  • Nhấp vào Tạo Phân Phối.
CloudFront: Cấu hình nguồn
CloudFront: Cấu hình nguồn
CloudFront: Cấu hình hành vi
CloudFront: Cấu hình hành vi
  1. Cấu Hình Quyền Truy Cập Bucket S3

Theo mặc định, một bucket S3 là riêng tư. Chúng ta cần cho phép CloudFront truy cập vào nó.

  • Đi đến S3 → Chọn bucket của bạn.
  • Quyền Truy Cập → Bật ✅ Chặn tất cả truy cập công khai (vì CloudFront sẽ xử lý quyền truy cập).
  • Cập nhật Chính Sách Bucket:

Thay thế <tên bucket> và <oai cloud front> bằng các giá trị thực tế của bạn:


{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowAccessFromSubdomains",
            "Effect": "Allow",
            "Principal": {
                "AWS": "<cloud front oai>"
            },
            "Action": "s3:GetObject",
            "Resource": [
                "arn:aws:s3:::<bucket name>/images/*",
                "arn:aws:s3:::<bucket name>/assets/*"
            ],
            "Condition": {
                "StringLike": {
                    "aws:Referer": [
                        "http://*.yoursite.com/*",
                        "https://*.yoursite.com/*",
                        "http://yoursite.com/*",
                        "https://yoursite.com/*"
                    ]
                }
            }
        }
    ]
}
  1. Các Bước Cuối Cùng
  • Triển khai CloudFront: Chờ cho phân phối CloudFront hoàn tất triển khai.
  • Kiểm Tra Tải Hình Ảnh:
    • Thử truy cập một hình ảnh: https://images.yoursite.com/path/to/image.jpg
  • Nếu bạn nhận được 403 Forbidden, hãy kiểm tra rằng:
    • Chứng chỉ CloudFront OAI được gán đúng cách.
    • Chính sách bucket S3 bao gồm ARN OAI.
    • Tiêu đề Referer được chuyển tiếp.

✅ Bây giờ, bạn đã có một thiết lập phục vụ hình ảnh hoàn chỉnh, tối ưu hóa và an toàn với AWS S3 và CloudFront! 🚀

Kết Luận

Và vậy là xong! Với AWS S3 và CloudFront phối hợp cùng nhau, bạn đã có một giải pháp nhanh chóng, an toàn và tiết kiệm chi phí để load hình ảnh hiệu quả cho website. Không còn cảnh máy chủ web bị quá tải hay thời gian tải chậm—CloudFront xử lý phần nặng, còn S3 giúp lưu trữ gọn gàng và bảo mật.

Bằng cách chuyển tiếp tiêu đề Referer và chặn truy cập trực tiếp vào S3, bạn cũng đã ngăn chặn được hotlinking và lưu lượng không mong muốn. Giờ đây, hình ảnh của bạn load nhanh hơn, an toàn hơn và dễ dàng mở rộng khi cần thiết. Đơn giản, hiệu quả và đáng tin cậy!