Giới Thiệu

Trong thời đại phát triển web hiện nay, GraphQL đã trở thành công cụ phổ biến trong việc xây dựng các dịch vụ API linh hoạt và mạnh mẽ. Bên cạnh xu hướng này, việc sử dụng các dịch vụ đám mây như Cloudflare Workers để triển khai ứng dụng cũng đang trở nên phổ biến. Bài viết này sẽ hướng dẫn bạn cách xây dựng máy chủ GraphQL trên Cloudflare Workers bằng Apollo Server phiên bản 4, một thư viện nổi tiếng cho việc phát triển ứng dụng GraphQL.

Cloudflare Workers

Cloudflare Workers là một dịch vụ điện toán biên do Cloudflare cung cấp. Dịch vụ này cho phép bạn chạy mã JavaScript của mình trên một mạng lưới máy chủ phân tán toàn cầu, giúp nâng cao hiệu suất và độ tin cậy của ứng dụng web. Cloudflare Workers cung cấp gói miễn phí với một số giới hạn như tối đa 100,000 yêu cầu mỗi ngày và tài nguyên CPU hạn chế. Bạn có thể thử nghiệm và nâng cấp kế hoạch của mình khi cần thiết.

Xây Dựng Máy Chủ GraphQL

Để xây dựng Apollo Server trên Cloudflare Workers, chúng ta cần sử dụng gói @as-integrations/cloudflare-workers. Đây là một tích hợp do cộng đồng phát triển và được viết bằng TypeScript. Phiên bản hiện tại là v1.0.1.

Với mỗi lần phát hành, tôi cũng công bố một mẫu repository để mọi người có thể nhanh chóng trải nghiệm phiên bản demo và xây dựng ứng dụng từ mã nguồn mẫu. Một số tính năng đã được cung cấp bao gồm:

Tích hợp @as-integrations/cloudflare-workers
Tích hợp @apollo/datasource-rest
Tích hợp GraphQL Codegen
Cú pháp ESModule + TypeScript
Triển khai tự động lên Cloudflare Workers với GitHub Actions
Tự động cập nhật phụ thuộc với RenovateBot

Đây là liên kết đến mẫu repository: https://github.com/kimyvgy/worker-apollo-server-template. Vui lòng nhấp vào nút Use this template để tạo một repository một cách nhanh chóng hoặc tạo nó một cách thủ công theo hướng dẫn dưới đây.

1. Khởi Tạo Cloudflare Worker

Chúng ta sẽ bắt đầu bằng cách khởi tạo mã nguồn cho Worker sử dụng lệnh sau:

Copy

npm create cloudflare@latest

Theo các bước yêu cầu để tạo ứng dụng, chỉ định thư mục và loại ứng dụng. Sau khi tạo xong, bạn sẽ có các lệnh như npm run dev, npm run deploy và npm run test sẵn sàng sử dụng.

Khi quá trình khởi tạo hoàn tất, mã Cloudflare Worker sẽ nằm trong tệp src/index.ts và trông sẽ như thế này:

Copy

export interface Env {
    // ...
}

export default {
	async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
		return new Response('Hello World!');
	},
};

Hàm fetch đóng vai trò là điểm vào của ứng dụng và sẽ được Cloudflare Workers thực hiện khi có yêu cầu từ khách hàng.
Interface Env được sử dụng để liên kết các biến môi trường bổ sung hoặc các dịch vụ khác của Cloudflare Workers như KV, R2, Queue.

2. Khởi Tạo Apollo Server

Cài đặt các phụ thuộc cho Apollo Server:

Copy

npm add @apollo/server graphql

Định nghĩa Apollo Server trong một tệp riêng, thường là src/apollo.ts, với schema và resolvers của bạn. Không có mã khác khi xây dựng trên Node.js.

Copy

# src/apollo.ts
import { ApolloServer } from '@apollo/server';
import { ApolloServerPluginLandingPageLocalDefault } from '@apollo/server/plugin/landingPage/default';

const typeDefs = `#graphql
  type Query {
    example: String!
  }
`;

const resolvers = {
  Query: {
    example: () => {
      return 'Hello universe!';
    },
  }
}

export interface Context {
  token: string
}

export const server = new ApolloServer<Context>({
  typeDefs,
  resolvers,
  introspection: true,
  plugins: [
    ApolloServerPluginLandingPageLocalDefault({ footer: false }),
  ],
});

3. Tích Hợp Apollo và Cloudflare Worker

Để chạy Apollo trên Workers, chúng ta sẽ sử dụng mô-đun @as-integrations/cloudflare-workers. Bạn có thể cài đặt nó với:

Copy

npm add @as-integrations/cloudflare-workers

Sau đó, tích hợp Apollo với Worker bằng cách gọi hàm startServerAndCreateCloudflareWorkersHandler. Hàm này trả về một hàm callback có cùng chữ ký với hàm fetch của Cloudflare Worker, mà chúng ta sẽ cung cấp cho Worker.

Copy

# src/index.ts
import { startServerAndCreateCloudflareWorkersHandler } from '@as-integrations/cloudflare-workers';
import { type Context, server } from './apollo';

export default {
  fetch: startServerAndCreateCloudflareWorkersHandler<Env, Context>(server, {
    context: async ({ env, request, ctx }) => {
      return { token: 'secret' };
    },
  }),
};

Vì Apollo Server yêu cầu một số mô-đun Node.js, chúng ta cần polyfill các mô-đun này. Đến thời điểm hiện tại, Cloudflare Workers cũng hỗ trợ polyfilling cho các mô-đun thay thế tương ứng. Chúng ta chỉ cần bật cờ node_compat trong tệp wrangler.toml. Trong lúc bạn chỉnh sửa, hãy đặt tên cho Worker của bạn trong tệp đó.

Copy

name = "my-apollo-server"                  # cập nhật
main = "src/index.ts"
compatibility_date = "2024-03-29"
# compatibility_flags = ["nodejs_compat"]  # xóa trường cũ
node_compat = true                         # thêm

Khởi chạy CF Worker để xác minh rằng Apollo Server hoạt động mà không gặp lỗi.

Copy

npm run dev

Đầu ra sẽ tương tự như sau:

Copy

> my-apollo-server@0.0.0 dev
> wrangler dev

⛅️ wrangler 3.41.0
-------------------
▲ [CẢNH BÁO] Bật chế độ tương thích Node.js cho các mô-đun và toàn cầu. Đây là một tính năng thử nghiệm và có những nhược điểm nghiêm trọng. Vui lòng xem [tại đây](https://github.com/ionic-team/rollup-plugin-node-polyfills/) để biết thêm chi tiết.

[wrangler:inf] Ready on http://localhost:39923
⎔ Bắt đầu máy chủ cục bộ...

Hãy thử truy cập vào sandbox trên trình duyệt của bạn qua liên kết được hiển thị trong terminal. Bạn sẽ thấy một sandbox đang chạy.

Lưu ý: Cổng (port) thay đổi mỗi khi ứng dụng chạy, nếu bạn cần cố định nó vào một cổng cụ thể, chẳng hạn như 4000, bạn có thể sửa đổi lệnh dev trong package.json như sau:

Copy

wrangler dev --port 4000

Việc triển khai lên Cloudflare rất đơn giản. Chỉ cần chạy lệnh npm run deploy và làm theo các bước yêu cầu để đăng nhập và ủy quyền qua trình duyệt. Nếu bạn chưa có tài khoản, hãy đăng ký cho Cloudflare trước.

Tóm Tắt

Trên đây là hướng dẫn về cách xây dựng máy chủ GraphQL trên Cloudflare Workers. Nếu bạn gặp bất kỳ vấn đề nào trong quá trình cài đặt như đã đề cập ở trên, hãy để lại bình luận dưới bài viết.

Vui lòng thích, đăng ký kênh Dev Success 101 trên các nền tảng như Viblo / YouTube / TikTok. Xin cảm ơn bạn rất nhiều!

✴️ Đăng ký! https://l.devsuccess101.com/subscribe
✴️ Tham gia cộng đồng Discord của chúng tôi để được giúp đỡ https://l.devsuccess101.com/discord
✴️ Đóng góp: Momo, Paypal

✴️ TikTok: https://l.devsuccess101.com/tiktok
✴️ YouTube: https://l.devsuccess101.com/youtube
✴️ Viblo: https://l.devsuccess101.com/viblo
✴️ Facebook: https://l.devsuccess101.com/facebook
✴️ Discord: https://l.devsuccess101.com/discord
source: viblo

Xây Dựng Máy Chủ GraphQL Trên Cloudflare Workers Với Apollo Server Phiên Bản 4 (Phiên Bản 2024)

Giới Thiệu

Cloudflare Workers

Xây Dựng Máy Chủ GraphQL

1. Khởi Tạo Cloudflare Worker

2. Khởi Tạo Apollo Server

3. Tích Hợp Apollo và Cloudflare Worker

Tóm Tắt

Bình luận