Với những website có đặc thù thường xuyên phải lưu trữ & chia sẻ hình ảnh hay video trong các bài viết cũng như có các nhóm bạn đọc phân bổ rộng rãi ở các vùng miền khác nhau, việc quan tâm đến làm sao để bạn đọc có được trải nghiệm tốt nhất khi ghé thăm và đón đọc các bài viết trên trang web của mình là một điều cần được đặt ưu tiên lên hàng đầu. Và giải pháp cho vấn đề này đó chính là sử dụng CDN – Content Delivery Network.
Trong bài viết ngày hôm nay, tôi sẽ giới thiệu với các bạn cách làm sao để tăng tốc, tăng trải nghiệm của bạn đọc cho trang web sử dụng WordPress của bạn với dịch vụ Cloudfront của Amazon Web Service
Bạn cũng có thể xem thêm video về Cấu hình WordPress với Cloudfront và S3
Vậy CDN là gì
CDN là một mạng lưới các máy chủ được đặt ở nhiều trung tâm dữ liệu (data center) trên khắp Thế Giới. Mục đích của CDN là mang lại những nội dung số tới cho người sử dụng Internet nhanh hơn và hiệu quả hơn. Bạn có thể hiểu đơn giản là thay vì chỉ đặt bức ảnh duy nhất ở Việt Nam, sử dụng CDN, bức ảnh đó của bạn sẽ được sao chép với chất lượng 1:1 và được phân tán đặt ở nhiều nơi như Mỹ, Anh, Nhật Bản, … và người sử dụng ở Mỹ có thể nhanh chóng xem được bức ảnh đó ngay trên đất Mỹ thay vì bay sang Việt Nam để xem. Tham khảo thêm về CDN trên Wikipedia.
Amazon Cloudfront
Amazon Cloudfront là mạng CDN phân phối nội dung tĩnh và streaming toàn cầu của Amazon. Khi bạn sử dụng CDN sẽ giúp cho khách truy cập nhanh vào dữ liệu máy chủ web gần họ nhất thay vì phải truy cập vào trung tâm dữ liệu của nhà cung cấp hosting bạn đang dùng.
Hiện tại Amazon Cloudfront đang có các POP ở US, EU, Hong Kong, Philippines, S. Korea, Singapore & Taiwan, Japan, South America, Australia nên khi sử dụng chắc chắn tốc độ website của bạn sẽ được tăng lên một cách đáng kể từ VN.
Bạn sẽ có hai công việc để làm đó là tạo một Amazon Cloudfront Distribution và cấu hình nó thông qua plugin W3 Total Cache, nếu bạn nào chưa biết cài plugin trên wordpress thì có thể xem bài viết Cài đặt plugin cho WordPress
Tạo một CDN
Trước tiên tôi giả sử bạn đã có tài khoản AWS nếu chưa có thì hãy đăng ký ngay, sau khi bạn đăng nhập vào trang quản lý AWS bạn sẽ có giao diện như trên, click vào service sau đó gõ từ khóa CloudFront nó sẽ dẫn ra trang quản lý CloudFront
Sau đó bạn nhấn button Create Distribution nó sẽ có hình như thế này:
bạn có hai tuỳ chọn nhưng ngay lúc này bạn chỉ việc chọn cái tôi đã tô màu đỏ hình bên trên, kế đến bạn sẽ có kết quả như hình bên dưới
trong đó bạn chỉ cần chú ý ô Origin Domain Name và Origin ID bạn chỉ cần click chuột vào đó là nó sẽ link tới cái S3 của Amazon Bucket mà bạn muốn dùng, còn lại bạn cứ để mặc định chúng ta có thể sữa nó sau này, sau cùng bạn kéo chuột xuống phía dưới chọn button Create Distribution thì sẽ có kết quả như sau.
chúc mừng bạn đã tạo xong một CDN từ CloudFront AWS trong trường hợp của tôi địa chỉ của nó là ** d2njte55uby2kt.cloudfront.net**, bạn phải đợi khoảng 10-20 phút thì mới dùng được nó. Chúng ta sẽ dùng nó cho phần kế tiếp.
Cấu hình Plugin
Lần đầu tiên khi bạn cài PLugin W3 Total Cache thì nó chưa có chọn cấu hình CDN cụ thể là loại nào cả do đó bạn sẽ chọn nó, có rất là nhiều nhà cung cấp CDN mà W3 hỗ trợ trong trường hợp của tôi thì tôi chọn như hình bên dưới.
sau đó bạn lại rồi chọn menu CDN sẽ có kết quả như hình bên dưới:
trong đó các tham số bạn cần điền vào bao gồm Access key ID, Secret key, Bucket là các thông tin từ AWS S3 nếu chưa có thì bạn vào mục IAM nếu chưa biết IAM là gì thì có thể tham khảo bài viết này, còn chỗ Replace site’s hostname with: bạn chỉ việc lấy cái CDN lúc trước mà bạn đã tạo, tôi giả sử bạn đã điền vào tất cả các thông tin ở trên sau đó bấm nút test thì nên thấy chữ Test passed
Chú ý nếu bạn chưa có Bucket của Amazon S3 thì nó sẽ tự tạo cho bạn, và cái key ở trên phải có quyền truy cập AWS S3, ngoài ra có thể bạn muốn xem bài viết Amazon S3 là gì và tại sao bạn nên dùng nó
Bạn đã cấu hình gần như xong rồi nhưng khi bạn truy cập ra trang chủ thì nó sẽ có dạng như bị mất CSS
đó là vì bạn chưa có upload các file từ server bạn lên Amazon S3 do đó công việc cuối cùng còn lại của bạn là phải tải tập tin của theme hay hình ảnh từ server của bạn lên Amazon S3 thôi, để làm điều đó bạn chỉ việc click như hình bên dưới cho từng cái.
Như hình bên trên tôi chỉ upload cái theme trong thư mục wp-content còn nếu bạn muốn upload hình ảnh thì check vào Host attachments rồi click button nó sẽ tự động đưa lên S3, chú ý là khi bạn click nó sẽ có cái popup nhảy lên bạn chỉ việc click nút start thế là xong
để kiểm tra nó chắc chắn có tải lên hay không thì bạn lênh trên AWS S3 vào thư mục bucket mà bạn đã tạo để kiểm tra, bạn nên thấy kết quả như thế này.
OK tất cả mọi thứ đã xong bạn truy cập lại trang chủ để thấy kết quả, nếu như vẫn còn bị lỗi thì bạn kiểm tra xem cái Bucket của bạn có puplic cho người khác truy cập hay chưa nếu chưa thì bạn nên thêm nó vào ở phần Bucket Policy
Chú ý bạn cần phải thây cái đoạn text dưới đây:
[code lang=”text”] gsviec.blog/* [/code]thành cái tên của bucket mà bạn đã tạo, để tiện cho bạn thì bạn tôi có cung cấp cho bạn cái mẫu từ Amazon S3:
[javascript]{
"Version": "2008-10-17",
"Statement": [
{
"Sid": "AllowPublicRead",
"Effect": "Allow",
"Principal": {
"AWS": "*"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::<tên-bucket-của ban>/*"
}
]
}
Đoạn code trên có ý nghĩa là nó sẽ public cái bucket cúa S3 cho tất cả mọi người có thể truy cập được. Tôi nghĩ tới bước này thì chắc OK nếu chưa hãy coi lại bạn đã bõ xót chỗ nào 🙂
Kiểm tra thành quả
Tôi sẽ sử dụng pingdom.com để kiểm tra. Trước khi chưa có cấu hình CDN kết quả như sau:
Sau khi cấu hình CDN từ Amazon Cloufront và S3
Dựa vào hai hình ảnh trên ta thấy thời gian tải trang từ 3.92 xuống còn 2.02s thì khá là Ok thậm chí số lượng request của kết quả thứ hai còn nhiều request hơn một chút. Do Website của tôi chỉ có một số it hình ảnh nên không thấy sự khác biệt nhiều nếu như có nhiều hình ảnh thì tốc độ tải trang rất là khác biệt.
Kết luận
Nếu như website của bạn có nhiều hình ảnh và video thì dùng Amazon S3 và Cloudfront là không thể chê vào đâu được. Huy vọng trong hướng dẫn này bạn đã hiểu cách cấu hình căn bản CDN mà cụ thể là Amazon CloudFront trên nền tảng WordPress.
Nếu như có thắc mắc gì hãy để bình luận bên dưới tôi sẽ giải thích cho. Cuối cùng như mọi khi nếu thấy bài viết hay hãy chia sẽ và like!!!
