採用技術/ Tech Stack

受取ページ・Box の共有リンクタブ・全社管理画面の 3 面は、同じ仕組みで作られています。受取ページだけはログインが無いため、認証を前提にした部品を一切通しません。

Next.jsApp Router

3 つの画面すべての土台。受取ページは他の画面と共通の外枠を継承せず、独立した構成にしています（本体ホストへの相対リンクが公開ホストに残らないようにするため）。

ReactUI

画面の組み立て。受取ページの状態遷移は、純粋な関数として切り出して自動テストの対象にしています。

TypeScriptTypes

画面とサーバのやりとりの形を、型として 1 か所で定義。どちらかを変えるともう一方が壊れることが、実行する前に分かります。

Tailwind CSSStyling

見た目の指定。色や余白はデザインの決め事から作った変数を通して使い、画面ごとに数値を書きません。

shadcn/ui ＋ Base UIComponents

ダイアログ・入力欄・表などの部品。キーボード操作や読み上げへの対応が組み込まれたものを土台にしています。

TanStack QueryData Fetching

データの取得と再取得。ZIP の進捗確認では「準備中のときだけ 5 秒ごとに、それ以外は止める」という制御をここで行っています。

nuqs

nuqsURL State

一覧のフィルタや並べ替えを URL に保持。管理者どうしで「この状態の画面」をそのまま共有できます。総当たり検知の通知メールから直接この状態へ着地します。

ZodValidation

入出力の検証。同じ定義を画面とサーバの両方が読むので、片方だけ緩いという状態になりません。

Rc

RechartsCharts

アクセス傾向の 2 つのグラフ。この機能でアプリに初めて導入しました。

共有リンクのために追加した API は 23 本（受け取り用の公開 8 本、発行と管理 9 本、全社管理 6 本）、テーブルは 3 つです。

HonoAPI

API の土台。受け取り用の公開 API は独立したまとまりとして分け、ログイン前提の部品をそこへ持ち込めないよう機械的に検査しています。

Node.jsRuntime

API と ZIP 生成の実行環境。パスワードのハッシュ計算は、他の要求の処理を止めない方式で呼んでいます。

PostgreSQLDatabase

リンク本体・アクセス記録・確認コードの 3 テーブル。行ごとのアクセス制御を使い、経路ごとに見える範囲と書ける列を絞っています。

SupabaseManaged Postgres

PostgreSQL の運用基盤。接続の集約やバックアップを任せています。

PrismaORM & Migration

テーブル定義と変更の管理。行ごとのアクセス制御など表現できない部分は、変更ファイルの末尾に直接記述します。本番への適用は手動で行います。

yazl

yazlZIP

フォルダの ZIP 生成。全部をいったん保存してから固めるのではなく、読みながら書き出します。途中で失敗したときはあえて壊れた状態で終えることで、中途半端な ZIP を「できあがったもの」として配らないようにしています。

公開ホストの入口から、ZIP の生成、掃除処理まで。共有リンクのために新しく作ったサービスはありません（既存のサービスに処理を足しています）。

Cloud Load Balancing ＋ Cloud DNSEntry

1 台の負荷分散がホスト名を見て本体と公開ホストへ振り分けます。証明書は 2 ホスト分を 1 枚にまとめています。

Armor

Cloud ArmorWAF

公開ホストの外周。接続元ごとのレート制限で頭打ちにします。本体アプリとは別のルールです。

Run

Cloud RunServices

画面と API の実行環境。共有リンクのための新しいサービスは作らず、既存の 2 つに機能を足しました。

Jobs

Cloud Run JobsBatch

ZIP の生成と、日次の掃除処理。ZIP は要求のたびに単発で起動し、完了を待たずに受け付けを返します。

Cloud StorageObject Storage

検査済みファイルの保管場所と、ZIP の一時置き場。一時置き場は 72 時間で自動削除する設定にしています。

P/S

Pub/SubMessaging

案内メールと総当たり通知の配送経路。配送できなかったものを退避する仕組みと、その監視を組にしています。

Sched

Cloud SchedulerCron

日次の掃除処理の起動。期限切れ ZIP の後始末と、条件が消えたアラートの整理を行います。