Categories WordPress

Host website WordPress tĩnh tại BunnyCDN bằng WP2Static mà không mất bình luận, tìm kiếm và contact form 7 (Phần 2)

WP2Static

Phần 1 của bài viết này ở đây.

6. Cài đặt tại BunnyCDN

BunnyCDN là dịch vụ CDN có latency (độ trễ) thấp nhất trên thế giới, điều đó giúp cho website của bạn có tốc độ cao nhất có thể. Chúng ta sẽ sử dụng dịch vụ này để cài đặt website tĩnh.

Bước 1. Thêm zone Storage

Nhìn bên tay trái bạn, rồi nhấn vào Storage, tiếp đó nhập tên và nhấn Add storage zone.

Bước 2. Kết nối storage zone với pull zone

Tại bước này bạn sẽ tích hợp chặt chẽ storage của bạn với pull zone để phục vụ tất cả các yêu cầu từ CDN.

Cách làm: bạn vẫn ở khu vực storage và nhấn vào tùy chọn Connected Pull Zones.

Tiếp đó bạn thiết lập tên cho pull zone. Với người dùng Việt Nam nói chung nên tắt tùy chọn vị trí South America & South Africa để giảm các chi phí không cần thiết trừ khi bạn có khách truy cập từ khu vực địa lý này.

Bước 3. Cài đặt chung (general settings)

  • Thêm ít nhất hai hostname tùy chỉnh dạng không-www và có-www, chẳng hạn như ten-mien-cua-ban.com, www.ten-mien-cua-ban.com;
  • Tôi sử dụng Cloudflare cho DNS vì nó hỗ trợ CNAME flattening;
  • Bạn đăng nhập Cloudflare và trỏ DNS như bên dưới. Sau đó bạn có thể cài đặt chứng chỉ SSL chỉ với một click.
CNAME ---- @ ------- ten-cdn-cua-ban.b-cdn.net -- DNS only Mode
CNAME --- www ------ @ --- DNS only Mode
A ------- dev ------ LEMP Server IP ------- DNS and Proxy mode

Lưu ý là bạn đừng sử dụng tính năng cache everything hoặc rule Ignore Query String của Cloudflare cho subdomain dạng dev. Để an toàn, hãy thêm quy tắc bỏ qua bộ nhớ cache ở đầu tất cả các quy tắc trang. URL phù hợp phải có dạng như thế này *ten-mien-cua-ban.com/*

OK, chúng ta sẽ chuyển sang bước kế tiếp.

Bước 4. Tối ưu hóa pull zone cho caching

  • Cache expiration time: tôn trọng cache-control của gốc;
  • Browser cache expiration time: ghi đè: không cache;
  • Query String Short: bật;
  • Disable cookies (vô hiệu hóa cookies): giữ bật cho cookieless cho tên miền;
  • Tối ưu hóa cho tài nguyên media: bật (nó có phí cao, nên nếu bạn muốn tiết kiệm thì không nên bật);
  • Vary cache: tắt hoàn toàn (quan trọng với kết quả tìm kiếm, fbclid, utm và các query string tương tự liên quan đến trang);

Bước 5. Bảo mật pull zone

  • Bạn đừng block root path access;
  • BunnyCDN có cách hay để hiển thị chi tiết logs. Keep Logging Enabled nghĩa là bạn bật cái này. Nó sẽ có ích trong việc gỡ lỗi kỹ thuật.

Cấu hình các rule edge

BunnyCDN cung cấp các rule edge để tùy biến hành vi của pull zone CDN. Tại thời điểm này, không có tính năng ưu tiên để thực hiện quy tắc (rule) theo thứ tự. Trong trường hợp này, điều kiện Match None sẽ hữu dụng.

Case 1. Ép hostname tùy chỉnh và đường dẫn không-www

Trang web của bạn có thể truy cập thông qua địa chỉ BunnyCDN Pull Zone (ten-mien-cau-ban.b-cdn.net) cũng như hostname tùy chỉnh của bạn. Vì chúng ta quan tâm đến thương hiệu riêng, phục vụ tất cả các yêu cầu từ một địa chỉ hostname duy nhất là điều cần thiết:

  • Action: Redirect URL;
  • Description: Đổi tên miền tùy chỉnh và không-www;
  • Redirect URL: https://ten-mien-cua-ban.com{{path}} – tức là các tên miền dạng b-cdn.net và có-www sẽ được chuyển hướng về dạng không-www;
  • Condition matching: Match any nghĩa là khớp trong mọi tình huống;
  • Condition: If Request URL (match any) *://ten-mien-cua-ban.b-cdn.net/*
  • Condition: If Request URL (match any) *://www.ten-mien-cua-ban.com/*

Case 2. Quản lý các chuyển hướng hoặc tiếp thị liên kết

Ví dụ nếu bạn truy cập vào đường dẫn https://affiliate.gulshankumar.net/bunnycdn/ nó sẽ được chuyển hướng đến link tiếp thị liên kết BunnyCDN của tác giả gốc tiếng Anh của bài này.

Một số điều mà bạn cần biết:

  • Sử dụng Edge rule bạn có thể thiết lập chuyển hướng với phản hồi 301;
  • BunnyCDN phục vụ phản hồi HIT cho chuyển hướng với no-cache cho trình duyệt. Điều này giúp loại bỏ nguy cơ gửi cho người dùng liên kết cũ;
  • Trước đó, tôi đã có phản hồi tiêu đề x-robots: noindex, nofollow với phản hồi 3XX. Hiện tại, không thể gán nhiều hành động nhưng bạn có thể ghép nhiều thứ với nhau. Giải pháp là tôi giữ thẻ rel = "nofollow" trong HTML bất cứ khi nào có thể.
  • Action: Redirect URL
  • Description: Affiliate: BunnyCDN
  • Redirect URLhttps://bunnycdn.com/?ref=uhs82glvx4
  • Condition matching: Match any
  • Condition: If Request URL (match any) */go/bunnycdn/*

Phương pháp thay thế: Chuyển hướng 302 với phản hồi HTTP tùy chỉnh

Điều này sẽ yêu cầu hai yêu cầu HTTP. HTTP 200 đầu tiên cho /go/bunnycdn/ và 302 khác cho trang đích. Tôi cảm thấy cách tiếp cận này có thể hợp lý nếu quy tắc Edge trở thành một tính năng cao cấp sau một giới hạn nhất định trong tương lai!

  • Tạo một tệp /go/bunnycdn/index.html trong Storage như thế này.
  • Sau đó, đặt một tiêu đề phản hồi x-robots với giá trị noindex, nofollow

Case 3. Sử dụng bình luận & contact form 7 với website tĩnh

Để xử lý bình luận WordPress và Contact Form 7 trong website tĩnh, bạn dùng request proxy với địa chỉ của IP server gốc bằng cách khớp (match) URL. BunnyCDN xử lý phương thức “POST” rất ổn.

Ưu điểm:

  • Không yêu cầu thêm tìm kiếm DNS hoặc các yêu cầu HTTP;
  • Thân thiện với quyền riêng tư;
  • Rất nhanh;
  • Action: Override origin
  • Description: bình luận & contact form 7
  • Origin URL: nhập địa chỉ IP công khai của máy chủ gốc LEMP trong trong HTTPS scheme URL form của bạn;
  • Condition matching: ANY;
  • Conditions: If request URL (match any) ;
  • Triggerhttps://example.com/wp-comments-post.php
  • Triggerhttps://example.com/wp-json/contact-form-7/v1/contact-forms/1478/feedback

Một số điều cần quan tâm…

  • Bạn thay thế 1478 là ID của form trong mẫu trên bằng ID cụ thể của bạn trong Contact Form 7, thông tin này dễ dàng tìm thấy bên trong trang quản trị của WordPress;
  • Thiết lập response header Cache-Control: no-cache, no-store;

Lưu ý: max-age=0 không có nghĩa là trình duyệt không hỗ trợ cache.

Contact form 7 sử dụng content-type: application/json; charset=UTF-8 MIME type để đánh dấu request POST trong submission message nơi mà wp-comments-post.php sử dụng text/html; charset=UTF-8 và nó không nên được diễn giải như type text/html. Nếu bạn thêm các rule tương tự dựa trên MIME type thì hãy đảm bảo rằng bạn loại trừ các đường dẫn này sử dụng điều kiện MATCH NONE.

Case 4. Sửa các phần tử background bị vỡ

Plugin WP2Static mà tôi sử dụng trong hướng dẫn này có một lỗi nhỏ. Đôi khi nó không tìm nạp file background từ CSS.

Cách sửa: bạn sử dụng tính năng include additional URLs đi kèm với plugin này.

Case 5. Làm trang WordPress nhanh hơn với HTML caching

BunnyCDN rất linh hoạt khi chúng ta muốn cài đặt HTML caching. Họ hỗ trợ nhiều chuỗi để khớp request và thiết lập rule (quy tắc) tùy chỉnh phù hợp.

Nói một dân dã thì khi bạn mở bất kỳ trang web nào, trình duyệt sẽ gửi một số thông tin như user-agent, accept type, hostname cho máy chủ sử dụng Request Header và trả về một số thông tin sử dụng Header Response cho lập trình viên và trình duyệt xử lý nó. Trong phần này, chúng ta sẽ nói về HTTP header Response.

  • Cache-Control: header này được dùng để thiết lập hướng dẫn caching cho trình duyệt hoặc proxy;
  • max-age: gợi ý cho người dùng hoặc proxy có thể sử dụng nội dung phản hồi trước đó mà không cần bất cứ xác thực nào trong khoảng thời gian cố định;
  • s-maxage: cái này được ưu tiên hơn max-age để gợi ý khoảng thời gian mà một CDN / Proxy có thể phân phát phản hồi được lưu trong bộ nhớ cache.

Nội dung HTML thường được cập nhật mới, vì thế tốt hơn hết là bạn nên để thời gian phản hồi ngắn.

BunnyCDN hỗ trợ header last modified (chỉnh sửa lần cuối). Bạn có thể giữ max-age=0 để sử dụng hiệu quả phản hồi 304. Trình duyệt không cần tải toàn bộ nội dung phản hồi cho các request giống y trong lần kế tiếp, thay vào đó chỉ phản hồi HTTP mỗi khi kiểm tra xem trình duyệt có thể xử lý phản hồi cache hay là không. Nếu nó không khớp, thì nó sẽ tải nội dung mới nhất với mã status HTTP là 200.

Chúng ta sẽ không cache tất cả các request POST nhưng bất cứ cái nào khớp với kiểu nội dung text/html sẽ được cache.

  1. Action: Set Response Header;
  2. Description: HTML CDN Cache Excluding POST request path;
  3. Header nameCache-Control;
  4. Condition Matching: Match All;
  5. Header valuemax-age=0, s-maxage=25920000;
  6. Conditions: If Response Header (Any): Content-type: Trigger: text/html và text/xml cho Sitemap;
  7. Conditions: If Request URL (Match None) : Trigger: https://example.com/wp-comments-post.php or https://example.com/wp-json/contact-form-7/v1/contact-forms/1478/feedback;

Case 6. Thiết lập caching phía trình duyệt

Các tài nguyên tĩnh như CSS, JS, ảnh, vân vân không thay đổi nội dung thường xuyên (thậm chí ảnh gần như chắc chắn không thay đổi, thường là chúng ta thay ảnh mới). Nhưng điều đó không có nghĩa là bạn nên thiết lập thời gian cache một năm. 7 – 8 ngày là đủ rồi. Cũng vậy, có một vài lý do giải thích vì sao bạn nên tránh thời gian caching một năm:

  • Trong bước trước (Cài đặt Pull zone), liên quan đến chuỗi truy vấn tài liệu HTML như fbclid, utm, q, v.v. – chúng ta đã thiết lập BunnyCDN để phân phát bộ nhớ cache bằng cách bỏ qua tất cả chuỗi truy vấn.
  • Tuy nhiên, đối với “nội dung tĩnh” thì việc tôn trọng Query String tốt hơn là làm mất hiệu lực bộ nhớ cache, đây là điều cơ bản trong WordPress.
  • Thật không may, điều này hiện không thể với BunnyCDN để có khả năng cung cấp các phản hồi khác nhau theo Query String dành riêng cho nội dung tĩnh. Do đó, tôi cảm thấy tốt hơn là bạn nên đặt bộ nhớ đệm ngắn hạn cho nội dung tĩnh.;
  • Đừng lo lắng về công cụ. Cách làm được hướng dẫn ngay dưới đây;

Nghiên cứu của Facebook chỉ ra rằng trong 42% trường hợp, thời gian cache không lớn hơn 47 tiếng.

Nguồn: code.fb.com

Dưới đây là hướng dẫn:

Case 7. Bật HSTS

Nếu trước đó bạn sử dụng HSTS (bạn có thể vào đây để kiểm tra xem trang web gốc có đang dùng hay không), bạn nên tiếp tục sử dụng thông qua BunnyCDN. HSTS header hướng dẫn trình duyệt luôn tải request từ chỉ đường dẫn HTTPS. Bạn có thể thiết lập nó cho request text/html. Không cần làm điều này cho các tài nguyên tĩnh (ảnh, css, js).

  • Thiết lập responese header Strict-Transport-Security: max-age=63072000; includeSubDomains; preload cho chỉ request HTML;

Case 8. Thiết lập trang 404 tùy chỉnh

Case 9. Thực thi bộ mã UTF-8

Trong một số trường hợp, BunnyCDN gửi trang HTML mà không có thông tin bộ mã, do vậy tốt hơn là chúng ta nên chuyển ký tự UTF-8 cho trang HTML để tránh trường hợp lỗi font chữ.

(Dịch từ bài viết: Host Static WordPress at BunnyCDN With WP2Static without Losing Comment, Search, Contact Form 7, tác giả: Gulshan Kumar)

Back to Top