Tăng Tốc Hình Ảnh: Hướng Dẫn Hoàn Chỉnh Cloudflare CDN + Amazon S3

Hình ảnh là một phần không thể thiếu trong bất kỳ ứng dụng web nào, nhưng nếu tốc độ tải hình ảnh chậm, nó có thể khiến người dùng bỏ cuộc. Trong bài viết này, mình sẽ chia sẻ cách kết hợp Cloudflare CDN với Amazon S3 để tối ưu hóa tốc độ tải hình ảnh cho ứng dụng Rails của bạn.

Tại Sao Thiết Lập Này Hiệu Quả

Khi phục vụ hình ảnh trực tiếp từ S3, mỗi yêu cầu sẽ truy cập vào bucket của bạn. Điều này dẫn đến việc tăng chi phí và làm chậm tốc độ tải. Với Cloudflare, hình ảnh sẽ được lưu cache tại các vị trí edge trên toàn cầu, giúp giảm tải cho S3 và cải thiện tốc độ tải cho người dùng.

Những Gì Bạn Cần Chuẩn Bị

Tài khoản AWS với một bucket S3 (hoặc sẵn sàng tạo một)
Tên miền trên Cloudflare (bậc miễn phí cũng đủ)
Khoảng 30 phút

Bước 1: Thiết Lập Bucket S3

Tạo một bucket S3 mới hoặc sử dụng bucket đã có sẵn. Đặt tên cho bucket của bạn, ví dụ: my-app-images-2024. Bạn cần tắt Block All Public Access để bucket có thể được truy cập công khai.

Bước 2: Chính Sách Bucket (Điểm Khó Khăn)

Thêm một chính sách bucket để hình ảnh có thể được đọc công khai. Dưới đây là JSON bạn cần chèn vào (thay thế my-images-bucket bằng tên bucket thực tế của bạn):

json Copy

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "AllowPublicRead",
      "Effect": "Allow",
      "Principal": "*",
      "Action": ["s3:GetObject"],
      "Resource": ["arn:aws:s3:::my-images-bucket/*"]
    }
  ]
}

Kiểm tra truy cập hình ảnh trước khi tiếp tục bằng cách tải lên một hình ảnh thử nghiệm và truy cập qua URL của nó.

Bước 3: Thiết Lập CNAME trên Cloudflare

Trong bảng điều khiển Cloudflare:

Đi tới phần DNS
Thêm một bản ghi CNAME
- Đặt tên thành images hoặc cdn
Trỏ đến bucket S3 của bạn: my-images-bucket.s3.amazonaws.com
Đảm bảo biểu tượng đám mây màu cam (được proxy qua Cloudflare) 🟠

Bây giờ hình ảnh của bạn có thể truy cập tại https://images.yourdomain.com/path/to/image.jpg thay vì URL S3 gốc.

Bước 4: Quy Tắc Cache (Nơi Phép Màu Xảy Ra)

Để tận dụng lợi ích hiệu suất, bạn cần thiết lập quy tắc cache hợp lý. Đến phần Rules → Cache Rules và tạo một quy tắc cache mới:

Chọn Cache everything Template
Edge Cache TTL: 1 tháng (hình ảnh thường ít thay đổi)
Browser Cache TTL: 7 ngày
URL pattern: images.yourdomain.com/*

Bước 5: Cloud Connector: Phần Quan Trọng (Đừng Bỏ Qua!)

Cloud Connector giúp xử lý các chi tiết kỹ thuật giúp S3 hoạt động chính xác với Cloudflare. Nó tự động:

Sửa đổi Header Host - đảm bảo S3 nhận đúng yêu cầu
Định tuyến lưu lượng chính xác - giúp yêu cầu đến đúng bucket

Bạn được 10 Cloud Connectors miễn phí ngay cả trên gói miễn phí của Cloudflare.

Bước 6: Rails Helper (Nếu Bạn Sử Dụng Rails)

Nếu bạn đang sử dụng Rails, dưới đây là helper mà mình đã viết để tích hợp dễ dàng với ActiveStorage:

ruby Copy

module ApplicationHelper
  include Pagy::Frontend

  def cdn_image_url(attachment_or_blob, **opts)
    blob = attachment_or_blob.is_a?(ActiveStorage::Blob) ? attachment_or_blob : attachment_or_blob&.blob
    return unless blob

    base = ENV['CDN_CLOUDFLARE_URL'].presence ||
           Rails.application.routes.url_helpers.rails_blob_url(blob, only_path: false)

    url = "#{base.chomp('/')}/#{blob.key.delete_prefix('/')}"
    return url if opts.blank?

    params = opts.slice(:width, :height, :quality, :format).map { |k, v| "#{k.to_s[0]}=#{v}" }
    "#{url}?#{params.join('&')}"
  end
end

Những Gì Mình Học Được Từ Kinh Nghiệm

Cache headers quan trọng: Đảm bảo thiết lập đúng quy tắc cache để hình ảnh được lưu cache chính xác.
Yêu cầu đầu tiên vẫn chậm: Yêu cầu đầu tiên sẽ mất thời gian hơn do Cloudflare phải lấy từ S3, nhưng sau đó sẽ rất nhanh.
Test với curl: Sử dụng lệnh sau để kiểm tra trạng thái cache:

bash Copy

curl -I https://images.yourdomain.com/some-image.jpg

Có Đáng Công Sức !?

Rất đáng! Quá trình thiết lập chỉ mất khoảng 2-3 giờ và cải thiện hiệu suất là ngay lập tức. Nếu bạn đang phục vụ hình ảnh trực tiếp từ S3, hãy làm theo hướng dẫn này. Người dùng của bạn sẽ cảm ơn bạn, và hóa đơn AWS cũng sẽ giảm.

Có câu hỏi nào về thiết lập không? Hãy để lại câu hỏi trong phần bình luận nhé!

🚀 Tăng Tốc Hình Ảnh: Hướng Dẫn Hoàn Chỉnh Cloudflare CDN + Amazon S3