CDN là gì? Có một lời giải nghĩa khá rõ ràng và ngắn gọn từ đây:
Mạng phân phối nội dung (CDN) là một nhóm máy chủ phân bổ theo địa lý, hoạt động cùng nhau để cung cấp dịch vụ phân phối nội dung Internet nhanh chóng.
Nhiều người trong số các bạn biết đến CDN thông qua việc sử dụng nhiều tài nguyên của bên thứ 3 như phông chữ, css, một số thư viện javascript (ví dụ như thư viện Stripe để thanh toán an toàn). Trong bài viết này, chúng ta sẽ xem xét nhanh một số loại CDN và ưu/nhược điểm tiềm ẩn mà bạn có thể gặp phải khi tự thiết lập chúng.
Các loại CDN phổ biến
Mỗi CDN đều có ưu và nhược điểm khác nhau và tất cả các giải pháp đều hướng tới cùng một mục đích: Giúp tải nội dung nhanh hơn.
1. Reverse Proxy với bộ nhớ đệm
Ưu điểm
- Dễ sử dụng. Ứng dụng của bạn không cần phải biết về CDN. Nếu bạn đang sử dụng Cloudflare làm nhà cung cấp DNS, bạn chỉ cần nhấp vào nút và máy chủ của họ sẽ bắt đầu chặn tất cả lưu lượng truy cập và lưu trữ đệm. Trên hết, họ cung cấp một loạt các dịch vụ hữu ích khác như tường lửa, "quy tắc trang" có thể chuyển hướng.
Nhược điểm:
- Có thể lưu trữ đệm quá nhiều (bạn không thấy bản cập nhật sau khi đẩy vì index.html cũng được lưu trữ đệm).
- Vì chúng đang chấm dứt kết nối, nếu chúng ngừng hoạt động cùng với quyền kiểm soát DNS của bạn, việc khôi phục sẽ trở nên khó khăn hơn.
- Việc thiếu kiểm soát từ phía bạn và nguy cơ bảo mật tiềm ẩn khi cho phép bên thứ 3 chấm dứt TLS cho bạn.
2. Push CDN
Push CDN là thiết lập mà bạn tải tài sản của mình lên máy chủ (hoặc một nhóm máy chủ). Một ví dụ về Push CDN như vậy là Google Cloud CDN . Trong thiết lập này, bạn sẽ phải tạo một bộ cân bằng tải và một storage bucket rồi tải tài sản nội dung của mình lên như một phần của CI/CD pipeline nơi bạn xây dựng ứng dụng giao diện người dùng của mình. Trong thiết lập này, bạn sẽ cần tạo một tên miền mới như cdn.example.comtên miền trỏ đến vị trí lưu trữ CDN của bạn.
Ưu điểm:
- Bạn vẫn kiểm soát được việc chấm dứt TLS và hiểu rõ hơn về nội dung nào được trình bày khi nào. Nếu ứng dụng giao diện người dùng của bạn sử dụng ID duy nhất cho các tài sản tĩnh, ví dụ /js/chunk-2d22502a.0844b32d.js:
- Tệp chính index.html được máy chủ của bạn phục vụ để nó luôn có thể trỏ đến các tệp js/css mới nhất.
- Bạn có thể biết chính xác những gì được đẩy tới CDN.
Nhược điểm:
- Bạn sẽ có một bước mới trong quy trình CI/CD có thể bị lỗi. Nếu frontend của bạn được triển khai nhưng tài sản không đồng bộ được, người dùng của bạn có thể gặp rất nhiều lỗi.
- Bạn cũng cần đảm bảo rằng các tệp tĩnh của CDN không bị ghi đè (vì bạn có thể ghi đè chúng trong khi ứng dụng frontend cũ vẫn đang sử dụng các tệp trước đó).
3. No CDN
NoCDN tức là bạn chỉ cần lưu trữ các tiêu đề điều khiển bộ nhớ đệm trên máy chủ web của bạn. Tùy chọn này có thể hoạt động trong nhiều trường hợp, tuy nhiên, lần tải đầu tiên có thể gây khó khăn nếu người dùng ở xa vị trí máy chủ của bạn và bạn có nhiều tài sản tĩnh. Đây vẫn là một lựa chọn hợp lệ khi kết hợp với kích thước tài sản được tối ưu hóa, trình xử lý PWA và tiêu đề bộ đệm chính xác.
4. Pull CDN
Các CDN như BunnyCDN lấy từ máy chủ gốc của bạn nhưng không cố gắng proxy toàn bộ lưu lượng truy cập của bạn. Trong trường hợp này, bạn phục vụ index.html của mình , sau đó tải các tài sản thông qua miền CDN thay vì miền của riêng bạn. Tương tự như với loại "Push CDN", bạn sẽ phải phục vụ các tài sản từ cdn.example.com hoặc nếu bạn có bộ cân bằng tải toàn cầu tuyệt vời, bạn có thể định cấu hình một số đường dẫn nhất định tải các tệp trực tiếp từ máy chủ CDN.
Ưu điểm:
- Dễ sử dụng. Cảm giác giống như Cloudflare từ góc độ "thiết lập". Bạn chỉ cần cung cấp cho nó địa chỉ máy chủ web của bạn và sau đó tùy chọn cấu hình tên miền của bạn. Nó sẽ kéo tài sản và hiển thị số liệu thống kê đẹp.
- Giá cả. Có vẻ như nó rẻ hơn nhiều so với các CDN khác trong khi vẫn cung cấp dịch vụ tuyệt vời. Tuy nhiên bạn sẽ cần tự mình kiểm tra vì nó có thể phụ thuộc vào nội dung của bạn.
Nhược điểm:
- Cần đảm bảo rằng tài sản của bạn có ID bản dựng duy nhất được tích hợp vào tên tệp để bạn không phục vụ nội dung cũ. May mắn thay, hầu hết các trình biên dịch javascript hiện đại đều thực hiện điều này theo mặc định nên trong trường hợp của tôi với Vue.js, tôi không phải làm gì ở cái này.
- Nếu CDN ngừng hoạt động, ngay cả khi index.html của bạn tải lên, tài sản của bạn vẫn sẽ bị lỗi. Tuy nhiên, trong trường hợp này, bạn vẫn có thể nhanh chóng thay đổi tên miền tài sản thành máy chủ web chính của mình.
Cách setup Pull CDN trong SPA
- Tạo Pull Zone. Bạn sẽ nhận được tên miền Pull Zone của mình, dùng nó để check reverse proxy đến máy chủ của bạn.
- Tạo CNAME từ tên miền của bạn đến tên miền vùng kéo được phân bổ (trong trường hợp của chúng tôi là cdn.example.com -> example.b-cdn.net ). Điều này cho phép bạn tải nội dung từ tên miền của mình.
- Cập nhật cấu hình webpack của bạn để thêm tiền tố tệp tài sản. Ví dụ cho vue.config.js sẽ là:
module.exports = { publicPath: process.env.NODE_ENV === 'production' ? 'https://cdn.your-domain-here.com/' : '/',
Vậy là xong, tất cả các tài sản được tạo ra sẽ có tiền tố để tải qua CDN. Nếu bạn đang sử dụng Nginx để phục vụ ứng dụng của mình, hãy đảm bảo rằng bạn đang cung cấp đúng tiêu đề cho các tệp js và css. Ví dụ:
location ~* \.(?:css|js)$ { expires 1y; add_header Cache-Control "public"; access_log off; }
Đọc đến đây rồi hy vọng bạn sẽ biết cách lựa chọn loại CDN nào phù hợp để chạy cho website của mình. Cảm ơn các bạn đã theo dõi bài viết này!