JA EN

静的サイトにバックエンドを追加する

このサイトは素のHTMLをGitHub Pagesに置いただけの静的サイト。ランニングコストをかけずバックエンドも構築したかったので、色々探してみたところCloudflare Workersにたどり着いた。これまでAWSのプロジェクトばかりだったので、まとめておく。

Cloudflare Workersについて

CloudflareもAWSやGoogle Cloudと同じくクラウド上にインフラを構成してくれる企業。ただ出自が違っていて、データセンターにサーバを並べるところからではなく、世界中に張った回線でWebサイトを速く安全に届けるところから始まっているらしい。その回線網の上、つまり利用者に近い場所(エッジ)で動く軽量なサーバ関数がWorkersで、AWSだとLambdaにあたる。

常時起動しているサーバと違い、リクエストが届いたときだけ実行されるので、使わなければ費用は発生しない。しかも、無料枠は1日100,000リクエストあるとのこと。自分のサイトは悲しいかな、ほぼアクセスが無いし、コーポレートサイトのお問い合わせくらいならまず使い切らないだろう。

書くコードはJavaScriptかTypeScript。今回はその上でHonoというWebフレームワークを使って作る。

import { Hono } from 'hono';

const app = new Hono();

app.post('/contact', async (c) => {
  const body = await c.req.json();
  // 人間判定、メール送信、ログ保存
  return c.json({ ok: true });
});

export default app;

Expressとか、PythonのFlaskなんかにも近い感じ。

手元の開発にはwranglerという公式CLIが使える。開発サーバの起動からデプロイ、シークレット管理までこれ一本でいけるので、自分はdockerベースのローカル環境を作り、そこで動作確認までしてから、githubにpush、Actionsでデプロイする、という流れまで作れている。

お問い合わせフォームをAPI化

いきなり大きいところに手を付けると挫折しそうなので、最初は、元々外部サービス(Formspree)を使ってメール送信していた「お問い合わせフォーム」をAPI化してみた。

[フロント ContactSection]
        │  POST /contact
        ▼
[Cloudflare Workers / Hono]
   ├─ Turnstileで人間判定
   ├─ Resendでメール送信
   └─ KVに最小限のログを保存

せっかくCloudflareに置くので、よく見るTurnstileを使おう。スパム対策ができて、reCAPTCHAの代わりになるもの。公式サイト感がでそう(苦笑)。

Turnstileの表示人間判定のバナー

メール送信にはResendを使った。送信ドメイン認証さえ済ませれば、APIキー一本で送れる。送信日時と送信元くらいの最小限のログはWorkers KVに残している。KVはWorkersから読み書きできる簡易的なキーバリューストアで、こちらにも無料枠がある。

せっかくなのでバリデーションチェックなども行うようにし、無料でFormspreeを使っていた時は終了画面が作れなかったので、それも用意し、いわゆるWebサービス感が一気に上がったw。

完成したお問い合わせフォームお問い合わせフォーム

まとめ

今回は、簡単にお問い合わせフォームだけだったけど、色々作れると思うと妄想が広がってくる。しかも調べてみると、フロントの配信もドメイン運用もCloudflareに寄せれば無料でいけるらしい。運用コストがぐっと抑えられるし、アナリティクス的な機能もあるみたいなので、なんだかCloudflareに寄せたい気分になってきたなぁ～。今後も作業の合間に少しずつまとめていきたい。

LOOPSKETCHでは、こうした構成でのサイト構築や既存サイトの刷新も請けています。よろしければ、メニューのお問い合わせから、ぜひご連絡ください。

← 記事一覧へ