ReproWorksLearning Product Studio
ブログ一覧へ

StepMathをCloudflare Workersで動かす構成について

StepMathは、Next.jsのApp Routerを使って作成した数学学習Webアプリです。
本番環境では、Cloudflare Workers上にOpenNextを使ってデプロイしています。

この記事では、Cloudflareにあまり詳しくない方向けに、StepMathがどのような構成で動いているのかを簡単に紹介します。

StepMathの基本構成

StepMathは、Next.jsで作成されたWebアプリです。

Next.jsは、Reactを使ってWebアプリを作るためのフレームワークです。
通常、Next.jsアプリはVercelにデプロイされることが多いですが、StepMathではCloudflare Workers上で動かしています。

Cloudflare Workersは、Cloudflareのエッジ環境でJavaScriptやTypeScriptのコードを実行できるサービスです。
ユーザーに近い場所で処理を実行できるため、軽量なWebアプリやAPIを高速に配信しやすいという特徴があります。

StepMathでは、Next.jsアプリをCloudflare Workersで動かすために、OpenNextを使用しています。
OpenNextを使うことで、Next.js App Routerで作成したアプリをCloudflare Workers向けに変換し、Cloudflare環境で動かしやすくしています。

ローカル開発の始め方

開発時は、通常のNext.jsアプリと同じように開発サーバーを起動できます。

npm run dev

または、利用しているパッケージマネージャーに応じて、以下のコマンドも使えます。

yarn dev

pnpm dev

bun dev

起動後、ブラウザで次のURLを開きます。

http://localhost:3000

これで、ローカル環境でStepMathを確認できます。

ログイン機能と学習進捗の保存

StepMathでは、ログイン機能は必須ではありません。

ログインしていない匿名ユーザーでも、すべてのレッスンを利用できます。
ただし、サーバー側に学習進捗を保存するにはログインが必要です。

つまり、StepMathでは次のような使い方ができます。

  • ログインせずにレッスンを試す
  • ログインして学習進捗を保存する
  • 後から同じアカウントで進捗を確認する

初心者向けの学習サイトでは、最初から会員登録を必須にすると離脱につながることがあります。
そのため、StepMathでは「まず使える」「必要になったらログインする」という形にしています。

認証の考え方

StepMathの認証機能は、Cloudflare WorkersとCloudflare D1で動くことを前提に設計しています。

D1は、Cloudflareが提供しているSQLiteベースのデータベースです。
Cloudflare Workersと組み合わせることで、ログイン情報や学習進捗などを保存できます。

StepMathでは、メールアドレスを使ったログインや外部アカウントを使ったログインに対応できる構成にしています。

ただし、認証まわりはセキュリティ上重要な部分です。
そのため、この記事では具体的な秘密情報、認証用の設定値、内部的なトークン処理の詳細については省略します。

実際に実装する場合は、次の点に注意する必要があります。

  • パスワードをそのまま保存しない
  • 認証用の秘密情報をコードに直接書かない
  • 本番用の設定値をGitHubなどに公開しない
  • Cookieやセッション管理を安全に行う
  • ローカル環境と本番環境の設定を分ける
  • 外部ログインを使う場合は、リダイレクトURLや許可ドメインを正しく設定する

ログイン機能は便利ですが、扱いを間違えるとユーザー情報の漏洩につながる可能性があります。
そのため、認証処理は慎重に設計する必要があります。

学習進捗の保存方法

StepMathでは、ログイン中のユーザーに対して、学習進捗をサーバー側に保存できます。

進捗情報には、たとえば次のような内容が含まれます。

  • どのレッスンを学習したか
  • どこまで進めたか
  • 学習済みの状態
  • 必要に応じた達成状況

匿名ユーザーの場合は、サーバー側に進捗を保存しません。
そのため、長期的に学習履歴を残したい場合は、ログインして利用する形になります。

このようにすることで、最初の利用ハードルを下げながら、継続的に学習したいユーザーには進捗保存機能を提供できます。

Cloudflare D1の利用

StepMathでは、ユーザー情報や学習進捗の保存先としてCloudflare D1を利用します。

D1はCloudflare上で利用できるデータベースで、Workersと組み合わせて使いやすいのが特徴です。

開発時には、WranglerというCloudflare公式のCLIツールを使って、D1データベースの作成やマイグレーションを行います。

具体的な設定値やデータベースIDなどは、環境ごとに異なるため、ブログ上では公開しないようにします。
特に、本番環境の接続情報や認証関連の値は、リポジトリや記事内に含めないよう注意が必要です。

ローカル開発時の設定

ローカル開発では、本番用の秘密情報を直接使わないようにします。

開発用の設定ファイルを用意し、必要に応じてダミー値やローカル用の値を設定します。

本番環境とローカル環境を分けることで、誤って本番の秘密情報を公開してしまうリスクを減らせます。

特に、次のような情報は公開しないように注意します。

  • 認証用の秘密鍵
  • 外部ログインサービスの秘密情報
  • データベース接続に関する固有情報
  • セッショントークン
  • 本番環境でのみ使う設定値

こうした情報は、Cloudflareの環境変数やシークレット管理機能を使って管理するのが基本です。

Cloudflare Workersを使うメリット

StepMathをCloudflare Workersで動かすメリットは、主に次の点です。

まず、Cloudflareのエッジ環境でアプリを配信できるため、ユーザーに近い場所から高速にレスポンスを返しやすくなります。

また、Workers、D1、R2などのCloudflareサービスを組み合わせることで、比較的シンプルな構成でWebアプリを運用できます。

学習サイトのように、静的ページと軽量なAPIが中心のアプリでは、Cloudflare Workersとの相性が良いです。

StepMathでは、Next.jsの開発体験を活かしながら、Cloudflareの低コストで軽量な実行環境を利用しています。

まとめ

StepMathは、Next.js App Routerで作成し、OpenNextを使ってCloudflare Workersにデプロイしている数学学習アプリです。

ログイン機能は任意で、匿名ユーザーでもレッスンを利用できます。
一方で、ログインしたユーザーには学習進捗を保存できる仕組みを用意しています。

ユーザー情報や進捗情報の保存にはCloudflare D1を利用し、Cloudflare Workersと組み合わせて軽量に動作する構成にしています。

認証や環境変数に関する具体的な値は、セキュリティ上公開しないように注意が必要です。
特に、本番環境の秘密情報やトークン、外部ログインサービスの設定値は、コードやブログ記事に含めないようにします。

Cloudflare WorkersとD1を使うことで、Next.js製の学習アプリを比較的シンプルな構成で運用できます。
StepMathの構成は、Next.jsをCloudflare上で動かしたい方や、D1を使って進捗保存機能を作りたい方にとって、一つの参考例になると思います。