Chap.07 Cloudflareを使う
今回はインターネット越しに通信をしたいと思います。 自前でサーバを用意すると記事のボリュームが増えてしまうので、 Cloudflareを 使ってWeb APIサーバとDBを用意します。
今回の成果物の見た目は以前の成果物と同じなので動画は省略します。
無料枠について
無料枠には以下の制限があるのでお気をつけください。 インタラクティブな作品に使用する際に、 高いサンプリングレートでデータ書き込みをするとすぐに上限に達してしまうかもしれません。
- Workers 無料枠
- 1日あたり10万件のリクエスト
- リクエストあたりのCPU処理時間：10ミリ秒以内
- D1 無料枠
- 読み取り行数: 500万/日
- 書き込み行数: 100,000/日
- ストレージ: 5GB（合計）
https://www.cloudflare.com/ja-jp/plans/developer-platform/ https://developers.cloudflare.com/d1/platform/pricing/
まずはローカルで実行してみる
以下のコマンドを実行するとローカル環境にサーバが立ち上がります。
# サーバのソースコードが置いてあるディレクトリに移動する
cd backend-for-creative-coding/chap09-cloudflare/b4nma-hono
# 依存ライブラリをインストールする
npm install
# DBの初期化用クエリ（schema.sql）を実行する
npx wrangler d1 execute b4nma-hono --config wrangler.local.toml --local --file=./schema.sql
# DBの初期化したDBの内容を確認する
npx wrangler d1 execute b4nma-hono --config wrangler.local.toml --local --command="select * from balls"
# 開発用サーバを起動する
npm run dev
その後、Processingスケッチ（backend-for-new-media-art/chap09-cloudflare/ClientApp）
を実行すれば、
Chap.03 追加、更新、削除編
で動かしたサンプルスケッチと同じような挙動が確認できると思います。
schema.sql
初期化用のクエリはこのようになっています。 Chap.03で出てきた初期化用のクエリとほとんど同じですね。
wrangler.local.toml
wranglerというのは、
CloudflareのCLIツールです。
wranglerを使う際にはwrangler.tomlに設定を書きます。
今回は、ローカル用の設定をwrangler.local.tomlに書いてあります。
src/index.ts
こちらがサーバのコードです。 今回のサーバはHonoで実装してあります。 なぜ、Honoを使ったかというと、このフレームワークは 今回使用する Cloudflare Workers 上で動く前提で開発されているからです。 HonoはExpressと同じくとてもシンプルなフレームワークなので、 比較的簡単に読めると思います。 また、DBには Cloudflare D1 を使用しています。 このDBはSQLiteで構築されているので、こちらも今までのサンプルを見ていただければクエリもわかると思います。
Processingスケッチ
ProcessingスケッチはChap. 03のスケッチのAPI_URLを書き換えただけです。
リモートにデプロイする
ここからが本題です。 先ほどローカルで実行したサーバを、 Cloudflareにデプロイします。
まずはCloudflareのアカウントを作成してください。
https://www.cloudflare.com/plans/
作成できたら以下のコマンドでWrangler CLIからもログインします。
npx wrangler login
ログインできたら以下のコマンドでデータベースを作成します。
npx wrangler d1 create b4nma-hono
データベースを作成したら、
以下のコマンドでローカル用の設定ファイルをコピーして、
リモート用の設定ファイルを作成します。
リモート用の設定ファイルしたら、
データベースのID（database_id）を書き換えてください。
cp wrangler.local.toml wrangler.remote.toml
# wrangler.remote.toml の database_id を書き換える
データベースのID（database_id）を書き換えたら、
以下のコマンドでリモートのデータベースを初期化することができます。
npx wrangler d1 execute b4nma-hono --config wrangler.remote.toml --remote --file=./schema.sql
npx wrangler d1 execute b4nma-hono --config wrangler.remote.toml --remote --command="select * from balls"
最後に以下のコマンドで、サーバのソースコードをデプロイします。
npm run deploy
デプロイが完了したら、
ProcessingスケッチのAPI_URLをCloudflare WorkersのURLに書き換えます。
https://b4nma-hono.studio-{なにかしらの文字列}.workers.dev/balls のようなURLになるはずです。
スケッチが正しく動作していれば動作確認完了です。
これでインターネット上に公開されたWeb APIを使ったProcessingスケッチの完成です。 遠隔地の人とデータを共有することができます。
では、次回はこちらに書いていこうと思います。