Zenn
🐘

Cloudflare HyperdriveとNeon DBを接続してみる

2023/11/15に公開
Cloudflare
#
neon
#
hyperdrive
tech

参考

https://developers.cloudflare.com/hyperdrive/examples/neon/

Cloudflare Wokerを作成

$ npm create cloudflare@latest

using create-cloudflare version 2.6.2

╭ Create an application with Cloudflare Step 1 of 3
│
├ In which directory do you want to create your application?
│ dir ./hyperdrive-tutorial
│
├ What type of application do you want to create?
│ type "Hello World" Worker
│
├ Do you want to use TypeScript?
│ yes typescript
│
├ Copying files from "hello-world" template
│
├ Retrieving current workerd compatibility date
│ compatibility date 2023-10-30
│
╰ Application created

╭ Installing dependencies Step 2 of 3
│
├ Installing dependencies
│ installed via `npm install`
│
├ Committing new files
│ git commit
│
╰ Dependencies Installed

╭ Deploy with Cloudflare Step 3 of 3
│
├ Do you want to deploy your application?
│ no deploy via `npm run deploy`
│
├  APPLICATION CREATED  Deploy your application with npm run deploy
│
│ Navigate to the new directory cd hyperdrive-tutorial
│ Run the development server npm run start
│ Deploy your application npm run deploy
│ Read the documentation https://developers.cloudflare.com/workers
│ Stuck? Join us at https://discord.gg/cloudflaredev
│
╰ See you again soon!

↓
hyperdrive-tutorialディレクトリに移動しておきます。

$ cd hyperdrive-tutorial

Neonアカウント登録

https://neon.tech/ アクセスします。

Topページから「sign up」を選択します。

↓
好きな方法を選んで登録。

↓
コンソールが表示されました。既にプロジェクト作成画面になっています。

プロジェクトを作成

各項目を入力し「create project」を押下します。

※以下が2023年11月15日時点での対応リージョンのようです。
Tokyoは今後追加される予定にあると参考にしたブログに書いてありましたが、今回は一旦シンガポールを選択しました。

↓
「CONNECTION DETAILS FOR YOUR NEW PROJECT」モーダルが表示されました。


↓
「psql」のまま「Pooled connection」にチェックを入れて右下のボタンで内容を控えます。

ロールを新規作成

プロジェクトから作成した「neon_test」を選択します。

↓
左サイドメニューから「Role」を選択します。

↓
「New Role」を押下します。

↓
名前を「hyperdrive-user」として「create」を押下します。

↓
「Download.env」を押下します。

↓
以下ファイル内容となります。

PGUSER=hyperdrive-user
PGPASSWORD=xxxxxxxxxxxx

Cloudflare HyperDriveを作成＆Neonと接続する。

※上で作成したロールを利用してもいいですが、コピーしたそのままでもアカウント登録時に作成されたであろうロールで接続可能です。

$ wrangler hyperdrive create testhyperdrive --connection-string="<先ほどコピーしたPooled Connectionの内容/※最初のpsqlという文字列は不要>"
🚧 Creating 'testhyperdrive'
✅ Created new Hyperdrive config
 {
  "id": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "name": "testhyperdrive",
  "origin": {
    "host": "ep-silent-salad-xxxxxxxx-pooler.ap-southeast-1.aws.neon.tech",
    "port": 5432,
    "database": "neon_test_db",
    "user": "xxxxxxxxxx"
  },
  "caching": {
    "disabled": false
  }
}

Cloudflare WorkerをCloudflare Hyperdriveにバインド

hyperdrive-tutorial > wrangler.toml　をエディタで開きます。(vi等でも可)

末尾に以下を追加します。

node_compat = true # required for database drivers to function

[[hyperdrive]]
binding = "HYPERDRIVE"
id = "<hyperdriveのid>" # the ID associated with the Hyperdrive you just created

DBドライバーをインストール

ドライバーをインストール。

$ npm install pg

added 16 packages, and audited 85 packages in 3s

6 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Workerを書く

hyperdrive-tutorial > src >index.ts を以下に書き換えます。

import { Client } from 'pg';

export interface Env {
	// If you set another name in wrangler.toml as the value for 'binding',
	// replace "HYPERDRIVE" with the variable name you defined.
	HYPERDRIVE: any;
}

export default {
	async fetch(request: Request, env: Env, ctx: ExecutionContext) {
		console.log(JSON.stringify(env))
		// Create a database client that connects to our database via Hyperdrive
		// Hyperdrive generates a unique connection string you can pass to
		// supported drivers, including node-postgres, Postgres.js, and the many
		// ORMs and query builders that use these drivers.
		const client = new Client({ connectionString: env.HYPERDRIVE.connectionString });

		try {
			// Connect to our database
			await client.connect();

			// Test query
			let result = await client.query({ text: 'SELECT * FROM pg_tables' });

			// Returns result rows as JSON
			return Response.json({ result: result });
		} catch (e) {
			console.log(e);
			return Response.json({ error: JSON.stringify(e) }, { status: 500 });
		}
	},
};

※上記コードの詳しい説明はこちらにありました。

1.ClientHyperdrive 経由でデータベースに接続するように構成された新しいデータベースを作成しました。
2.await client.connect()を介してデータベースに接続されます。
3.await client.query()データベース内のすべてのテーブル (ユーザーおよびシステムが作成したもの) を出力するクエリを開始しました。
4.応答を JSON としてクライアントに返します。

モジュール'pg'の宣言ファイルが見つかりませんでした。」というエラーへの対処

import { Client } from 'pg';　で「モジュール'pg'の宣言ファイルが見つかりませんでした。」というエラーが起きました。

私はこのあたりの経験が少ない為、似た現象に対処した他の方のブログを踏襲したのですが、

hyperdrive-tutorial > src 内に「pg.d.ts」というファイルを新規作成し、内容を以下とする事でエラーは消化されました。

declare module "pg";

デプロイ

$ npx wrangler login
 ⛅️ wrangler 3.15.0
-------------------
Attempting to login via OAuth...
Opening a link in your default browser: https://dash.cloudflare.com/oauth2/auth?
#(※中略)
Successfully logged in.
▲ [WARNING] Processing ../wrangler.toml configuration:

    - Hyperdrive Bindings are currently in beta to allow the API to evolve before general
  availability.
      Please report any issues to https://github.com/cloudflare/workers-sdk/issues/new/choose`

コマンドを叩くとブラウザで以下の押下を求められるのでその通りします。

↓
以下表示されました。(このタブは閉じて構いません。)

↓
Workerをデプロイします。

$ npx wrangler deploy
 ⛅️ wrangler 3.15.0
-------------------
▲ [WARNING] Processing ../wrangler.toml configuration:

    - Hyperdrive Bindings are currently in beta to allow the API to evolve before general
  availability.
      Please report any issues to https://github.com/cloudflare/workers-sdk/issues/new/choose`


▲ [WARNING] Enabling Node.js compatibility mode for built-ins and globals. This is experimental and has serious tradeoffs. Please see https://github.com/ionic-team/rollup-plugin-node-polyfills/ for more details.


Your worker has access to the following bindings:
- Hyperdrive Configs:
  - HYPERDRIVE: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Total Upload: 359.20 KiB / gzip: 72.36 KiB
Uploaded hyperdrive-tutorial (1.35 sec)
Published hyperdrive-tutorial (3.98 sec)
  https://hyperdrive-tutorial.xxxxxxxx.workers.dev
Current Deployment ID: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

▲ [WARNING]内容に確認しつつ、次に進みます。

ローカルでWorkerを起動

$ npx wrangler dev --remote
 ⛅️ wrangler 3.15.0
-------------------
▲ [WARNING] Processing ../wrangler.toml configuration:

    - Hyperdrive Bindings are currently in beta to allow the API to evolve before general
  availability.
      Please report any issues to https://github.com/cloudflare/workers-sdk/issues/new/choose`


▲ [WARNING] Enabling Node.js compatibility mode for built-ins and globals. This is experimental and has serious tradeoffs. Please see https://github.com/ionic-team/rollup-plugin-node-polyfills/ for more details.


Your worker has access to the following bindings:
- Hyperdrive Configs:
  - HYPERDRIVE: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
⬣ Listening at http://0.0.0.0:8787
- http://127.0.0.xx:8787
- http://192.168.xx.xx:8787
Total Upload: 362.20 KiB / gzip: 72.88 KiB
╭─────────────────────────────────────────────────────────────────────────────────────────────────╮
│ [b] open a browser, [d] open Devtools, [l] turn on local mode, [c] clear console, [x] to exit   │
╰─────────────────────────────────────────────────────────────────────────────────────────────────╯

↓
表示されたURLにアクセスした結果

お片付け

Cloudflare側

Hyperdrive

$ wrangler hyperdrive delete xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
▲ [WARNING] Processing ../wrangler.toml configuration:

    - Hyperdrive Bindings are currently in beta to allow the API to evolve before general
  availability.
      Please report any issues to https://github.com/cloudflare/workers-sdk/issues/new/choose`


🗑️ Deleting Hyperdrive database config xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
✅ Deleted

Worker

$ wrangler delete
 ⛅️ wrangler 3.15.0
-------------------
▲ [WARNING] Processing ../wrangler.toml configuration:

    - Hyperdrive Bindings are currently in beta to allow the API to evolve before general
  availability.
      Please report any issues to https://github.com/cloudflare/workers-sdk/issues/new/choose`


✔ Are you sure you want to delete hyperdrive-tutorial? This action cannot be undone. … yes

Successfully deleted hyperdrive-tutorial

Logout

wrangler logout
 ⛅️ wrangler 3.15.0
-------------------
Successfully logged out.
▲ [WARNING] Processing ../wrangler.toml configuration:

    - Hyperdrive Bindings are currently in beta to allow the API to evolve before general
  availability.
      Please report any issues to https://github.com/cloudflare/workers-sdk/issues/new/choose`

Neon側

Role


↓

Project


↓

↓

以上でした

お読みいただき有難うございました。

参考にさせていただいた記事

https://qiita.com/mikecaat/items/f7aea72dd610c7a04171
https://zenn.dev/aiji42/scraps/62411e4b0daaed
https://zenn.dev/ymmt1089/articles/20220429_interface

Discussion