Chapter 03

リプレイスの構成

まず先にサービスの構成を説明していきたいと思います

ページ構成

ページは大きく分けて下記のようになっています

  • トップ
    • 最新の数件の写真を表示
  • 写真投稿
    • 写真のアップロード
    • Google Map を利用した緯度経度の設定
  • 写真詳細
    • 写真の表示
    • Google Map での緯度経度表示
  • アニメ一覧
    • 写真投稿されているアニメと全アニメを表示
  • アニメ詳細
    • アニメの写真の一覧表示
    • Google Map でピンを表示

良くある投稿型サイトで、ログインすることもできます

リプレイス前アーキテクチャ

Laravel による SSR + Vue.js & Web Components による操作という構成でした

デプロイ先は Heroku を利用し、MySQL でのデータ操作、写真は Cloudinary へアップロードしていました

リプレイス後アーキテクチャ

Next.js を利用し、Vercel にデプロイ、データ操作や写真のアップロードは Firebase を採用しました

デプロイも Firebase Hosting にして Firebase で統一しようと考えたのですが、Vercel の方が親和性が高そうだったので、Vercel にしました