Lưu trữ code cho website sử dụng GitHub phân phối qua CDN jsDelivr

CDN là gì ? Tại sao nên sử dụng CDN ? Lưu trữ code cho website sử dụng GitHub phân phối qua CDN jsDelivr bằng cách nào ? Chúng ta sẽ đi tìm câu trả lời trong bài viết này

I. Content Delivery Network - CDN là gì ? Sử dụng CDN như thế nào?

1. CDN là gì ?

Mạng phân phối nội dung (Content delivery network, viết tắt là CDN) đóng vai trò trụ cột trong việc phân phối nội dung của Internet. Cho dù có biết về sự tồn tại của CDN hay không thì mỗi người trong chúng ta hàng ngày đều đang tương tác với CDN khi: đọc báo mạng, mua sắm trực tuyến, xem các video trên YouTube hoặc xem tin tức trên mạng xã hội.

CDN giúp bạn giải quyết được khá nhiều vấn đề mà bạn đang gặp phải: Quan trọng nhất phải kể đến đó là giải quyết vấn đề về tốc độ load của một trang web (độ trễ) - đó là sự chậm trễ gây phiền nhiễu xảy ra từ thời điểm bạn yêu cầu tải trang web đến thời điểm nội dung thực sự xuất hiện trên màn hình.

Khoảng trễ này bị ảnh hưởng bởi một vài yếu tố khác nhau. Tuy nhiên, trong tất cả các trường hợp, thời gian chậm trễ bị ảnh hưởng bởi khoảng cách vật lý giữa bạn và hosting server của website.

Nhiệm vụ của CDN là rút ngắn khoảng cách vật lý này, mục tiêu là cải thiện tốc độ rendering hiệu năng website

2. CDN hoạt động như thế nào ?

Để giảm thiểu khoảng cách giữa visitor và server của website, một CDN lưu trữ một cached version ở nhiều vị trí địa lý (gọi là điểm presence hoặc PoP - viết tắt của Point of Presence). Mỗi PoP chứa một số server lưu trữ bộ nhớ đệm chịu trách nhiệm cung cấp nội dung cho khách truy cập trong phạm vi gần của nó nhất.

Về bản chất, CDN đặt nội dung của bạn ở nhiều nơi cùng một lúc, cung cấp độ bao phủ tốt hơn cho user của bạn.

Ví dụ:

Giả sử server gốc website được đặt tại Hoa Kì, một người dùng A ở London muốn truy cập vào website của bạn. Lúc này, các gói dữ liệu phải đi qua khá nhiều lớp trên các lãnh thổ khác nhau trước khi đến đích. Vì vậy, A sẽ phải mất một khoảng chờ đợi cho quá trình hiển thị của nội dung. Điều này sẽ gây bực bội nếu A không đủ kiên nhẫn, và bạn biết không?, thông thường khách truy cập sẽ rời bỏ website nếu thời trang tải trang lớn hơn 2s.

Nếu bạn sử dụng CDN, truy cập này ngay lập tức sẽ được thực hiện thông qua một PoP địa phương tại Anh (Rõ ràng lúc này khoảng cách địa lí đã được rút ngắn lại).

Nhanh hơn rất nhiều khi request (yêu cầu) và responses (phản hồi) có khoảng cách là toàn bộ chiều rộng của Đại Tây Dương (Từ Anh đến Hoa Kì và ngược lại)

Đọc đến đây ta có thể thấy được lợi ích tuyệt vời mà CDN đem lại và chẳng có lý do gì mà không áp dụng nó vào website của mình

II. Lưu trữ code cho website sử dụng GitHub phân phối qua CDN jsDelivr

jsDelivr CDN là mạng phân phối nội dung mã nguồn mở sử dụng các nhà cung cấp CDN MaxCDN và CloudFlare, do đó nó luôn có khả năng cung cấp một dịch vụ CDN với hiệu suất và thời gian hoạt động tốt nhất có thể.

Nó cho phép các nhà phát triển lưu trữ các dự án của riêng họ và đã có trên 1200+ dự án được lưu trữ, bao gồm jQuery, Bootstrap, Modernizr và nhiều dự án khác. jsDelivr CDN không có giới hạn về băng thông

Cùng với việc rawgit.com đã ngừng hoạt động thì việc chuyển file github qua CDN jsDelivr đúng là một lựa chọn chữa cháy tuyệt vời.

Mỗi khi bạn upload file của mình lên github nó cũng sẽ được lưu trữ lên server của jsDelivr, việc của bạn chỉ cần đổi một vài thành phần trong đường link là có thể nhúng file vào trang web của mình

Trong nội dung bài này tôi chỉ làm việc với "exact version" - link nhúng từ jsDelivr sẽ căn cứ theo mã hash mỗi khi ta commit ví dụ /gh/jquery/jquery@32b00373b3f42e5cdcb709df53f3b08b7184a944/dist/jquery.min.js và "non exact version" ví dụ /gh/jquery/jquery/dist/jquery.min.js

Còn một dạng nữa đó là get link theo version sẽ cho link tường minh hơn: /gh/jquery/jquery@3.1.0/dist/jquery.min.js nói chung là để làm được không đơn giản và cũng không cần thiết với những người chỉ mong muốn có 1 hosting free tải file lên và lấy được link nhúng

OK giả sử bạn đã upload 1 file js lên github

Liên kết đến file là: https://github.com/PrismJS/prism/blob/master/prism.js

và mã hash commit là

Lưu ý đó chỉ là short hash, jsDelivr hoạt động với sha full tức là bạn click chuột vào mã hash nó sẽ ra link như này :

https://github.com/PrismJS/prism/commit/1c5f28a92bafa7849b067587b809bb30ba3629c4

Cập nhật: tại thời điểm viết bài jsDelivr không hỗ trợ raw link với short hash, nhưng khoảng thời gian trở lại đây ta đã có thể làm việc với short hash cho liên kết đẹp hơn

Bây giờ ta sẽ ghép như sau để được link nhúng

+ exact version:

https://cdn.jsdelivr.net/gh/PrismJS/prism@1c5f28a92bafa7849b067587b809bb30ba3629c4/prism.js

hoặc

https://cdn.jsdelivr.net/gh/PrismJS/prism@1c5f28/prism.js

+ non exact version: https://cdn.jsdelivr.net/gh/PrismJS/prism/prism.js

Phần màu đỏ được thay thế bằng phần màu xanh và bạn đã có một link nhúng hoàn chỉnh, free, unlimited bandwidth, speed ++

Một điểm rất thú vị nữa của jsDelivr là nó có cơ chế nén js/css, việc bạn cần làm là thêm .min vào liên kết còn lại thế giới để nó lo

Ví dụ cho liên kết trên

https://cdn.jsdelivr.net/gh/PrismJS/prism@1c5f28a92bafa7849b067587b809bb30ba3629c4/prism.min.js

Rõ ràng trên project github không có file prism.min.js nhưng ta vẫn có được nó ngon lành nhờ host file qua jsDelivr

Trình bày dài dòng vậy thôi chứ có tool chuyển đổi link cả rồi

1. Bạn có thể truy cập link sau https://www.jsdelivr.com/rawgit để convert link từ cdn.rawgit.com sang jsDelivr (chả hiểu sao nó không làm cho github nhỉ :v)

2. Do thằng trang chủ không làm tool convert từ github sang nên ta lại phải chơi hàng cây nhà lá vườn thôi

Truy cập: https://hung1001.github.io/tools/rawgit.html , dán url github hoặc raw.github vào và nhận lại link nhúng

Ở một số bài trước tôi có giới thiệu một vài dịch vụ raw file github nhưng nói chung chúng còn nhỏ, nếu xét về tên tuổi trên thị trường thì jsDelivr vẫn đáng dùng hơn

OK xin dừng bài viết tại đây ! Hẹn gặp lại ở các bài viết sau