中文 (中国)
English
Việc triển khai một CDN (Mạng Phân Phối Nội Dung) để phân phối các tài nguyên tĩnh của website WordPress có thể giảm đáng kể lưu lượng băng thông trên máy chủ của bạn đồng thời tăng tốc độ tải trang cho người dùng ở nhiều vị trí địa lý khác nhau. Các tài nguyên tĩnh của WordPress bao gồm hình ảnh, các stylesheet CSS và các tệp JavaScript. Bằng cách tận dụng hệ thống các máy chủ biên (edge servers) được phân bố trên toàn cầu, một CDN sẽ lưu trữ các bản sao của các tài nguyên tĩnh trên mạng của nó nhằm giảm khoảng cách giữa người dùng cuối và các nội dung tiêu tốn nhiều băng thông.
Trong hướng dẫn trước, Cách Lưu Trữ Tài Nguyên WordPress Trên DataOnline Spaces, chúng ta đã hướng dẫn cách chuyển thư viện Media của WordPress sang DataOnline Spaces – một dịch vụ lưu trữ đối tượng với độ dư thừa cao. Việc này được thực hiện bằng cách sử dụng plugin DataOnline Spaces Sync, tự động đồng bộ hóa các tệp tải lên của WordPress sang Space của bạn, cho phép bạn xoá các tệp này khỏi máy chủ và giải phóng dung lượng ổ đĩa.
Trong hướng dẫn này, chúng ta sẽ mở rộng quy trình bằng cách kích hoạt CDN cho Spaces và viết lại URL của các tài nguyên trong thư viện Media. Điều này buộc trình duyệt của người dùng tải các tài nguyên tĩnh trực tiếp từ CDN – một tập hợp các máy chủ cache phân phối địa lý, tối ưu hóa cho việc phân phối nội dung tĩnh. Chúng ta sẽ cùng tìm hiểu cách kích hoạt CDN cho Spaces, cách viết lại các liên kết để phục vụ tài nguyên WordPress từ CDN, và cuối cùng là cách kiểm tra rằng các tài nguyên của website đang được phân phối đúng qua CDN.
Nếu bạn đang tìm kiếm một giải pháp lưu trữ hiệu quả và tiết kiệm chi phí, hãy khám phá các dịch vụ VPS giá rẻ. Chúng không chỉ giúp cải thiện hiệu suất website mà còn hỗ trợ tốt cho việc triển khai CDN, đảm bảo tốc độ tải trang nhanh chóng và ổn định.
Chúng tôi sẽ trình bày cách triển khai chuyển thư viện Media và viết lại liên kết bằng cách sử dụng plugin Spaces Sync miễn phí và mã nguồn mở. Đồng thời, chúng tôi cũng đề cập đến cách thực hiện việc này bằng hai plugin WordPress phổ biến có phí: WP Offload Media và Media Library Folders Pro. Bạn nên chọn plugin phù hợp nhất với nhu cầu sản xuất của mình.
Yêu Cầu Tiên Quyết
Trước khi bắt đầu, bạn cần có một cài đặt WordPress đang chạy trên LAMP hoặc LEMP. Bạn cũng cần cài đặt WP-CLI trên máy chủ WordPress, có thể tham khảo hướng dẫn cài đặt WP-CLI.
Để chuyển thư viện Media, bạn cần có một DataOnline Space và một cặp khóa truy cập (access key pair):
● Để biết cách tạo Space, hãy tham khảo Tài liệu sản phẩm Spaces.
● Để biết cách tạo cặp khóa truy cập và tải tệp lên Space bằng công cụ mã nguồn mở s3cmd, hãy xem Thiết lập s3cmd 2.x.
Có một số plugin WordPress mà bạn có thể sử dụng để chuyển các tài nguyên của WordPress:
● DataOnline Spaces Sync
Đây là một plugin WordPress miễn phí và mã nguồn mở giúp chuyển thư viện Media của bạn sang một DataOnline Space. Bạn có thể tìm hiểu cách thực hiện việc này trong bài Cách Lưu Trữ Tài Nguyên WordPress Trên DataOnline Spaces.
● WP Offload Media
Plugin có phí này sao chép các tệp từ thư viện Media của WordPress sang DataOnline Spaces và viết lại các URL để phục vụ tệp từ CDN. Plugin còn có addon Assets Pull, có thể nhận diện các tài nguyên (CSS, JS, hình ảnh, v.v.) được sử dụng bởi website (ví dụ như từ giao diện WordPress) và phục vụ chúng từ CDN.
● Media Library Folders Pro
Một plugin có phí khác giúp bạn tổ chức các tài nguyên trong thư viện Media của WordPress, cũng như chuyển chúng sang DataOnline Spaces.
Việc sử dụng tên miền tùy chỉnh với Spaces CDN được khuyến nghị cao. Điều này sẽ cải thiện đáng kể SEO cho website của bạn bằng cách giữ URL của tài nguyên được chuyển tải tương tự như URL của website WordPress. Để sử dụng tên miền tùy chỉnh với Spaces CDN, bạn cần đảm bảo đã thêm tên miền đó vào tài khoản DataOnline của bạn:
● Để biết cách thực hiện, hãy tham khảo Cách Thêm Tên Miền.
Với mục đích kiểm tra, hãy đảm bảo bạn có trình duyệt web hiện đại như Google Chrome hoặc Firefox được cài đặt trên máy tính khách (ví dụ: laptop).
Khi bạn đã có cài đặt WordPress đang chạy và đã tạo DataOnline Space, bạn đã sẵn sàng kích hoạt CDN cho Space và bắt đầu với hướng dẫn này.
Kích Hoạt DataOnline Spaces CDN
Chúng ta sẽ bắt đầu hướng dẫn này bằng cách kích hoạt CDN cho DataOnline Space của bạn. Việc này sẽ không ảnh hưởng đến tính khả dụng của các đối tượng (objects) hiện có. Khi CDN được kích hoạt, các đối tượng trong Space của bạn sẽ được “đẩy ra” đến các bộ nhớ cache biên trên toàn mạng lưới phân phối nội dung, và một URL điểm cuối (endpoint) CDN mới sẽ được cung cấp cho bạn. Để tìm hiểu thêm về cách thức hoạt động của CDN, hãy xem bài Sử Dụng CDN Để Tăng Tốc Phân Phối Nội Dung Tĩnh.
Đầu tiên, kích hoạt CDN cho Space của bạn bằng cách làm theo Hướng Dẫn Kích Hoạt DataOnline Spaces CDN.
Nếu bạn muốn sử dụng tên miền tùy chỉnh với Spaces CDN (được khuyến nghị), hãy tạo bản ghi CNAME cho tên miền phụ và thiết lập chứng chỉ SSL phù hợp theo Hướng Dẫn Tùy Chỉnh Điểm Cuối CDN Với Tên Miền Phụ. Ghi chú lại tên miền phụ bạn sẽ sử dụng với Spaces CDN, vì bạn sẽ cần nó khi cấu hình plugin chuyển tải tài nguyên WordPress.
Quay lại Space của bạn và tải lại trang. Bạn sẽ thấy một liên kết “Endpoints” mới xuất hiện dưới tên của Space
Các endpoint này chứa tên của Space của bạn. Trong hướng dẫn này, chúng ta sử dụng wordpress-offload.
Lưu ý sự bổ sung của endpoint Edge mới. Endpoint này định tuyến các yêu cầu đối với các đối tượng của Spaces thông qua CDN, phục vụ chúng từ bộ nhớ cache biên càng nhiều càng tốt. Ghi chú lại endpoint Edge này, vì bạn sẽ dùng nó để cấu hình plugin chuyển tải tài nguyên WordPress trong các bước sau. Nếu bạn đã tạo tên miền phụ cho Spaces CDN, tên miền phụ đó là bí danh của endpoint Edge.
Giờ đây, sau khi kích hoạt CDN cho Space, bạn đã sẵn sàng để cấu hình plugin chuyển tải tài nguyên và viết lại liên kết.
Nếu bạn sử dụng DataOnline Spaces Sync và tiếp tục từ hướng dẫn Cách Lưu Trữ Tài Nguyên WordPress Trên DataOnline Spaces, hãy bắt đầu từ phần tiếp theo. Nếu không sử dụng Spaces Sync, hãy chuyển sang phần WP Offload Media hoặc Media Library Folders Pro và CDN Enabler Plugins, tùy thuộc vào plugin bạn chọn.
Plugin DataOnline Spaces Sync
Nếu bạn muốn sử dụng các plugin DigitalOcean Spaces Sync và CDN Enabler miễn phí, mã nguồn mở để phục vụ các tệp của mình từ bộ nhớ cache biên của CDN, hãy làm theo các bước được trình bày trong phần này.
Chúng ta sẽ bắt đầu bằng cách đảm bảo rằng cài đặt WordPress và plugin Spaces Sync đã được cấu hình đúng cách và đang phục vụ các tài nguyên từ DigitalOcean Spaces.
Cấu Hình Plugin DataOnline Spaces Sync
Tiếp tục từ hướng dẫn Cách Lưu Trữ Tài Nguyên WordPress Trên DataOnline Spaces, thư viện Media của bạn đã được chuyển sang DataOnline Space và cài đặt của plugin Spaces Sync của bạn nên trông giống như sau:
(Nếu bạn chưa hoàn thành hướng dẫn “Cách Lưu Trữ Tài Nguyên WordPress Trên DataOnline Spaces”, bạn vẫn có thể làm theo hướng dẫn này bằng cách cài đặt plugin Spaces Sync qua trình cài đặt có sẵn của WordPress. Nếu gặp lỗi, hãy tham khảo các bước trong hướng dẫn tiên quyết.)
Chúng ta sẽ thực hiện một số thay đổi nhỏ để đảm bảo cấu hình của chúng ta cho phép chuyển các tài nguyên của giao diện WordPress và các thư mục khác ngoài thư mục Media Library wp-content/uploads.
Đầu tiên, ta sẽ chỉnh sửa trường Full URL-path to files sao cho các tệp trong thư viện Media được phục vụ từ CDN của Space, không phải từ máy chủ cục bộ. Cài đặt này về cơ bản sẽ viết lại liên kết của các tài nguyên trong thư viện Media, chuyển từ các liên kết tệp được lưu trữ cục bộ trên máy chủ WordPress sang các liên kết tệp được lưu trữ trên DataOnline Spaces CDN.
Lưu ý lại endpoint Edge đã được ghi chú ở bước Kích Hoạt Spaces CDN. Nếu bạn sử dụng tên miền phụ tùy chỉnh với Spaces CDN, bạn sẽ sử dụng tên miền phụ đó thay cho endpoint Edge.
Trong hướng dẫn này, tên của Space là wordpress-offload và endpoint CDN của Space là:
https://wordpress-offload.nyc3.cdn.digitaloceanspaces.com
Giờ, trên trang cài đặt của plugin Spaces Sync, thay thế URL trong trường Full URL-path to files bằng endpoint CDN của Space của bạn, sau đó thêm /wp-content/uploads.
Ví dụ, với endpoint CDN ở trên, URL đầy đủ sẽ là:
https://wordpress-offload.nyc3.cdn.digitaloceanspaces.com/wp-content/uploads
Nếu bạn sử dụng tên miền phụ tùy chỉnh, chẳng hạn như https://assets.example.com, URL đầy đủ sẽ là:
https://assets.example.com/wp-content/uploads
Tiếp theo, trong trường Local path, nhập đường dẫn đầy đủ tới thư mục wp-content/uploads trên máy chủ WordPress của bạn. Trong hướng dẫn này, đường dẫn tới cài đặt WordPress trên máy chủ là /var/www/html/, vì vậy đường dẫn đầy đủ tới uploads sẽ là /var/www/html/wp-content/uploads.
Lưu ý: Nếu bạn tiếp tục từ hướng dẫn “Cách Lưu Trữ Tài Nguyên WordPress Trên DataOnline Spaces”, hướng dẫn này sẽ điều chỉnh nhẹ đường dẫn tới các tệp trong Space nhằm cho phép bạn chuyển các thư mục khác của WordPress ngoài thư mục Media Library. Bạn nên xoá sạch Space trước khi làm điều này (hãy sao lưu các tệp), hoặc bạn có thể chuyển các tệp hiện có vào thư mục wp-content/uploads đúng của Space bằng s3cmd.
Trong trường Storage prefix, nhập /wp-content/uploads để đảm bảo rằng chúng ta xây dựng đúng cấu trúc thư mục wp-content, từ đó có thể chuyển các thư mục khác của WordPress sang Space này.
Trường Filemask có thể để ở dạng wildcard với *, trừ khi bạn muốn loại trừ một số tệp nhất định.
Không cần đánh dấu chọn Store files only in the cloud and delete…; chỉ đánh dấu nếu bạn muốn xoá các tài nguyên trong thư viện Media khỏi máy chủ sau khi chúng được tải lên thành công vào DataOnline Space.
Cài đặt cuối cùng của bạn sẽ giống như sau:
Hãy đảm bảo thay thế các giá trị trên bằng giá trị tương ứng với cài đặt WordPress và cấu hình của Space của bạn.
Cuối cùng, nhấn Save Changes.
Bạn sẽ thấy một hộp thông báo “Settings saved” xuất hiện ở đầu trang, xác nhận rằng cài đặt của plugin Spaces Sync đã được cập nhật thành công.
Các tệp tải lên thư viện Media của WordPress từ nay sẽ được đồng bộ sang DataOnline Space của bạn và phục vụ qua DataOnline Spaces CDN.
Trong bước này, chúng ta chưa chuyển các tài nguyên của giao diện WordPress hoặc các tài sản wp-content khác. Để biết cách chuyển các tài nguyên này sang Space và phục vụ chúng bằng DataOnline Spaces CDN, hãy chuyển sang phần Offloading Additional Assets.
Plugin WP Offload Media
Plugin WP Offload Media của DeliciousBrains cho phép bạn nhanh chóng và tự động tải các tài nguyên trong thư viện Media của WordPress lên DataOnline Space và viết lại liên kết tới các tài nguyên đó để bạn có thể phục vụ chúng trực tiếp từ Space hoặc qua DataOnline Spaces CDN. Ngoài ra, addon Assets Pull còn cho phép bạn chuyển các tài sản WordPress bổ sung như JS, CSS, và font kết hợp với pull CDN. Thiết lập addon này nằm ngoài phạm vi của hướng dẫn này, hãy tham khảo Tài liệu WP Offload Media của DeliciousBrains để tìm hiểu thêm.
Cài Đặt Plugin WP Offload Media
Để bắt đầu, bạn phải mua bản quyền plugin trên trang của DeliciousBrains. Chọn phiên bản phù hợp dựa trên số lượng tài nguyên trong thư viện Media và yêu cầu hỗ trợ, tính năng cho website của bạn.
Sau khi hoàn tất thanh toán, bạn sẽ được chuyển đến trang sau mua kèm theo đường link tải plugin và mã license. Đường link tải và mã license cũng sẽ được gửi tới email bạn đã cung cấp khi mua plugin.
Tải plugin về và điều hướng tới giao diện quản trị của WordPress (https://your_site_url/wp-admin). Đăng nhập nếu cần. Từ đây, di chuột qua mục Plugins và nhấp vào Add New.
Nhấn Upload Plugin ở đầu trang, sau đó nhấn Choose File và chọn tệp zip vừa tải về.
Nhấn Install Now, sau đó nhấn Activate Plugin. Bạn sẽ được chuyển đến giao diện quản trị plugin của WordPress.
Cấu Hình WP Offload Media
Sau đó, điều hướng tới trang cài đặt của plugin WP Offload Media bằng cách nhấp vào Settings dưới tên plugin.
Bạn sẽ được đưa đến giao diện cấu hình như sau:
Nhấn chọn radio button bên cạnh DataOnline Spaces. Bạn sẽ được yêu cầu cấu hình khóa truy cập (Spaces Access Key) của bạn trong file wp-config.php (khuyến nghị) hoặc trực tiếp trong giao diện web (cách sau sẽ lưu thông tin xác thực vào cơ sở dữ liệu WordPress).
Chúng ta sẽ cấu hình khóa truy cập trong file wp-config.php.
Đăng nhập vào máy chủ WordPress qua dòng lệnh và điều hướng đến thư mục gốc của WordPress (trong hướng dẫn này là /var/www/html). Mở file wp-config.php bằng trình soạn thảo ưa thích:
sudo nano wp-config.php
Cuộn xuống dòng có nội dung /* That's all, stop editing! Happy blogging. */ và chèn các dòng sau vào trước dòng này, chứa cặp khóa truy cập (để biết cách tạo cặp khóa truy cập, hãy tham khảo tài liệu sản phẩm Spaces):
wp-config.php
. . .
define( 'AS3CF_SETTINGS', serialize( array(
'provider' => 'do',
'access-key-id' => 'your_access_key_here',
'secret-access-key' => 'your_secret_key_here',
) ) );
/* That's all, stop editing! Happy blogging. */
. . .
Sau khi chỉnh sửa xong, lưu và đóng file. Các thay đổi sẽ có hiệu lực ngay lập tức.
Trở lại giao diện quản trị của plugin WP Offload Media, chọn radio button bên cạnh Define access keys in wp-config.php và nhấn Save Changes.
Bạn sẽ được chuyển đến giao diện cấu hình chính của WP Offload Media. Ở đầu trang, bạn sẽ thấy một hộp cảnh báo.
Nhấp vào “enter your license key” và trên trang tiếp theo, nhập mã license được gửi qua email hoặc hiển thị trên trang thanh toán và nhấn Activate License.
Nếu mã license được nhập chính xác, bạn sẽ thấy thông báo “License activated successfully.”
Bây giờ, điều hướng lại về trang cấu hình chính của WP Offload Media bằng cách nhấp vào Media Library ở đầu cửa sổ.
Nhấp vào enter your license key, sau đó trên trang tiếp theo, nhập mã license được tìm thấy trong email xác nhận thanh toán hoặc trên trang thanh toán, rồi nhấn Activate License.
Nếu bạn nhập mã license chính xác, bạn sẽ thấy thông báo License activated successfully (Kích hoạt giấy phép thành công).
Bây giờ, quay lại trang cấu hình chính của WP Offload Media bằng cách nhấp vào Media Library ở đầu cửa sổ.
Tại thời điểm này, WP Offload Media đã được cấu hình thành công để sử dụng với DigitalOcean Space. Bạn có thể bắt đầu chuyển các tài nguyên và phục vụ chúng thông qua Spaces CDN.
Cấu Hình WP Offload Media
Khi đã liên kết WP Offload Media với DataOnline Space của bạn, bạn có thể bắt đầu chuyển tải các tài nguyên và cấu hình viết lại URL để phục vụ tài nguyên từ DataOnline Spaces CDN.
Bạn sẽ thấy các tùy chọn cấu hình sau trên trang chính của WP Offload Media.
Các cài đặt mặc định này thường phù hợp với hầu hết các trường hợp sử dụng. Nếu thư viện Media của bạn nằm ở đường dẫn không tiêu chuẩn trong cấu trúc WordPress, hãy nhập đường dẫn tương ứng vào ô Path.
Nếu bạn muốn thay đổi URL của tài nguyên sao cho chúng được phục vụ trực tiếp từ DataOnline Spaces thay vì máy chủ WordPress, hãy đảm bảo bật tùy chọn Rewrite Media URLs.
Để phục vụ các tài nguyên thư viện Media qua DataOnline Spaces CDN, hãy đảm bảo rằng bạn đã kích hoạt CDN cho Space (xem phần Kích Hoạt DataOnline Spaces CDN ở trên) và ghi chú lại URL của endpoint Edge. Nhấn bật tùy chọn Custom Domain (CNAME) và nhập URL của endpoint CDN Edge, không bao gồm tiền tố https://.
Trong hướng dẫn này, endpoint CDN của Space là:
https://wordpress-offload.nyc3.cdn.digitaloceanspaces.com
Vậy nên, bạn nhập:
wordpress-offload.nyc3.cdn.digitaloceanspaces.com
Nếu bạn sử dụng tên miền phụ tùy chỉnh với Spaces CDN, nhập tên miền phụ đó, ví dụ:
your_subdomain.example.com
Để tăng cường bảo mật, chúng ta sẽ buộc sử dụng HTTPS cho các yêu cầu tới tài nguyên thư viện Media (hiện đang phục vụ qua CDN) bằng cách bật tùy chọn này.
Bạn cũng có thể xoá các tệp đã được chuyển tải từ thư viện Media khỏi máy chủ WordPress để giải phóng dung lượng ổ đĩa. Để làm việc này, bật tùy chọn Remove Files From Server.
Sau khi hoàn tất cấu hình WP Offload Media, nhấn Save Changes ở cuối trang để lưu cài đặt.
Hộp URL Preview sẽ hiển thị một URL chứa endpoint CDN của Space. URL này có dạng:
Nếu bạn sử dụng tên miền phụ tùy chỉnh với Spaces CDN, URL preview sẽ chứa tên miền phụ đó.
URL này cho thấy WP Offload Media đã được cấu hình thành công để phục vụ các tài nguyên thư viện Media qua DataOnline Spaces CDN. Nếu URL không chứa “cdn”, hãy kiểm tra lại xem bạn đã nhập đúng endpoint Edge và không phải là URL Origin (điều này không áp dụng khi sử dụng tên miền phụ tùy chỉnh).
Tại thời điểm này, WP Offload Media đã được thiết lập để phục vụ thư viện Media của bạn qua DataOnline Spaces CDN. Mọi tệp tải lên trong tương lai sẽ được tự động sao chép sang DataOnline Space và phục vụ qua CDN.
Bạn cũng có thể chuyển tải hàng loạt các tài nguyên hiện có trong thư viện Media bằng công cụ tải lên tích hợp sẵn của plugin.
Chuyển Tải Thư Viện Media
Chúng ta sẽ sử dụng công cụ “Upload Tool” tích hợp của plugin WP Offload Media để chuyển các tệp hiện có trong thư viện Media của WordPress sang DataOnline Space.
Ở phía bên phải của trang cấu hình chính của WP Offload Media, bạn sẽ thấy một hộp như sau:
Nhấn Offload Now để tải các tệp thư viện Media của bạn lên DataOnline Space.
Nếu quy trình tải lên bị gián đoạn, hộp này sẽ hiển thị thông báo thay đổi, chẳng hạn như:
Nhấn Offload Remaining Now để chuyển các tệp còn lại sang DataOnline Space.
Khi các mục trong thư viện Media đã được chuyển hết, bạn sẽ thấy các hộp thông báo mới xuất hiện:
Tại thời điểm này, bạn đã chuyển thư viện Media của WordPress sang Space và phục vụ các tệp đó qua DataOnline Spaces CDN.
Bất cứ lúc nào, bạn có thể tải các tệp từ DataOnline Space về máy chủ WordPress bằng cách nhấn Download Files.
Bạn cũng có thể xoá sạch DataOnline Space bằng cách nhấn Remove Files. Trước khi làm việc này, hãy chắc chắn rằng bạn đã tải lại các tệp về máy chủ WordPress từ Space.
Trong bước này, chúng ta đã học cách chuyển thư viện Media của WordPress sang DataOnline Spaces và viết lại liên kết tới các tài nguyên thư viện Media bằng plugin WP Offload Media.
Để chuyển các tài sản WordPress bổ sung như giao diện và các tệp JavaScript, bạn có thể sử dụng addon Assets Pull hoặc tham khảo phần Offloading Additional Assets trong hướng dẫn này.
Để kiểm tra và xác nhận rằng các tài nguyên thư viện Media đang được phân phối qua DataOnline Spaces CDN, hãy chuyển sang phần Testing CDN Caching.
Plugin Media Library Folders Pro và CDN Enabler
Plugin Media Library Folders Pro của MaxGalleria là một công cụ tiện dụng cho WordPress giúp bạn tổ chức tốt hơn các tài nguyên trong thư viện Media. Ngoài ra, addon miễn phí cho Spaces cho phép bạn chuyển hàng loạt các tài nguyên thư viện Media sang DataOnline Spaces và viết lại URL của các tài nguyên đó để phục vụ chúng trực tiếp từ lưu trữ đối tượng. Sau đó, bạn có thể kích hoạt DataOnline Spaces CDN và sử dụng endpoint CDN của Space để phục vụ các tài nguyên thư viện Media từ mạng phân phối. Để thực hiện bước cuối cùng này, bạn có thể sử dụng plugin CDN Enabler để viết lại các URL endpoint CDN của thư viện Media.
Chúng ta sẽ bắt đầu bằng cách cài đặt và cấu hình plugin Media Library Folders Pro (MLFP), sau đó cài đặt và cấu hình addon MLFP Spaces để chuyển thư viện Media. Cuối cùng, chúng ta sẽ cài đặt và cấu hình plugin CDN Enabler để phục vụ các tài nguyên thư viện Media qua DataOnline Spaces CDN.
Cài Đặt Plugin MLFP
Sau khi mua plugin MLFP, bạn sẽ nhận được email chứa thông tin tài khoản MaxGalleria cũng như đường link tải plugin. Nhấp vào link tải để tải về file zip của plugin MLFP về máy tính của bạn.
Sau khi tải xong, đăng nhập vào giao diện quản trị của WordPress (https://your_site_url/wp-admin) và điều hướng đến Plugins → Add New ở thanh bên trái.
Từ trang Add Plugins, nhấp vào Upload Plugin và chọn file zip bạn vừa tải về.
Nhấn Install Now để hoàn tất cài đặt plugin, sau đó nhấn Activate Plugin để kích hoạt MLFP.
Bạn sẽ thấy mục Media Library Folders Pro xuất hiện ở thanh bên trái.
Nhấp vào mục này để vào giao diện của Media Library Folders Pro. Việc trình bày các tính năng của plugin nằm ngoài phạm vi của hướng dẫn này, nhưng để tìm hiểu thêm, bạn có thể tham khảo trang và diễn đàn của MaxGalleria.
Bây giờ, hãy kích hoạt plugin. Nhấp vào Settings dưới mục MLFP và nhập mã license vào ô License Key. Mã license này được gửi qua email khi bạn mua plugin. Nhấn Save Changes và sau đó nhấn Activate License. Tiếp theo, nhấn Update Settings.
Plugin MLFP của bạn đã được kích hoạt, và bạn có thể sử dụng nó để tổ chức các tài nguyên thư viện Media cho website WordPress của mình.
Cài Đặt Addon MLFP Spaces Và Chuyển Thư Viện Media
Để cài đặt addon Spaces, đăng nhập vào tài khoản MaxGalleria của bạn. Thông tin tài khoản sẽ được gửi qua email khi bạn mua plugin MLFP.
Đi đến trang Addons trên thanh menu phía trên và cuộn xuống mục Media Sources. Từ đây, nhấp vào tùy chọn Media Library Folders Pro S3 and Spaces.
Cuộn xuống phần Pricing và chọn gói phù hợp với kích thước thư viện Media của bạn (đối với thư viện Media có 3000 hình ảnh trở xuống, addon là miễn phí).
Sau khi hoàn tất “mua” addon, quay trở lại trang tài khoản của bạn (bằng cách nhấp vào Account trên thanh menu phía trên), addon plugin sẽ xuất hiện.
Nhấp vào hình ảnh Media Library Folders Pro S3 để bắt đầu tải plugin về.
Sau khi tải xong, điều hướng trở lại giao diện quản trị WordPress và cài đặt plugin vừa tải về bằng cách nhấp vào Upload Plugin. Sau đó, nhấn Activate Plugin để kích hoạt addon.
Có thể bạn sẽ nhận được cảnh báo về việc cấu hình khóa truy cập trong file wp-config.php. Hãy cấu hình chúng ngay bây giờ.
Đăng nhập vào máy chủ WordPress qua console hoặc SSH, điều hướng đến thư mục gốc của WordPress (trong hướng dẫn này là /var/www/html). Mở file wp-config.php bằng trình soạn thảo:
sudo nano wp-config.php
Cuộn xuống dòng có nội dung /* That's all, stop editing! Happy blogging. */ và chèn các dòng sau vào trước dòng này, chứa cặp khóa truy cập (để biết cách tạo cặp khóa truy cập, hãy tham khảo tài liệu sản phẩm Spaces):
wp-config.php
. . .
define('MF_AWS_ACCESS_KEY_ID', 'your_access_key_here');
define( 'MF_AWS_SECRET_ACCESS_KEY', 'your_secret_key_here');
define('MF_CLOUD_TYPE', 'do')
/* That's all, stop editing! Happy blogging. */
. . .
Sau khi chỉnh sửa xong, lưu và đóng file.
Giờ, đăng nhập vào DataOnline Space của bạn từ DataOnline Cloud Control Panel, tạo một thư mục mới có tên wp-content bằng cách nhấp vào New Folder.
Quay lại giao diện quản trị WordPress, nhấp vào Media Library Folders Pro và sau đó vào S3 & Spaces Settings trong thanh bên.
Cảnh báo về cấu hình khóa truy cập sẽ biến mất. Nếu cảnh báo vẫn còn, hãy kiểm tra lại file wp-config.php để phát hiện lỗi chính tả hoặc cú pháp.
Trong ô License Key, nhập mã license được gửi qua email sau khi mua addon. Lưu ý rằng mã license này khác với mã license của MLFP. Nhấn Save Changes và sau đó Activate License.
Sau khi kích hoạt, bạn sẽ thấy giao diện cấu hình như sau:
Từ đây, nhấp vào Select Image Bucket & Region để chọn DataOnline Space của bạn. Sau đó, chọn khu vực (region) phù hợp và nhấn Save Bucket Selection.
Bạn đã kết nối thành công plugin chuyển tải của Spaces với DataOnline Space của bạn. Bạn có thể bắt đầu chuyển các tài nguyên thư viện Media của WordPress sang Space.
Tùy chọn Use files on the cloud server cho phép bạn chỉ định nơi mà tài nguyên thư viện Media sẽ được phục vụ. Nếu bạn đánh dấu, các tài nguyên sẽ được phục vụ từ DataOnline Spaces, và các URL của hình ảnh và các đối tượng Media sẽ được viết lại tương ứng. Nếu bạn dự định sử dụng DataOnline Spaces CDN để phục vụ các tài nguyên thư viện Media, đừng đánh dấu tùy chọn này vì plugin sẽ sử dụng endpoint Origin của Spaces thay vì endpoint CDN Edge. Chúng ta sẽ cấu hình viết lại liên kết CDN trong bước sau.
Nhấp vào tùy chọn Remove files from local server để xoá các tài nguyên thư viện Media khỏi máy chủ sau khi chúng đã được chuyển tải thành công sang DataOnline Spaces.
Tùy chọn Remove individual downloaded files from the cloud server được sử dụng khi tải hàng loạt các tệp từ Spaces về máy chủ WordPress. Nếu được đánh dấu, các tệp này sẽ bị xoá khỏi Space sau khi tải về thành công. Trong hướng dẫn này, chúng ta có thể bỏ qua tùy chọn này.
Vì chúng ta cấu hình plugin để sử dụng với DataOnline Spaces CDN, hãy để trống tùy chọn Use files on the cloud server và nhấn Copy Media Library to the cloud server để đồng bộ thư viện Media của website với DataOnline Space.
Bạn sẽ thấy một hộp tiến trình xuất hiện, sau đó thông báo Upload complete cho biết việc đồng bộ thư viện Media đã hoàn tất thành công.
Đi đến DataOnline Space để xác nhận rằng các tệp trong thư viện Media đã được sao chép vào Space. Chúng sẽ có sẵn trong thư mục uploads bên trong thư mục wp-content mà bạn đã tạo ở bước này.
Sau khi các tệp đã có sẵn trong Space, bạn đã sẵn sàng chuyển sang cấu hình DataOnline Spaces CDN.
Cài Đặt Plugin CDN Enabler Để Phục Vụ Tài Nguyên Qua DataOnline Spaces CDN
Để sử dụng DataOnline Spaces CDN để phục vụ các tệp đã được chuyển tải, trước tiên hãy đảm bảo rằng bạn đã kích hoạt CDN cho Space.
Sau khi CDN đã được kích hoạt cho Space, bạn có thể cài đặt và cấu hình plugin CDN Enabler của WordPress để viết lại các liên kết tới các tài nguyên thư viện Media của bạn. Plugin này sẽ viết lại các liên kết sao cho các tài nguyên được phục vụ từ endpoint CDN của Space.
Để cài đặt CDN Enabler, bạn có thể sử dụng menu Plugins trong giao diện quản trị WordPress, hoặc cài đặt trực tiếp qua dòng lệnh. Chúng tôi sẽ trình bày cách thực hiện qua dòng lệnh.
Đầu tiên, đăng nhập vào máy chủ WordPress. Sau đó, điều hướng tới thư mục plugins:
cd /var/www/html/wp-content/plugins
Từ dòng lệnh, sử dụng WP-CLI để cài đặt plugin:
wp plugin install cdn-enabler
Sau đó, kích hoạt plugin:
wp plugin activate cdn-enabler
Bạn cũng có thể cài đặt và kích hoạt plugin CDN Enabler qua trình cài đặt plugin tích hợp sẵn.
Quay lại giao diện quản trị WordPress, dưới mục Settings, bạn sẽ thấy một liên kết mới đến cài đặt CDN Enabler. Nhấp vào đó.
Bạn sẽ thấy giao diện cài đặt như sau:
Chỉnh sửa các trường theo hướng dẫn sau:
● CDN URL: Nhập endpoint CDN Edge của Space, mà bạn đã lấy từ bảng điều khiển DataOnline Spaces. Trong hướng dẫn này, endpoint là
Nếu bạn sử dụng tên miền phụ tùy chỉnh với Spaces CDN, nhập tên miền phụ đó, ví dụ:
● Included Directories: Nhập wp-content/uploads. (Nếu bạn sử dụng plugin MLFP, giá trị này sẽ là wp-content/uploads,wp-content/themes.)
● Exclusions: Để mặc định là .php
● Relative Path: Để tùy chọn này được đánh dấu
● CDN HTTPS: Bật tùy chọn này
● Các trường còn lại để trống
Nhấn Save Changes để lưu các cài đặt và kích hoạt chúng cho website WordPress của bạn.
Tại thời điểm này, bạn đã chuyển tải thành công các tài nguyên thư viện Media của website WordPress sang DataOnline Spaces và đang phục vụ chúng qua CDN.
Trong bước này, chúng ta chưa chuyển các tài sản của giao diện WordPress hoặc các tài nguyên wp-content khác. Để biết cách chuyển các tài sản này sang Space và phục vụ chúng qua DataOnline Spaces CDN, hãy chuyển sang phần Offloading Additional Assets.
Để kiểm tra và xác nhận rằng các tài nguyên thư viện Media đang được phân phối qua DataOnline Spaces CDN, hãy chuyển sang phần Testing CDN Caching.
Offloading Additional Assets (Tùy Chọn)
Trong các phần trước của hướng dẫn, chúng ta đã học cách chuyển thư viện Media của website sang DataOnline Spaces và phục vụ các tệp đó qua DataOnline Spaces CDN. Trong phần này, chúng ta sẽ chuyển và phục vụ các tài sản WordPress bổ sung như giao diện, các tệp JavaScript và font. Phần lớn các tài sản tĩnh này nằm bên trong thư mục wp-content (chứa wp-themes).
Để chuyển và viết lại URL cho thư mục này, chúng ta sẽ sử dụng plugin CDN Enabler – một plugin mã nguồn mở được phát triển bởi KeyCDN.
Nếu bạn đang sử dụng plugin WP Offload Media, bạn có thể dùng addon Assets Pull để phục vụ các tệp này qua pull CDN. Việc cài đặt và cấu hình addon này nằm ngoài phạm vi hướng dẫn này. Để biết thêm chi tiết, hãy tham khảo trang sản phẩm của DeliciousBrains.
Đầu tiên, chúng ta sẽ cài đặt CDN Enabler. Sau đó, sao chép các giao diện WordPress sang Space, và cuối cùng cấu hình CDN Enabler để phục vụ các giao diện đó qua DataOnline Spaces CDN.
Nếu bạn đã cài đặt CDN Enabler ở bước trước, hãy chuyển sang Bước 2.
Bước 1 — Cài Đặt CDN Enabler
Đăng nhập vào máy chủ WordPress, sau đó điều hướng tới thư mục plugins:
cd /var/www/html/wp-content/plugins
Sử dụng WP-CLI để cài đặt plugin:
wp plugin install cdn-enabler
Sau đó, kích hoạt plugin:
wp plugin activate cdn-enabler
Bạn cũng có thể cài đặt và kích hoạt CDN Enabler qua giao diện quản trị plugin.
Quay lại giao diện quản trị WordPress, dưới mục Settings, bạn sẽ thấy một liên kết đến cài đặt CDN Enabler. Nhấp vào đó.
Tại thời điểm này, bạn đã cài đặt thành công CDN Enabler. Bây giờ, chúng ta sẽ tải các giao diện WordPress lên Spaces.
Bước 2 — Tải Các Tài Sản Tĩnh Của WordPress Lên DataOnline Spaces
Trong hướng dẫn này, để minh họa cấu hình cơ bản của plugin, chúng ta chỉ phục vụ thư mục wp-content/themes – thư mục chứa các tệp PHP, JavaScript, HTML và hình ảnh của giao diện WordPress. Bạn có thể mở rộng quy trình này cho các thư mục WordPress khác như wp-includes, hoặc thậm chí toàn bộ thư mục wp-content.
Giao diện được sử dụng trong hướng dẫn này là twentyseventeen, giao diện mặc định của WordPress khi cài đặt mới. Bạn có thể lặp lại các bước này cho bất kỳ giao diện hoặc nội dung WordPress nào.
Đầu tiên, tải giao diện của bạn lên DataOnline Space bằng cách sử dụng s3cmd. Nếu bạn chưa cấu hình s3cmd, hãy tham khảo
Đi tới thư mục wp-content của cài đặt WordPress:
cd /var/www/html/wp-content
Từ đây, tải thư mục themes lên DataOnline Space bằng s3cmd. Lưu ý rằng bạn có thể chọn tải lên một giao diện đơn lẻ, nhưng để đơn giản và chuyển tải càng nhiều nội dung càng tốt, chúng ta sẽ tải toàn bộ thư mục themes lên Space.
Chúng ta sẽ sử dụng lệnh find để xây dựng danh sách các tệp không phải PHP (vì có thể cache) và sau đó chuyển chúng qua s3cmd. Chúng ta sẽ loại trừ các tệp CSS vì cần thiết lập MIME type text/css khi tải lên.
find themes/ -type f -not \( -name '*.php' -or -name '*.css' \) | xargs -I{} s3cmd put --acl-public {} s3://wordpress-offload/wp-content/{}
Lưu ý: Hãy thay thế wordpress-offload trong lệnh trên bằng tên Space của bạn.
Ở đây, lệnh find tìm các tệp trong thư mục themes/, loại trừ các tệp có đuôi .php và .css. Sau đó, xargs -I{} sẽ lặp qua danh sách và thực hiện lệnh s3cmd put cho từng tệp, đặt quyền truy cập công khai với tùy chọn --acl-public.
Tiếp theo, thực hiện tương tự với các tệp CSS, thêm flag --mime-type="text/css" để thiết lập MIME type đúng cho các tệp stylesheet:
find themes/ -type f -name '*.css' | xargs -I{} s3cmd put --acl-public --mime-type="text/css" {} s3://wordpress-offload/wp-content/{}
Lưu ý: Hãy thay thế wordpress-offload trong lệnh trên bằng tên Space của bạn.
Sau khi tải giao diện lên, hãy xác nhận rằng nó có thể được tìm thấy ở đúng đường dẫn trong Space của bạn. Điều hướng tới Space qua DataOnline Cloud Control Panel, mở thư mục wp-content, sau đó thư mục themes. Bạn sẽ thấy thư mục của giao diện tại đây. Nếu không, hãy kiểm tra lại cấu hình s3cmd và tải giao diện lên lại.
Bước 3 — Cấu Hình CDN Enabler Để Viết Lại Liên Kết Tài Sản
Giờ, giao diện của bạn đã có trong Space và các metadata đã được đặt đúng, chúng ta có thể bắt đầu phục vụ các tệp giao diện qua CDN Enabler và DataOnline Spaces CDN.
Đi quay lại giao diện quản trị WordPress, nhấp vào Settings → CDN Enabler.
Chỉnh sửa các trường hiển thị theo các chỉ dẫn sau:
● CDN URL: Nhập endpoint CDN Edge của Space, như đã làm ở Bước 1. Trong hướng dẫn này, endpoint là:
Nếu bạn sử dụng tên miền phụ tùy chỉnh với Spaces CDN, nhập tên miền phụ đó, ví dụ:
● Included Directories: Nếu bạn không sử dụng plugin MLFP, giá trị này nên là wp-content/themes. Nếu bạn sử dụng MLFP, hãy nhập: wp-content/uploads,wp-content/themes.
● Exclusions: Để mặc định là .php
● Relative Path: Giữ ô này được đánh dấu
● CDN HTTPS: Bật tùy chọn này
● Các trường còn lại để trống
Nhấn Save Changes để lưu các cài đặt và kích hoạt chúng cho website WordPress của bạn.
Tại thời điểm này, bạn đã chuyển tải thành công các tài nguyên giao diện của website WordPress sang DataOnline Spaces và phục vụ chúng qua CDN. Bạn có thể xác nhận điều này bằng cách sử dụng DevTools của Chrome theo các bước dưới đây.
Sử dụng plugin CDN Enabler, bạn có thể lặp lại quá trình này cho các thư mục WordPress khác, như wp-includes hoặc thậm chí toàn bộ thư mục wp-content.
Kiểm Tra Caching của CDN
Trong phần này, chúng ta sẽ minh họa cách xác định nơi mà các tài nguyên WordPress của bạn đang được phục vụ (ví dụ: từ máy chủ lưu trữ của bạn hay từ CDN) bằng cách sử dụng DevTools của Google Chrome.
Bước 1 — Thêm Hình Ảnh Mẫu Vào Thư Viện Media Để Kiểm Tra Đồng Bộ
Đầu tiên, hãy tải một hình ảnh mẫu lên thư viện Media và xác nhận rằng nó đang được phục vụ từ các máy chủ CDN của DataOnline Spaces. Bạn có thể tải hình ảnh lên qua giao diện quản trị WordPress hoặc sử dụng wp-cli. Trong hướng dẫn này, chúng ta sẽ sử dụng wp-cli.
Đăng nhập vào máy chủ WordPress qua dòng lệnh, và điều hướng đến thư mục home của người dùng không phải root đã được cấu hình (ví dụ: sammy).
cd
Sau đó, sử dụng curl để tải logo DataOnline (hoặc nếu bạn đã có hình ảnh mẫu, bỏ qua bước này):
curl https://assets.digitalocean.com/logos/DO_Logo_horizontal_blue.png > do_logo.png
Lưu ý: Mặc dù trong URL có “digitalocean”, theo yêu cầu, tên thương hiệu DigitalOcean được đổi thành DataOnline chỉ khi xuất hiện trong văn bản hướng dẫn, nên giữ nguyên URL gốc nếu không ảnh hưởng đến nội dung kỹ thuật.
Bây giờ, sử dụng wp-cli để nhập hình ảnh vào thư viện Media:
wp media import --path=/var/www/html/ /home/sammy/do_logo.png
Lưu ý: Hãy thay thế /var/www/html bằng đường dẫn chính xác tới thư mục chứa các tệp WordPress của bạn.
Nếu quá trình nhập hình ảnh thành công, bạn sẽ thấy thông báo như sau:
Output Imported file '/home/sammy/do_logo.png' as attachment ID 10. Success: Imported 1 of 1 items.
Điều này cho thấy hình ảnh mẫu của bạn đã được sao chép vào thư viện Media và được tải lên DataOnline Space thông qua plugin chuyển tải.
Đi tới DataOnline Space để xác nhận.
Điều này cho thấy plugin chuyển tải của bạn đang hoạt động đúng như mong đợi và tự động đồng bộ các tệp tải lên của WordPress sang DigitalOcean Space. Lưu ý rằng đường dẫn chính xác đến thư viện Media trong Space sẽ phụ thuộc vào plugin mà bạn đang sử dụng để chuyển các tệp của WordPress.
Tiếp theo, chúng ta sẽ xác minh rằng tệp này đang được phục vụ thông qua Spaces CDN, chứ không phải từ máy chủ chạy WordPress.
Bước 2 — Kiểm Tra URL Tài Nguyên
Từ giao diện quản trị WordPress (https://your_domain/wp-admin), điều hướng đến mục Pages ở thanh bên trái.
Tạo một trang mẫu chứa hình ảnh bạn vừa tải lên để kiểm tra xem tài nguyên đang được phục vụ từ đâu. Bạn cũng có thể thêm hình ảnh vào một trang hiện có.
Từ màn hình Pages, nhấp vào trang Sample Page (hoặc trang hiện có). Bạn có thể tạo trang mới nếu cần.
Trong trình soạn thảo trang, nhấp vào Add Media và chọn hình ảnh DataOnline logo (hoặc hình ảnh mẫu bạn đã sử dụng).
Một khung Attachment Details sẽ xuất hiện ở bên phải màn hình. Từ khung này, thêm hình ảnh vào trang bằng cách nhấp vào Insert into page.
Sau đó, nhấp vào Publish (nếu tạo trang mới) hoặc Update (nếu chỉnh sửa trang hiện có) trong hộp Publish ở bên phải.
Giờ, truy cập trang vừa được cập nhật bằng cách nhấp vào Permalink dưới tiêu đề trang. Trang sẽ được mở ra trên trình duyệt web.
Để kiểm tra, nhấp chuột phải vào hình ảnh và chọn Inspect từ menu. Cửa sổ DevTools sẽ mở ra, làm nổi bật thẻ <img> trong HTML của trang.
Bạn sẽ thấy URL chứa endpoint CDN của DataOnline Spaces (trong hướng dẫn này là https://wordpress-offload.nyc3.cdn.digitaloceanspaces.com), cho thấy tài nguyên hình ảnh đang được phục vụ từ bộ nhớ cache biên của DataOnline Spaces CDN. Nếu bạn sử dụng tên miền phụ tùy chỉnh, URL sẽ sử dụng tên miền đó.
Bước 3 — Kiểm Tra Các Header Phản Hồi Của Tài Nguyên
Trong cửa sổ DevTools, chuyển sang tab Network trên thanh công cụ phía trên.
Sau đó, làm mới trang (reload) theo hướng dẫn hiển thị.
Danh sách các tài nguyên sẽ được liệt kê. Tìm hình ảnh mẫu trong danh sách các tài nguyên.
Nhấp vào hình ảnh để mở khung thông tin chi tiết. Trong khung đó, chuyển sang tab Headers để xem các header phản hồi của tài nguyên.
Bạn sẽ thấy header Cache-Control – đây là header của CDN. Điều này xác nhận rằng hình ảnh được phục vụ từ DataOnline Spaces CDN.
Bước 4 — Kiểm Tra URL Tài Nguyên Giao Diện (Tùy Chọn)
Nếu bạn đã chuyển giao diện WordPress (hoặc các thư mục khác) theo hướng dẫn ở phần Offloading Additional Assets, hãy thực hiện kiểm tra ngắn sau để xác nhận rằng các tài nguyên giao diện đang được phục vụ từ DataOnline Spaces CDN.
Truy cập website WordPress của bạn qua Google Chrome, nhấp chuột phải vào bất cứ đâu trên trang và chọn Inspect.
Trong cửa sổ DevTools, chuyển sang tab Sources.
Ở khung bên trái, bạn sẽ thấy danh sách các tài nguyên của website. Cuộn xuống cho tới endpoint CDN (hoặc tên miền phụ tùy chỉnh), và mở rộng danh sách bằng cách nhấp vào mũi tên bên cạnh tên endpoint.
Quan sát rằng hình ảnh header của giao diện, các tệp JavaScript, và stylesheet CSS của giao diện đang được phục vụ từ DataOnline Spaces CDN.
Kết Luận
Trong hướng dẫn này, chúng ta đã trình bày cách chuyển tải nội dung tĩnh từ máy chủ WordPress sang DataOnline Spaces và phục vụ các nội dung đó qua DataOnline Spaces CDN. Trong hầu hết các trường hợp, việc này sẽ giảm bớt lưu lượng băng thông trên máy chủ và tăng tốc độ tải trang cho người dùng, đặc biệt là những người ở xa vị trí địa lý của máy chủ WordPress.
Chúng ta đã trình bày cách chuyển tải và phục vụ cả tài nguyên của thư viện Media và giao diện qua DataOnline Spaces CDN, và các bước này có thể được mở rộng để chuyển toàn bộ thư mục wp-content hoặc thậm chí wp-includes.
Việc triển khai một CDN để phân phối các tài nguyên tĩnh là một trong những cách tối ưu hóa cài đặt WordPress. Các plugin khác như W3 Total Cache có thể tăng tốc độ tải trang và cải thiện SEO cho website của bạn. Công cụ hữu ích để đo tốc độ tải trang và cải thiện nó là Google PageSpeed Insights và Pingdom, cung cấp phân tích chi tiết thời gian phản hồi của các yêu cầu cũng như các khuyến nghị tối ưu hóa.
Để tối ưu hóa việc sử dụng CDN và đảm bảo hiệu suất cao cho website, việc thuê VPS là một lựa chọn đáng cân nhắc. Với VPS, bạn có toàn quyền kiểm soát máy chủ, dễ dàng cấu hình và tích hợp các dịch vụ như CDN, giúp nâng cao trải nghiệm người dùng và hiệu quả SEO.
