Sử dụng Cloudflare Pages làm Reverse Proxy cho Jetpack trên WordPress v2

Hơn nửa năm trước mình có viết 1 bài Sử dụng Cloudflare Pages làm Reverse Proxy cho Jetpack trên WordPress, tổng thể hiệu quả khá hài lòng, ưu điểm là ảnh load từ Jetpack và chạy qua Cloudflare, nên kể cả thèng bibica.net có sập, các ảnh đã được cache từ Jetpack vẫn hoạt động bình thường

Phiên bản v2 khá tương đồng cách hoạt động của v1, có điều bản này tham khảo thêm 1 số cấu hình cache từ các bài viết khác

• Proxying an Image CDN with Cloudflare workers
• Cloudflare Workers × Cloudinary Cache + Proxy

Vẫn duy trì chạy qua Cloudflare Pages vì có thể tạo riêng 1 tài khoản mới, chỉ để chạy Reverse Proxy, chạy qua Cloudflare Workers phải add domain trực tiếp vào, không tận dụng được 100.000 request miễn phí mỗi ngày

Khi bạn đọc bài này, mình đã chuyển tất cả các ảnh, sang subdomain i.bibica.net

• i.bibica.net: các ảnh mặc định từ WordPress
• i.bibica.net/avatar: các ảnh avatar
• i.bibica.net/comment: các ảnh cho phần comment Artalk

Trong trường hợp bạn muốn dùng trên cho các dịch vụ khác thì sửa lại code gốc 1 chút là được, rất đơn giản, v2 cấu hình ngắn gọn, ít bước thủ công hơn so với phiên bản đầu tiên

Bài viết này demo trên tài khoản Github và Cloudflare, tất cả đều miễn phí và tạo mới hoàn toàn

Cài đặt và cấu hình

Bước 1: clone repository jetpack-proxy-images về tài khoản Github

• Fork repository về tài khoản của bạn, đặt tên tùy ý

• Chỉnh sửa lại các thông tin cấu hình trong file _worker.js

• Mặc định WordPress sẽ có các ảnh và phần avatar
• Phần quan trọng nhất cần sửa là đường dẫn các ảnh thư mục wp-content/uploads, sửa lại theo domain của bạn là được

pathTransform: (path) => '/bibica.net/wp-content/uploads' + path,

/bibica.net/wp-content/uploads: thay bằng domain của bạn ở dòng 14

• Phần comment (dòng 7-11) thường không có, xóa đi, mình giữ lại để demo cấu trúc, nếu bạn cần dùng URL khác thì sửa lại

• Ví dụ nếu bạn dùng trên domain haproxy.tech thì sửa lại như bên dưới là đủ

Bước 2: Triển khai lên Cloudflare Pages

• Vào Cloudflare Workers & Pages, importing Git repository này vào Pages

• Các bước khác cứ ấn next mặc định là được

Bước 3: Custom domain

Ưu điểm khi chạy qua Cloudflare Pages, là chúng ta có thể cấu hình domain thủ công từ ngoài, không phải add domain trực tiếp vào tài khoản này

• Tạo 1 CNAME theo yêu cầu của Cloudflare

Bước 4: Quản lý ảnh trên WordPress bằng Jetpack Photon Addon

Đổi sang dùng ảnh theo subdomain i.bibica.net

Ở bản v1, quản lý URL qua Jetpack, làm thủ công hơi nhiều bước, hiện tại đã có 1 plugin riêng cho vấn đề này

Việc cài đặt và cấu hình rất đơn giản, thực tế làm tầm 3-5 phút là kịch

Bonus: Custom gravatar url

Sử dụng Code Snippets tạo 1 file php với nội dung:

function custom_gravatar_url($avatar) {
    $avatar = str_replace('https://secure.gravatar.com/avatar/', 'https://i.bibica.net/avatar/', $avatar);
    return $avatar;
}
add_filter('get_avatar', 'custom_gravatar_url');

Có thể thêm script này để đổi các link gravatar trong admin sang domain của bạn luôn, cho đẹp hơn là chính, chứ không có ý nghĩa về hiệu năng lắm 😛

Hoạt động

Nếu cấu hình xong mà bạn vẫn chưa hiểu mình vừa làm cái gì, có thể xem trình tự các bước như bên dưới

1. URL gốc từ ảnh trên WordPress

https://bibica.net/wp-content/uploads/2025/02/2025-02-25-22-55-06.png

2. Ảnh sẽ được xử lý qua Jetpack (nén ảnh, tạo thumbnail qua query)

https://i0.wp.com/bibica.net/wp-content/uploads/2025/02/2025-02-25-22-55-06.png

3. Làm ngắn lại và load qua Cloudflare

https://i.bibica.net/2025/02/2025-02-25-22-55-06.png

4. Sau khi load qua Cloudflare lần đầu, sẽ được Cloudflare CDN cache lại, từ các lần truy cập tiếp theo, sẽ load lại các ảnh đã cache này

5. Nếu Cloudflare cache bị xóa, i.bibica.net sẽ load lại ảnh từ i0.wp.com

Hiểu ngắn gọn hơn, ảnh gốc được Jetpack cache, Cloudflare lại cache 1 lần nữa ảnh từ Jetpack 🤡

Thực tế khi viết bài này, mình có thử qua Netlify, Vercel thay thế cho Cloudflare Pages, mà tài khoản FREE của các dịch vụ này giới hạn hơi nhiều, thậm chí ban đầu ý tưởng là tống hết ảnh từ Jetpack sang R2, cũng không nhanh bằng chạy thuần túy Jetpack <-> Cloudflare, nên thôi, dùng bản v2 như hiện tại bạn đang thấy

Hiệu quả

Ảnh sau khi load trực tiếp từ Cloudflare, đa phần < 300ms ở điều kiện mạng VNPT

Nếu load trực tiếp từ i0.wp.com đa phần < 500ms, số liệu có thể Cloudflare nhanh hơn 1 chút, vấn đề là thực tế sử dụng, thường chúng ta chỉ cần load tấm ảnh đầu tiên hiện ra nhanh nhất là đủ, nói chung chỉ cần bạn có dùng Jetpack mặc định (i0.wp.com) là được, cấu hình sử dụng qua Cloudflare Pages như bài này là không cần thiết

Ở bản v1, chỉ quản lý trực tiếp qua URL gốc, phải tạo nhiều subdomain cho nhiều dịch vụ, nó hơi phiền để nhớ, nên mình làm bản v2, cho tất cả dịch vụ ảnh vào 1 chỗ, sau cần thêm sửa xóa gì dễ tìm kiếm hơn, mặc định các avatar từ Gravatar, Gravatar cũng đã tự bypass Cloudflare cache, nên không phải xử lý thêm gì, thành viên nào có đổi avatar thì nó sẽ tự hiện ra, không lo bị cache avatar cũ

v2 tối ưu hơn v1 một chút ở vấn đề load cache Cloudflare, bản v1 thuần túy proxy Jetpack -> Cloudflare, bản v2 có kiểm tra bước đầu xem có cache chưa? có thì load từ Cloudflare, không phải load lại từ Jetpack, lý thuyết sẽ nhanh hơn 1 chút, thực tế sử dụng mình không thấy khác biệt vẹo gì cả 😀

Số lượng request hàng ngày ở tầm kiểm soát của gói miễn phí, các trang bài viết và hình ảnh nhiều hơn, có thể vượt quá mức miễn phí của Cloufflare

Kết luận

Phiên bản thèng bibica.net đang dùng có bổ xung thêm bước kiểm tra referer trên các query parameters, nôm na ảnh có ?w= chỉ load ra trên các domain bibica.net, static.bibica.net, comment.bibica.net

Không quá hài lòng về hiệu quả mang lại của bản v2, tham vọng của mình là nó phải nhanh hơn thấy rõ ở sử dụng thực tế, chứ không chỉ nhanh hơn ở số liệu

Lý thuyết v2 được thiết kế để chạy qua Cloudflare CDN, sẽ không sử dụng quá nhiều request miễn phí (100.000 request mỗi ngày), có điều không rõ thực tế sử dụng Cloudflare tính toán số liệu này kiểu gì, trên trang bibica.net trung bình 1 ngày dùng khoảng 6000-10.000 request, khá là nhiều so với dự đoán ban đầu