背景
クライアントのクラウドストレージアプリは、フロントエンドとバックエンドが密結合したモノリシックなLaravel（Bladeテンプレート）で構築されていました。サーバーレンダリングのUIは動作はしていたものの、モダンでアプリのような操作感に欠け、何よりネイティブのiOSアプリを追加したいというニーズに応えられない構造になっていました。ビジネスロジックがビューに埋め込まれているため、別プラットフォームから再利用することができなかったのです。
課題
目標は、ユーザー体験を一新しつつ、Web版とネイティブiOSアプリの両方を単一の信頼できる情報源から動かすことでした。そのためには、ファイルのアップロード・共有・権限管理といった中核ロジックを一切複製せずに、複数のクライアントから安全に利用できる必要がありました。さらに、稼働中のサービスを止めずに段階的に移行することが求められました。
戦略
バックエンドをAPI専用に分離
Laravelをビューを持たないステートレスなJSON APIへと再構築。Laravel Sanctumによるトークン認証を導入し、ファイル操作・共有・権限といった全ロジックを唯一の信頼できる情報源として整理しました。
React + Next.jsでフロントエンドを再構築
Next.js（App Router）でWebフロントエンドを一から構築。マーケティングページはSSG/SSRでSEOと表示速度を確保しつつ、ダッシュボードはAPIを消費するアプリライクなSPA体験に刷新しました。
ストラングラーパターンによる段階移行
ルート単位で少しずつ移行する「ストラングラー」方式を採用。移行が完了するまで既存のLaravelが該当ページを配信し続けることで、ダウンタイムゼロでの切り替えを実現しました。
大容量ファイルに最適化したストレージ層
S3への署名付きURLによる直接アップロードとチャンクアップロードを実装。サーバーを経由しない設計で、大きなファイルでも高速かつスケーラブルに扱えるようにしました。
同一APIでiOSアプリを構築
Webと全く同じREST APIをSwift製ネイティブiOSアプリから利用。ビジネスロジックを二重に書く必要がなくなり、Web・iOSの挙動が常に一致し、開発期間も大幅に短縮されました。
結果
- 単一のAPIがWeb（Next.js）とネイティブiOSアプリの両方を駆動
- ロジックを複製せずにiOSアプリを短期間でリリース
- アプリライクなUXと高速化により、ページ表示速度とCore Web Vitalsが大幅に改善
- フロントエンドとバックエンドを独立してデプロイできる、保守しやすいアーキテクチャを実現
- ダウンタイムゼロで段階的に移行し、既存ユーザーへの影響を回避
結論
このプロジェクトの転換点は、バックエンドをAPIとして分離した決断でした。フロントエンドとバックエンドを切り離したことで、モダンなNext.js Webアプリと、同じAPIを利用するネイティブiOSアプリを、ロジックを二重化することなく構築できました。密結合したLaravelモノリスでは不可能だったことです。バックエンドをひとつの信頼できる情報源として独立させることは、マルチプラットフォーム展開を見据えるあらゆるプロダクトにとって、最も価値ある投資のひとつだと私たちは考えています。