- サーバーレス(Serverless)は実際にサーバーが存在しないことを意味するのではなく、単に他人のサーバーを使うことを意味する
- ServerFreeアーキテクチャは、バックエンドサーバー、コンテナ、仮想マシンなしでもコードを実行できるという概念を提案する
- このアーキテクチャではブラウザ内でコードを実行し、必要なのは静的ファイルを配信するサーバーだけである
- Webアプリケーションをブラウザで実行できるようにパッケージ化する方法を実演
- フロントエンドコードは通常どおりビルドされ、バックエンドはパッケージ化されてWeb Workerで実行され、データベースにはWebAssemblyにコンパイルされたSQLiteを使用する
アイデア
- コンテンツマーケティングを通じてデモプロジェクトを作ることに決め、Hacker Newsに着想を得て、プライバシー面で注目される求人応募トラッカーを作ることにした
- このプロジェクトは、Web Worker、ドキュメントの不整合、欠落したドキュメントなどの問題を解決しながら、新しいアーキテクチャを開発するプロセスへと発展した
クラシックアーキテクチャでの最初の試み（簡単な部分）
- SubZero CLIを使ってデータベーススキーマを変更し、権限を設定してアプリを構築
- CRUDとフィルタリング機能を提供する一方で、デモというより製品に近いUIのカスタマイズを進めた
- 左側の無駄なスペースを減らすため、サイドバーを上部へ移動
- "Opportunities"ページにShow、Create、Edit、Listコンポーネントを追加
- バックエンドコードに手を入れずに複雑なフィルタリングフローを実装
- ダッシュボードを改善し、「公開中の機会」「応募あたりの平均進捗率」「応募後の平均日数」などの関連データを表示
- 本番デプロイのためにDockerイメージをビルドし、データベースをシードしてコンテナを実行
- SQLiteデータベースファイルをコンテナ外に保持して、データを永続化
- Turso DBを使ってSQLiteデータベースの永続性とバックアップの問題を解決
ServerFreeアーキテクチャへの移行（面白い部分）
- SQLiteをWebAssemblyにコンパイルしてデータベースとして使用
- OPFS(Origin-Private FileSystem)を使ってデータを保存
- バックエンドコードをWeb Workerで実行し、UIスレッドのブロッキングを防止
- ブラウザ互換性を確保するため、Expressをitty-routerに置き換え
- Service Workerを使ってUIとバックエンド間のリクエストを横取りして処理
- メインスレッドを介して、Service WorkerとWeb Worker間の安定した通信を実装
- メインスレッド(UI)から認証関連コードを削除
- データはユーザーのコンピュータ上に保存され、サーバーへ送信されない
結論
- このアーキテクチャは、特に顧客データが独立しており、ユーザー間で共有する必要がない場合に有用
- バックエンドサーバーが不要なためホスティングコストが削減され、データプライバシーが強化され、セキュリティが向上する
- Electric のようなツールを使うことで、データベースの一部をクライアントに同期し、一部のリクエスト/クエリをブラウザで処理できる
1件のコメント