前回の記事 Notion 設定編はこちら

この記事は 3 本立てとなっています。
↓ の記事をまだ読んでない方は先に読んでから今回の記事を読むことをおすすめします。

Cloudflare Workers のプロジェクトを作成

お問い合わせを捌くためのバックエンド側のコードが必要になるのですが、今回は Cloudflare Workers というサービスを使って構築していきます。
Workers は無料のプランでも使えます。
正直ここは何でも良くて AWS Lambda や PHP のスクリプトでも大丈夫です。

Cloudflare のアカウントを作成

まずは Cloudflare のアカウントを作成します。
すでに持っている方は次に進んでください。

Cloudflare Workers 用のプロジェクトを作成

ダッシュボードから GUI でも作成できるのですがコマンドから操作した方が色々と便利なので「wrangler」という Cloudflare が提供しているコマンドを使って構築していきます。
プロジェクトの作成からデプロイまでコマンド上でできるので大変便利です。

まずはプロジェクトを作りたいディレクトリまで移動します。

npx wrangler init

を実行します。

プロジェクトのセットアップ

y を押して次に進みます。

プロジェクトの名前を設定します。

Hello World example を選択。

Hello World Worker を選択。

TypeScript を選択。

インストールが始まるので少し待ちます。

Git を使ってバージョン管理するか聞かれます。
Yes を選択。

デプロイするかを聞かれます。
ここも Yes を選択。

デプロイが完了。
画像にも書いてあるとおり今後デプロイを行うときは npm run deploy で簡単にデプロイできます。

これで Cloudflare Workers のプロジェクトができました。

環境変数用のファイルを置く

プロジェクトのルートに

.dev.vars

というファイルを作成します。
これが環境変数を置いておくファイルになります。

書き方は普通に.env ファイルと同じです。

NOTION_API_URL=XXXXXXXXXXXXXXXXXXXXX
NOTION_API_KEY=XXXXXXXXXXXXXXXXXXXXX
NOTION_DATABASE_ID=XXXXXXXXXXXXXXXXXXXXX

前の記事でコピーした Notion の各値をここに書きます。

コマンドで本番用の環境変数を設定する

この.dev.vars は開発用の環境変数を設定するものなので本番用も設定する必要があります。

wrangler secret put <key>

というコマンドを使用して本番用の環境変数を設定していきます。

ターミナル上で

npx wrangler secret put NOTION_API_URL

と入力します。

値を入力すれば本番用の環境変数が設定されます。

ダッシュボードのアカウントホームから変更されたアプリケーションのところの Worker 名をクリック。
設定 > 変数とシークレット から確認ができます。

これで Cloudflare Workers プロジェクト作成編は終わりです。

コード実装編へ

次のステップでは実際にフォームを作成してデータを送信、Notion データベースへの格納を行います。
コードの実装を行う方は ↓ より次の記事に進んでください。