Thiết lập Domain Redirects cho Cloudflare Pages

4 min read

Tiếng Anh - English version

Cloudflare Pages là nhân tố mới trong giới JAMstack, bên cạnh Netlify và Vercel. Dù là nhân vật mới nhưng Cloudflare lại là cái tên được nhiều người biết đến nên dần nhiều người bắt đầu chuyển sang dịch vụ này của Cloudflare. Cloudflare Pages có nhiều ưu điểm để nhiều người cân nhắc nhưng cũng những vấn đề bạn phải cân chỉnh, thiết lập thì mới đạt được điều mình mong muốn. Một trong số đó là redirects.

Vấn đề

Cloudflare Pages hỗ trợ chức năng redirect thông qua file _redirects, tương tự như Netlify. Bạn có thể tạo một file như thế này:

/articles/*  /blog/:splat  301

Rule này redirect tất cả đường link blog của bạn từ dạng /articles/... sang /blog/.... Bạn có thể đọc thêm về phần này tại trang document của Cloudflare. Nhưng rule này cũng chỉ ở mức subpath, bạn không thể làm hai điều mà mình sắp hướng dẫn dưới đây thông qua file _redirects này được.

Redirect từ *.pages.dev sang custom domain của bạn

Tại sao phải làm điều này?

Khi bạn deploy project của mình lên Cloudflare Pages, địa chỉ domain đầu tiên mà bạn có sẽ là dạng *.pages.dev. Và rồi sau đó bạn có thể gán custom domain tùy úy cho trang này ở dashboard. Khi đã gán custom domain rồi thì trang ở *.pages.dev vẫn tồn tại riêng biệt mà nếu bạn muốn thống nhất địa chỉ trang web của mình thì bạn phải thiết lập redirect cho nó.

Tiến hành

  1. Đăng nhập vào Cloudflare dashboard và chọn account của bạn.

  2. Chọn Workers & Pages rồi chọn Pages mà bạn muốn.

  3. Vào Custom domains và kiểm tra lại xem custom domain của bạn có ở đó chưa. Nếu chưa, thêm mới bằng cách chọn Set up a custom domain.

  4. Tìm đến Account Home > Bulk Redirects.

  5. Chọn Create a new Bulk Redirects list > Create new list.

    Create new Bulk Redirect list

  6. Ở mục content type, chọn Redirect.

  7. Thêm domain *.pages.dev của project bạn vào source URL.

  8. Nhập target custom domain URL. Lưu ý là bạn phải thêm https:// vào trước tên apex domain (domain không có www).

  9. Click Edit parameters và tick chọn Preserve query string, Subpath matching, Preserve path suffix.

Nếu tick vào Include subdomains box, toàn bộ những URLs bản preview sẽ bị redirect tới custom domain chính.

  1. Click Add to list.

  2. Vào lại Bulk Redirects > Create Bulk Redirects > chọn list bạn vừa tạo > Save and Deploy.

    Create new Bulk Redirects

Redirect từ domain có www sang không có www (apex domain)

Trong một số trường hợp, thay vì muốn có domain www.example.com, người dùng lại muốn có domain gọn hơn dạng example.com trên thanh địa chỉ. Và việc thống nhất cách hiển thiện này cũng là điều thiết yếu trong quá trình phát triển trang web. Thông thường, các dịch vụ như Netlify hay Vercel hỗ trợ điều này không qua thiết lập DNS kèm theo số tinh chỉnh trực quan ở dashboard của họ. Riêng với Cloudflar Pages, bạn phải tự set up chức năng này, và cũng phải thông qua Bulk Redirects, chi tiết như sau:

  1. Đăng nhập vào Cloudflare dashboard, chọn account và website của bạn.

  2. Vào mục DNS.

  3. Tạo một record DNS mới cho subdomain www. Hoặc là A record với value là 192.0.2.1 hoặc là AAAA record với value là 100::. Record mới này cũng phải được mở proxy của Cloudflare (đám mây màu cam) để nó có thể tương thích với redirect rule mà chúng ta sẽ thiết lập sắp tới.

    DNS record setting

  4. Tiếp theo, tìm đến Account Home > Bulk Redirects và set up rule redirect tương tự như hướng dẫn phía trên (bạn có thể add thêm rule vào list đã được tạo ở trên), vẫn tick chọn vào Preserve query string, Subpath matching, Preserve path suffix. Và cuối cùng là Save and Deploy.

    Redirect parameters

Hi vọng hướng dẫn trên đây là giúp bạn phần nào trong quá trình chuyển sang Cloudflare Pages. Cheers!

> comment on bluesky
> cd ..