Chuyển nhà - Từ DigitalOcean sang Cloudflare Pages

Chuyển nhà - Từ DigitalOcean sang Cloudflare Pages

Những mẩu tin ngắn hàng ngày dành cho bạn
  • Hic, dạo này bận quá, lại còn nhiều biến nữa nên mình chưa có thời gian viết bài viết dài nữa. Thay vào đó thì là cố gắng duy trì mục tin ngắn hàng ngày này cho bạn đọc. Vì ngắn mà, viết nhanh hơn nhiều.

    Mình đang sửa lại một chút giao diện đồng thời thêm một tính năng mới. Bạn có đoán ra nó là gì không? Bật mí nhé, liên quan một chút đến AI và Tiktok 😁

    » Xem thêm
  • Đang trong 14 ngày dùng thử Windsurf, hôm nay đã là ngày thứ 7, mình có một số cảm nhận nhanh như sau:

    Đầu tiên là giao diện được tuỳ biến hơn một chút, mang lại cảm giác phẳng và thân thiện hơn VSCode truyền thống.

    Thứ hai là gợi ý siêu nhanh nhưng hơi hấp tấp. Kiểu chưa được chính xác cho lắm ý nhưng lại rất tự tin gợi ý ra cả mấy dòng liền. Nên không phải lúc nào tab tab cũng đúng. Tuy vậy đọc ngữ cảnh tốt, tốt hơn cả Copilot.

    Thứ ba là cái Chat/Edit đạt trình độ thượng thừa, rất tốt, nói một hiểu mười, chắc phải ngang ngửa Cursor đấy, mình không dám chắc nữa, cảm nhận thế. Ngoài ra một lỗi làm mình thấy khá khó chịu là thi thoảng nó gợi ý nhưng tab lại không ăn ý, xong mất công phải xoá đi.

    Không biết sau khi hết 14 ngày sẽ như nào, nên mình sẽ tiếp tục cập nhật thêm. Nhưng nhìn chung là ăn đứt Copilot rồi đấy.

    À! Một cái nữa là tiếng Việt của con này dở tệ. Chả hiểu sao!?

    » Xem thêm
  • smee.io là một cách đơn giản để tạo một địa chỉ webhook và ánh xạ nó về địa chỉ localhost trong máy tính của bạn.

    $ npm install --global smee-client $ smee -u https://smee.io/eu4UoW8vrKSZtTB

    » Xem thêm

Vấn đề

Nếu quan tâm, có thể bạn biết tôi đang sử dụng DigitalOcean để lưu trữ trang blog này, với cấu hình khiêm tốn chỉ 1GB RAM, 20GB SSD là vừa đủ cho TechStack mà tôi lựa chọn. Gọi là vừa đủ bởi vì nó vẫn hoạt động tốt với lượng truy cập như hiện tại, chỉ có điều triển khai bằng Docker nên việc lưu trữ hình ảnh mà nó tạo ra đôi khi là một vấn đề lớn. Docker được mệnh danh là "sát thủ ổ cứng" khi bạn có nhiều Images, cộng với thiết lập CI/CD thì phải nói rằng "combo hủy diệt". Thử nghĩ 20GB ổ cứng, chưa trừ hệ điều hành thì sao mà có thể triển khai liên tục được cơ chứ. Thi thoảng, máy chủ báo ổ cứng bị đầy tôi lại phải vào để xóa bớt.

Tình cờ được biết đến Cloudflare Pages cung cấp giải pháp triển khai rất nhiều thể loại web, như Vue, React, Nuxt.js, Next.js... tôi có tò mò xem thử xem nó có gì. Nguyên một tuần trước là khoảng thời gian để nghiên cứu. Cuối cùng quyết định thử chuyển hai trang giao diện sang xem có được không.

Quá trình chuyển nhà

Theo Cloudflare, Cloudflare Pages là một nền tảng JAMstack dành cho các nhà phát triển giao diện người dùng và triển khai các trang web. Pages tập trung vào nhà phát triển khi nó cung cấp nhiều giải pháp như tích hợp Git để hỗ trợ khả năng triển khai liên tục (CI/CD), cũng như tốc độ triển khai và tốc độ của ứng dụng được triển khai thông qua nó.

Nhận thấy tiềm năng của Cloudflare, tôi có thể di chuyển hai trang Front-end là trang quản trị (AdminCP) & giao diện của trang Blog sang. AdminCP được viết bằng Vue.js sử dụng SPA, blog thì bằng Nuxt.js và dùng SSR. Đối với SPA thì lượng tài nguyên nó dùng không đáng là mấy, theo như tôi thấy chỉ chiếm vài MB bộ nhớ vì vốn dĩ nó được triển khai thông qua Nginx. Còn SSR thì chiếm kha khá bộ nhớ, phải nói là nhiều nhất trong số các service đang chạy. Đơn giản vì nó được triển khai thông qua máy chủ Node.js, mà Node thì tiêu tốn nhiều bộ nhớ. Cả Vue và Nuxt.js đều được Pages hỗ trợ, thế cho nên bước đầu hoàn toàn có thể di chuyển hai trang này sang. Nhưng trước khi chuyển, cần phải đánh giá lại tính năng cần chuyển.

Đầu tiên là trang quản trị, do viết bằng Vue và sử dụng SPA cho nên việc chuyển qua Pages không quá phức tạp, tất cả những gì cần làm là thay đổi biến môi trường để nó nhận cấu hình trong khi build.

Đến trang giao diện của Blog thì tôi chợt nảy ra ý tưởng: thay vì sử dụng SSR như hiện tại thì tại sao mình không thử chuyển nó thành SGG? Bằng cách này tôi có thể dùng lệnh tạo trang web thành các file HTML tĩnh rồi tải nó lên bất kì đâu hỗ trợ Static page không chỉ riêng Cloudflare Pages. Hơn nữa tốc độ sẽ nhanh hơn đáng kể so với SSR thông thường vì không cần phải truy vấn vào database và sinh mã HTML mỗi lần truy cập nữa. Nghĩ là làm, tôi đã dành nguyên một tuần trước để sửa lại mã Nuxt sao cho nó hoạt động tốt với chế độ SGG.

Cuối cùng, đầu tuần này tôi đã hoàn tất cơ bản việc di chuyển hai trang giao diện sang Pages. Tất nhiên là còn có một vài lỗi cần phải sửa nhưng hiện tại nó hoàn toàn đáp ứng được nhu cầu đọc và tìm kiếm của mọi người.

Lợi ích của việc chuyển nhà

Bỏ được một phần chi phí tài nguyên cho trang quản trị và trang giao diện của Blog, tuy rằng không nhiều nhưng giờ đây tôi không phải quá lo lắng khi máy chủ đột ngột quá tải hay một lỗi nào đó xảy ra, nó vẫn có thể hoạt động như bình thường do Cloudflare đã lưu trữ lại toàn bộ HTML.

Quy trình CI/CD được rút ngắn và đỡ phức tạp hơn khi trước đây tôi cần viết nhiều tập lệnh hỗ trợ việc này thông qua Gitlab CI và Docker thì giờ đây, bất kỳ lúc nào "đẩy" code lên gitlab, nó hoàn toàn có thể build một cách tự động.

Tôi đã chuyển DNS sang Cloudflare để tận dụng hạ tầng CDN cũng như cơ chế Cache dữ liệu của họ. Blog giờ đây có tốc độ truy cập rất ấn tượng.

Cuối cùng, có thể Web in the EDGE sẽ thành xu hương trong thời gian tới. Nghĩa là bạn không cần phải triển khai máy chủ cụ thể để chạy trang web nữa, mà chỉ cần chạy thông qua các dịch vụ như Pages. Để tìm hiểu thêm xu hướng này, bạn đọc có thể xem tại https://deno.com/blog/the-future-of-web-is-on-the-edge.

Những gì còn phải làm

Mặc dù quá trình chuyển đổi đa phần thuận lợi, tuy nhiên vẫn còn một số vấn đề cần thời gian để khắc phục.

Thứ nhất là các lỗi chưa phát hiện ra hoặc phát hiện ra rồi nhưng không quá ảnh hưởng đến trải nghiệm người dùng. Vấn đề này chỉ cần thời gian để khắc phục, hoặc nếu bạn đọc phát hiện ra lỗi, có thể để lại bình luận để thông báo cho tôi biết và sửa chúng.

Có một số tính năng sau khi chuyển sang Pages thì trở nên thừa hoặc bị vô hiệu hóa, việc cần làm là gỡ nó ra để tránh gây nhầm lẫn sau này.

Một vấn đề nữa là sau khi Pages deploy thành công hoặc thất bại, chưa có cách nào để kích hoạt lại một thông báo về cho mình biết. Hy vọng rằng Cloudflare sớm sẽ bổ sung thêm tính năng thông báo hoặc trước hết, tôi sẽ chạy một đoạn mã curl cùng với lệnh npm run generate để gửi thông báo về Telegram.

Đó là những gì trước mắt, xa hơn là loại bỏ hoàn toàn máy chủ, đưa tất cả dịch vụ lên đám mây. Khi đó tôi sẽ thiết lập được một hệ thống tự động và không cần phải lo lắng quá nhiều về hạ tầng nữa.

Cao cấp
Hello

Bí mật ngăn xếp của Blog

Là một lập trình viên, bạn có tò mò về bí mật công nghệ hay những khoản nợ kỹ thuật về trang blog này? Tất cả bí mật sẽ được bật mí ngay bài viết dưới đây. Còn chờ đợi gì nữa, hãy bấm vào ngay!

Là một lập trình viên, bạn có tò mò về bí mật công nghệ hay những khoản nợ kỹ thuật về trang blog này? Tất cả bí mật sẽ được bật mí ngay bài viết dưới đây. Còn chờ đợi gì nữa, hãy bấm vào ngay!

Xem tất cả

Đăng ký nhận thông báo bài viết mới

hoặc
* Bản tin tổng hợp được gửi mỗi 1-2 tuần, huỷ bất cứ lúc nào.
Author

Xin chào, tôi tên là Hoài - một anh Dev kể chuyện bằng cách viết ✍️ và làm sản phẩm 🚀. Với nhiều năm kinh nghiệm lập trình, tôi đã đóng góp một phần công sức cho nhiều sản phẩm mang lại giá trị cho người dùng tại nơi đang làm việc, cũng như cho chính bản thân. Sở thích của tôi là đọc, viết, nghiên cứu... Tôi tạo ra trang Blog này với sứ mệnh mang đến những bài viết chất lượng cho độc giả của 2coffee.dev.Hãy theo dõi tôi qua các kênh LinkedIn, Facebook, Instagram, Telegram.

Bạn thấy bài viết này có ích?
Không

Bình luận (1)

Nội dung bình luận...
Avatar
Noi Truong1 năm trước
Cho mình hỏi, khi bạn chuyển blog sang SSG thì blog có full static được không? các bài viết có được generate thành html tĩnh không hay vẫn phải chạy runtime rendering lại post mỗi khi có request mới?
Trả lời
Avatar
Xuân Hoài Tống1 năm trước
Các bài viết của mình được generate thành các file .html luôn, đồng nghĩa với việc nó sinh ra hết nội dung của bài viết trong file đó luôn. Còn một vài phần cần dữ liệu động, như phần bình luận thì mình vẫn sử dụng JavaScript để tải như bình thường 😄