本文へスキップ
mreysei · Michael Reyes
テーマ

Ecosystem

このポートフォリオを支えるプラットフォーム。非公開のAPIを中心に9つのプロジェクトがつながっています。

種類
Web
年
カテゴリー
プラットフォームの構成図。ブラウザは7つのNext.jsサーバー(Portfolio、Go、Terminal、Play、Digest、鍵マークで分けたBackofficeとFinance)とやり取りし、それらはすべてFastifyのAPIにつながり、APIはPostgreSQLにデータを保存します。CDNはブラウザにファイルを配信し、BackofficeとFinanceからのアップロードを受け取ります。

プロジェクトについて

このポートフォリオを支えるプラットフォームです。9つの独立したプロジェクトがそれぞれ専用のリポジトリ、パイプライン、デプロイを持ち、信頼できる唯一の情報源である非公開のAPIを中心にまとまっています。一部は公開されていて(ポートフォリオ、リンク集、ターミナル、ピクセルアートの家)、残りは自分専用です。

目的:Webでの私の顔と毎日使うツール(コンテンツ、統計、短縮リンク、経理、ニュースレター)を、外部のサービスに頼らずに一か所で管理し、セキュリティ、SEO、アクセシビリティをすべての部分で同じように大切にすることです。

できること:非公開の部分です。

  • API:中核です。FastifyとPostgreSQL、Drizzleで作り、30のビジネスコンテキスト、約270のルート、63のマイグレーションがあります。インターネットには公開しておらず、ほかのサイトのサーバーからだけ呼び出されます。
  • CDN:ファイルを保存・配信し、sharpで画像をリサイズし、メタデータをSQLiteに保存します。保護されたファイルは、許可されたオリジンからしか埋め込めません。
  • 管理画面:コンテンツ、統計、短縮リンク、個人用メモを管理する画面です。
  • 経理:顧客、プロジェクト、連絡先、作業時間の記録、PDF付きの請求書を扱います。専用のログインはなく、管理画面からセッションを引き継ぎます。
  • ニュースレター:APIがClaudeを使い、出典をもとに毎日1本の記事を書きます。1日と1か月の予算があり、モデルの回答は信頼できないテキストとして扱い、保存する前に検証します。
  • 通知:サイトが落ちたときやお問い合わせが届いたとき、APIがTelegramで知らせてくれます。
9つのプロジェクトと1つの非公開API

SEO:公開サイトは同じ手引きに従っています。canonical、スペイン語・英語・日本語のhreflang、サイトマップ、構造化データ。非公開のサイトがインデックスされることはありません。

アクセシビリティ:すべてのサイトでWCAG 2.2 AAを最低ラインとし、各テーマのコントラストをテストで確認しています。

パフォーマンス:LCPは1.8秒未満、INPは150ミリ秒未満、CLSは0.05未満、自前のJavaScriptは1ページ25kBという予算があります。ポートフォリオのトップページは、CPUを4倍遅くし低速な4G回線のスマートフォンでLCP 1.75秒です。

セキュリティとプライバシー:ブラウザーがAPIと直接やり取りすることはありません。各サイトはBFFで、必要な権限だけを持つ専用のキーで、自分のサーバーからAPIを呼び出します。パスワードはArgon2、パスキーと二要素認証に対応し、その秘密鍵はAES-256-GCMで暗号化しています。セッションのトークンはローテーションし、再利用されるとその系列ごと無効になり、Cookieは__Host-、HttpOnly、SameSite=Strictです。重要な書き込みには新しいTOTPコードが必要で、全体と利用者ごとにリクエスト数を制限し、外向きのリクエストはプライベートアドレスに届かず、公開サイトはnonceを使った厳格なCSPとプリロード付きのHSTSを使っています。アクセス解析は自前で外部のスクリプトは使わず、訪問者は日替わりのソルトを使ったHMACで数え、DNTとSec-GPCに従います。

各サイトのキーの権限数 公開サイトはコンテンツの編集も経理へのアクセスもできません。
データを表示する: 各サイトのキーの権限数
各サイトのキーの権限数
項目権限
Portfolio3
Go3
Terminal4
Digest2
Play2
Finance1
Backoffice2

アーキテクチャと品質:すべてのプロジェクトが厳格なTypeScriptとヘキサゴナルアーキテクチャで書かれ、ドメインは外部に依存せず、それをlintのルールで保証しています。コンテンツが変わるとAPIが各サイトに知らせ、変わった部分だけを再生成します。すべてCaddy(HTTP/3)の背後のDockerコンテナで動き、各リポジトリはデプロイ前にGitHub Actionsでフォーマット、lint、型、テスト、ビルドを通します。

リポジトリごとのテストファイル数 合計858個。
データを表示する: リポジトリごとのテストファイル数
リポジトリごとのテストファイル数
項目テストファイル
API241
Backoffice201
Portfolio111
Finance87
Terminal55
Go51
Digest38
Play37
CDN37

現状:本番で稼働しながら、今も成長を続けています。2026年から60以上のステップを積み重ねてきました。

技術

スクリーンショット