Skip to content

Commit

Permalink
Update Cloudflare workers (#14963)
Browse files Browse the repository at this point in the history
  • Loading branch information
@shiyuhang0
shiyuhang0 authored Oct 12, 2023
1 parent 41c5a10 commit ae1ec06
Showing 1 changed file with 45 additions and 162 deletions.
207 changes: 45 additions & 162 deletions tidb-cloud/integrate-tidbcloud-with-cloudflare.md
View file
Original file line number Diff line number Diff line change
@@ -1,192 +1,102 @@
---
title: Integrate TiDB Cloud with Cloudflare
summary: Learn how deploy Cloudflare Workers with TiDB Cloud.
summary: Learn how to deploy Cloudflare Workers with TiDB Cloud.
---

# Integrate TiDB Cloud with Cloudflare Workers

[Cloudflare Workers](https://workers.cloudflare.com/) is a platform that allows you to run code in response to specific events, such as HTTP requests or changes to a database. Cloudflare Workers is easy to use and can be used to build a variety of applications, including custom APIs, serverless functions, and microservices. It is particularly useful for applications that require low-latency performance or need to scale quickly.

However, you may find it hard to connect to TiDB Cloud from Cloudflare Workers because Cloudflare Workers runs on the V8 engine which cannot make direct TCP connections.
You may find it hard to connect to TiDB Cloud from Cloudflare Workers because Cloudflare Workers runs on the V8 engine which cannot make direct TCP connections. You can use [TiDB Cloud serverless driver](/tidb-cloud/serverless-driver.md) to help you connect to Cloudflare Workers over HTTP connection.

Fortunately, Prisma has your back with the [Data Proxy](https://www.prisma.io/docs/data-platform/data-proxy). It can help you use Cloudflare Workers to process and manipulate the data being transmitted over a TCP connection.

This document shows how to deploy Cloudflare Workers with TiDB Cloud and Prisma Data Proxy step by step.
This document shows how to connect to Cloudflare Workers with TiDB Cloud serverless driver step by step.

> **Note:**
>
> If you want to connect a locally deployed TiDB to Cloudflare Workers, you can try [worker-tidb](https://github.com/shiyuhang0/worker-tidb), which uses Cloudflare tunnels as a proxy. However, worker-tidb is not recommended for production use.
> TiDB Cloud serverless driver can only be used in TiDB Serverless.
## Before you begin

Before you try the steps in this article, you need to prepare the following things:

- A TiDB Cloud account and a TiDB Serverless cluster on TiDB Cloud. For more details, see [TiDB Cloud Quick Start](/tidb-cloud/tidb-cloud-quickstart.md#step-1-create-a-tidb-cluster).
- A [Cloudflare Workers account](https://dash.cloudflare.com/login).
- A [Prisma Data Platform account](https://cloud.prisma.io/).
- A [GitHub account](https://github.com/login).
- Install Node.js and npm.
- Install dependencies using `npm install -D prisma typescript wrangler`
- [npm](https://docs.npmjs.com/about-npm) is installed.

## Step 1: Set up Wrangler

[Wrangler](https://developers.cloudflare.com/workers/wrangler/) is the official Cloudflare Worker CLI. You can use it to generate, build, preview, and publish your Workers.

1. To authenticate Wrangler, run wrangler login:
1. Install Wrangler:

```
npm install wrangler
```

2. To authenticate Wrangler, run wrangler login:

```
wrangler login
```
2. Use Wrangler to create a worker project:
3. Use Wrangler to create a worker project:
```
wrangler init prisma-tidb-cloudflare
wrangler init tidb-cloud-cloudflare
```
3. In your terminal, you will be asked a series of questions related to your project. Choose the default values for all questions.
4. In your terminal, you will be asked a series of questions related to your project. Choose the default values for all questions.
## Step 2: Set up Prisma
## Step 2: Install the serverless driver
1. Enter your project directory:
```
cd prisma-tidb-cloudflare
```
2. Use the `prisma init` command to set up Prisma:
```
npx prisma init
cd tidb-cloud-cloudflare
```
This creates a Prisma schema in `prisma/schema.prisma`.
3. Inside `prisma/schema.prisma`, add the schema according to your tables in TiDB. Assume that you have `table1` and `table2` in TiDB, you can add the following schema:
2. Install the serverless driver with npm:
```
generator client {
provider = "prisma-client-js"
}
datasource db {
provider = "mysql"
url = env("DATABASE_URL")
}
model table1 {
id Int @id @default(autoincrement())
name String
}
model table2 {
id Int @id @default(autoincrement())
name String
}
npm install @tidbcloud/serverless
```
This data model will be used to store incoming requests from your Worker.
## Step 3: Push your project to GitHub
This adds the serverless driver dependency in `package.json`.
1. [Create a repository](https://github.com/new) named `prisma-tidb-cloudflare` on GitHub.
## Step 3: Develop the Cloudflare Worker function
2. After you create the repository, you can push your project to GitHub:
```
git remote add origin https://github.com/<username>/prisma-tidb-cloudflare
git add .
git commit -m "initial commit"
git push -u origin main
```
You need to modify the `src/index.ts` according to your needs.
## Step 4: Import your Project into the Prisma Data Platform
With Cloudflare Workers, you cannot directly access your database because there is no TCP support. Instead, you can use Prisma Data Proxy as described above.
1. To get started, sign in to the [Prisma Data Platform](https://cloud.prisma.io/) and click **New Project**.
2. Fill in the **Connection string** with this pattern `mysql://USER:PASSWORD@HOST:PORT/DATABASE?sslaccept=strict`. You can find the connection information in your [TiDB Cloud console](https://tidbcloud.com/console/clusters).
3. Leave the **Static IPs** as disabled because TiDB Serverless is accessible from any IP address.
4. Select a Data Proxy region that is geographically close to your TiDB Cloud cluster location. Then click **Create project**.
![Configure project settings](/media/tidb-cloud/cloudflare/cloudflare-project.png)
5. Fill in the repository, and click **Link Prisma schema** in the **Get Started** page.
6. Click **Create a new connection string** and you will get a new connection string that starts with `prisma://.` Copy this connection string and save it for later.
![Create new connection string](/media/tidb-cloud/cloudflare/cloudflare-start.png)
7. Click **Skip and continue to Data Platform** to go to the Data Platform.
## Step 5: Set the Data Proxy Connection string in your environment
1. Add the Data Proxy connection string to your local environment `.env` file:
```
DATABASE_URL=prisma://aws-us-east-1.prisma-data.com/?api_key=•••••••••••••••••"
```
For example, if you want to show all the databases, you can use the following code:
2. Add the Data Proxy connection to Cloudflare Workers with secret:
```ts
import { connect } from '@tidbcloud/serverless'
```
wrangler secret put DATABASE_URL
```
3. According to the prompt, enter the Data Proxy connection string.
export interface Env {
DATABASE_URL: string;
}
> **Note:**
>
> You can also edit the `DATABASE_URL` secret via the Cloudflare Workers dashboard.
export default {
async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
const conn = connect({url:env.DATABASE_URL})
const resp = await conn.execute("show databases")
return new Response(JSON.stringify(resp));
},
};
```

## Step 6: Generate a Prisma Client
## Step 4: Set the DATABASE_URL in your environment

Generate a Prisma Client that connects through the [Data Proxy](https://www.prisma.io/docs/data-platform/data-proxy):
The `DATABASE_URL` follows the `mysql://username:password@host/database` format. You can set the environment variable with wrangler cli:

```
npx prisma generate --data-proxy
wrangler secret put <DATABASE_URL>
```

## Step 7: Develop the Cloudflare Worker function
You need to change the `src/index.ts` according to your needs.
For example, if you want to query different tables with an URL variable, you can use the following code:
```js
import { PrismaClient } from '@prisma/client/edge'
const prisma = new PrismaClient()
addEventListener('fetch', (event) => {
event.respondWith(handleEvent(event))
})
async function handleEvent(event: FetchEvent): Promise<Response> {
// Get URL parameters
const { request } = event
const url = new URL(request.url);
const table = url.searchParams.get('table');
let limit = url.searchParams.get('limit');
const limitNumber = limit? parseInt(limit): 100;
// Get model
let model
for (const [key, value] of Object.entries(prisma)) {
if (typeof value == 'object' && key == table) {
model = value
break
}
}
if(!model){
return new Response("Table not defined")
}
// Get data
const result = await model.findMany({ take: limitNumber })
return new Response(JSON.stringify({ result }))
}
```
You can also edit the `DATABASE_URL` secret via the Cloudflare Workers dashboard.

## Step 8: Publish to Cloudflare Workers
## Step 5: Publish to Cloudflare Workers

You're now ready to deploy to Cloudflare Workers.

Expand All @@ -196,39 +106,12 @@ In your project directory, run the following command:
npx wrangler publish
```

## Step 9: Try your Cloudflare Workers
## Step 6: Try your Cloudflare Workers

1. Go to [Cloudflare dashboard](https://dash.cloudflare.com) to find your worker. You can find the URL of your worker on the overview page.

2. Visit the URL with your table name: `https://{your-worker-url}/?table={table_name}`. You will get the result from the corresponding TiDB table.

## Update the project

### Change the serverless function

If you want to change the serverless function, update `src/index.ts` and publish it to Cloudflare Workers again.

### Create a new table
2. Visit the URL and you will get the result.

If you create a new table and want to query it, take the following steps:
## Examples

1. Add a new model in `prisma/schema.prisma`.
2. Push the changes to your repository.

```
git add prisma
git commit -m "add new model"
git push
```
3. Generate the Prisma Client again.
```
npx prisma generate --data-proxy
```
4. Publish the Cloudflare Worker again.
```
npx wrangler publish
```
See the [Cloudflare Workers example](https://github.com/tidbcloud/car-sales-insight/tree/main/examples/cloudflare-workers).

0 comments on commit ae1ec06

Please sign in to comment.