Lời mở đầu

Ở bài viết trước, mình đã giới thiệu về dịch vụ Serverless Cloud Function của Google. Ở bài viết này, mình tiếp tục giới thiệu qua về một dịch vụ Serverless khác, Cloudflare Worker và sử dụng dịch vụ này để deploy một static site đơn giản được generate bởi Gatsby, một công cu chuyên để tạo static site với React.

Cloudflare Worker

Giới thiệu cơ bản

Cũng giống như các dịch vụ serverless khác, Cloudflare Worker giúp cuộc sống của developer của chúng ta nhẹ nhàng hơn rất nhiều. Developer chỉ tập trung vào viết code, suy nghĩ business logic, còn việc deploy, scale trên môi trường thật thế nào thì cứ để Cloudflare Worker xử lý. Vậy tại sao lại chọn Cloudflare Worker thay vì các dịch vụ khác như Google Cloud Function. Worker giờ mới chỉ support có Javascript, C, C++, Rust, hơi ít ngôn ngữ phổ biến so với Cloud Function (Javascript, Python, Go, Java). Và trong trường hợp, bạn đang sử dụng các dịch vụ khác của Gcloud, thì việc lựa chọn Cloud Function có lẽ là việc đương nhiên. Mình cũng chưa tìm hiểu đủ sâu về Cloudflare Worker để có thể đưa ra những đánh giá chi tiết, tuy nhiên chỉ cần nhìn vào hình ảnh dưới, chúng ta có thể thấy được sự hấp dẫn của Cloudflare Worker

Giá cả của Cloudflare Worker thật sự rất hấp dẫn kèm theo Free Plan vô cùng rộng rãi, hoàn toàn đủ cho nhu cầu cá nhân sử dụng. Ngoài ra, môi trường chạy code của Cloudflare Worker theo lời quảng cáo, không gặp phải vấn đề cold start, sẽ giảm thời gian thực hiện code đi đáng kể (code deploy nên trước khi được chạy thì thông thường môi trường để chạy code cần phải được sẵn sàng, thời gian để chuẩn bị môi trường này thường được gọi là code start). Ngoài ra, Cloudflare có rất nhiều data center trên thế giới nên các vấn đề latency hay scale theo mình cũng sẽ được hỗ trợ khá ngon lành.

Quickstart với Cloudflare Worker

Việc đăng ký sử dụng Cloudflare Worker thật sử rất nhanh gọn so với dịch vụ khác. Từ lúc đăng ký cho tới lúc test dòng code đầu tiên chỉ tốn vài nốt nhạc.

Sau khi đã có subdomain free được setup theo setting ở hình ở trên, từ màn hình dashboard, ta đã có thể khởi tạo và test ngay ứng dụng serverless của mình với màn hình scripting rất trực quan

Tuy nhiên, công cụ scripting này chỉ phục vụ cho những script đơn giản, với những ứng dụng phức tạp hơn, ta dùng công cụ dòng lệnh wrangler. Để cài đặt công cụ này, thực hiện câu lệnh sau (yêu cầu đã có nodejs được cài đặt):

$ npm install -g @cloudflare/wrangler

Sử dụng wrangler thế nào thì mình sẽ tìm hiểu rõ hơn ở phần tiếp theo

Ngoài ra, để có thể deploy được 1 static site thì ta cần phải sử dụng thêm 1 tính năng riêng của Cloudflare Worker là Worker Sites và tính năng này yêu cầu ta cần có tài khoản Worker Unlimited (5$/tháng). Vậy nên muốn làm theo bài viết này của mình thì bạn đọc chịu khó chi tiền một chút :D

Deploy một website Gatsby lên Cloudflare Worker

Setup Gatsby

Ở đây mình sẽ không đi chi tiết vào tìm hiểu Gatsby mà chỉ đơn giản cài đặt Gátby và khởi tạo 1 project dưới local.

$ npm install -g gatsby-cli
$ gatsby new cloudflare-test

Ta có thể preview website mới khởi tạo bằng câu lệnh sau:

$ cd cloudflare-test
$ gatsby develop

Truy cập vào địa chỉ http://localhost:8000/, ta sẽ thấy giao diện như ở hình dưới.

Để chuẩn bị sẵn cho việc publish static , thì ta cần build code với câu lệnh sau:

$ gatsby build

Code cho static site được build và optimize cho production sẽ được lưu vào

Setup Wrangler

Thiết lập Wrangler với tài khoản Cloudflare.

$ wrangler config

Wrangler sẽ yêu cầu ta nhập API Token, chỉ vào địa chỉ https://dash.cloudflare.com/profile/api-tokens, tạo token theo hướng dẫn của Wrangler rồi copy/paste trở lại là xong

Khởi tạo một project Worker Sites trong folder project Gatsby đã được tạo ở trên

$ wrangler init --site

File setting cùng với folder chứa code cho Worker Site như ở dưới đây sẽ được khởi tạo:

- ...
- workers-site/
  - index.js # Logic code chính cho worker 
  - node-modules/
  - package-lock.json
  - package.json
  - worker/ 
- wrangler.toml # File setting cho Wrangler

Để có thể deploy và test static site, ta cần phải chỉnh sửa lại file setting như sau

# wrangler.toml
name = "cloudflare-worker-test"
type = "webpack"
account_id = "<ID của tài khoản Cloudflare>"
workers_dev = true
route = ""
zone_id = ""

[site]
bucket = "./public" # Folder chứa code đã được build của static site
entry-point = "workers-site"

Sử dụng Worker Site, wrangler đã config sẵn để logic trong file workers-site/index.js có thể xử lý code của các thể loại static site, nên ta không cần sửa gì cả mà có thể sẵn sàng để test và deploy

Trước tiên ta sẽ preview static site của mình

$ wrangler preview

Giao diện preview của Cloudflare sẽ mở trên browser

Có vẻ như không có vấn đề gì, chúng ta chỉ còn cách trang static site được deploy thực tế đúng 1 câu lệnh

$ wrangler publish
✨  Built successfully, built project size is 11 KiB.
🌀  Created namespace for Workers Site "__cloudflare-worker-test-workers_sites_assets"
✨  Success
🌀  Uploading site files
✨  Successfully published your script to https://cloudflare-test.xxxxxx.workers.dev

Truy cập vào địa chỉ trên, ta có thể thấy static site của mình đã được deploy và chạy 1 cách ngon lành.

Kết bài

Dù có tốn 5$/1 tháng, nhưng với trải nghiệm deploy dễ dàng, cùng với hạn mức sử dụng khá là rộng rãi, việc sử dụng Cloudflare Worker để deploy các thể loại static site như blog cá nhân, trang web công ty quả thật là một lựa chọn hấp dẫn. Ngoài ra, Worker còn rất nhiều tính năng và ứng dụng khác như routing hay Key-Value storage phục vụ cho việc xây dựng các ứng dụng phức tạp hơn mà người viết chưa có thời gian trải nghiệm. Xin hẹn bạn đọc vào một dịp gần nhất.