はじめに
こんにちは、Taichi Endohです。 今回は、私のポートフォリオサイト（リンク）運用において直面した「機能消失事故」からの復旧と、そこで得られたセキュリティとアーキテクチャの知見について共有します。
「Next.jsで作ったサイトをVercelにデプロイする」だけでなく、自宅サーバー(NAS)との連携やハイブリッド認証を組み込んだ、少しマニアックな構成になっています。
1. 全体アーキテクチャ
今回のポートフォリオは単なる静的サイトではなく、**「自分だけの実験場（Lab）」**として機能するように設計しています。
技術スタック
1. フロントエンド: Next.js 14 + Tailwind CSS + Framer Motion
Next.js 14: サイトの「土台」です。最新の機能（App Router）を使って、ページ切り替えが爆速なサイトを作りました。
Tailwind CSS: サイトの「お化粧」です。決まったクラス名を書くだけで、スマホ対応やダークモードもお手の物です。
Framer Motion: サイトの「動き」です。画面を開いたときのアニメーションや、フワッと動く心地よい演出を担当しています。
2. データベース: Vercel Postgres
サイトの「記憶場所」です。
ユーザー情報やログイン状態などを保存するために、Vercelが提供しているサーバーレスなデータベース（PostgreSQL）を使っています。
3. ORM: Prisma
データベースとの「通訳」です。
難しいSQLコマンドを書かなくても、JavaScript（TypeScript）のコードで直感的にデータベースを操作できるようにしてくれる便利ツールです。今回は安定性を重視してバージョン5系を採用しました。
4. 認証: NextAuth.js
サイトの「ガードマン」です。
「Googleでログイン」や「パスワードでログイン」といった複雑なセキュリティ機能を、安全かつ簡単に実装するために使っています。
5. AI連携: Vercel AI SDK
サイトの「頭脳」です。
OpenAIなどのAIとチャットする機能を、わずかなコードで呼び出せる魔法のキットです。これを使ってサイト内に「AIチャットボット」を埋め込んでいます。
6. インフラ: Cloudflare Tunnel
自宅への「秘密の地下トンネル」です。
通常、自宅にあるサーバー（NAS）をネットに公開するには危険な「壁の穴あけ（ポート開放）」が必要ですが、このツールを使うと安全なトンネルを通して外部から接続できるようになります。これのおかげで、自宅の自動化ツール(n8n)とサイトを連携させています。
2. 直面した課題：高機能版の消失と復旧
開発の過程で、Gitの操作ミスにより「AIチャットや認証機能が入った高機能バージョン」が、シンプルなバージョンに上書きされてしまう事故が発生しました。 （Gitの履歴を見ると、約3,500行ものコードが消えていました...）
対応：Git Resetと部分修正
git reset --hard で過去のコミット（1月17日時点）まで巻き戻すことで機能を復元しました。しかし、単に戻すだけでは以下の問題がありました。
環境変数の管理見直し: 開発プロセスでの試行錯誤中にコードに残っていた設定値を整理し、完全に環境変数 (.env) 管理へと移行しました。
接続先の不一致: 自宅サーバー(n8n)への接続先が生のIPアドレスになっていた。
ビルドエラー: 最新のVercel環境でビルドが通らない。
これらを一つずつ解決していきました。
3. Cloudflare Tunnelによる「自宅要塞化」
以前の記事（v6プラス環境でも外部アクセスしたい！）で紹介した通り、自宅のSynology NASで稼働している自動化ツール「n8n」をポートフォリオから呼び出せるようにしています。
Before (危険な構成)
// 生のIPアドレスへのHTTP接続
const n8nUrl = `http://162.43.xx.xx:5678/webhook/...`;
これでは通信が暗号化されず、IPが変わると繋がらなくなります。
After (セキュアな構成)
// Cloudflare Tunnel経由のHTTPS接続
const n8nUrl = `https://n8n.taichiendoh.com/webhook/...`;
Cloudflare Tunnelを通すことで、ポート開放不要かつSSL暗号化された状態で、Vercelから自宅サーバーへ安全にリクエストを送れるようになりました。
4. Vercel Postgres + Prisma の落とし穴
ログイン機能を実装するために Vercel Postgres を導入しましたが、デプロイ時にエラーが発生しました。
エラー内容
Error: The datasource property 'url' is no longer supported in schema files.
最新の Prisma v7 系では
schema.prisma
の記述方式が変わっており、既存の記述と整合性が取れなくなっていました。
解決策
あえて安定板である Prisma v5.22.0 にダウングレードすることで解決しました。 最新を追いかけるのも重要ですが、インフラ周りは**「動く構成の整合性」**を優先する判断も時には必要です。
// package.json
"dependencies": {
"@prisma/client": "5.22.0",
...
},
"devDependencies": {
"prisma": "5.22.0",
...
}
5. まとめ
今回の復旧作業を通して、**「コード管理（Git）」「シークレット管理（正規の.env利用）」「インフラ接続（Cloudflare Tunnel）」**の重要性を再認識しました。
ただのポートフォリオではなく、バックエンドまで連携した**「生きたシステム」**を作るのは非常に楽しいです。 もし興味があれば、ぜひ Cloudflare Tunnel や Vercel Postgres を試してみてください。