Closed7

Vercel 移行メモ

kurosamekurosame

メリット・デメリット

  • React の Web フレームワークである Next.js と開発元が同じなので、非常に相性が良い
    • Next.js + Vercel にすることで、ビルドやランタイムさまざまなキャッシュが有効になる
    • 悪く言えば、ベンダーロックインされてしまう
  • ほぼゼロコンフィグでホスティングまでいける
    • デプロイ CI が不要
  • SSR する場合も自前でサーバーを用意する必要がない
  • AWS ほどの高度なカスタマイズ性はない
    • AWS の場合は、LB など AWS 他リソースとの連携が強み
    • Vercel はフロントエンド向け機能に特化している
kurosamekurosame

Next.js + ECS だと使えない機能

※ こちら現状調査中

  • Next.js の standalone モードで、t3-env を利用した場合、ランタイム（ECS）の環境変数が設定できない
    • t3-env（タイプセーフな環境変数が設定できるライブラリ）経由だと設定できないっぽい
    • t3-env を使わず、process.env だとたぶんいける
  • Next.js の Middleware 機能が ECS だと動かない
    • 調査中
kurosamekurosame

デプロイ手順

https://vercel.com/dashboard

初回デプロイ

  1. Vercel 上にプロジェクトを作成
  2. GitHub アカウントを紐付ける
  3. Deploy

初回以降デプロイ

GitHub のベースブランチ（main）にマージされたら自動的にデプロイされる
ベースブランチ以外だとプレビュー環境にデプロイされる

kurosamekurosame

料金プラン

https://vercel.com/pricing

  • 商用利用する場合、基本的に Pro プランを利用することになると思う
  • Pro プランは、1 メンバー（Vercel を設定できるユーザー）：$20/month
  • プランごとに帯域幅（トラフィック）やデプロイ回数などに制限が設けられており、その月制限を超えなければ課金はされない（Pro プランなら$20 のみ）

月の制限を超える可能性がありそうな箇所

  • 帯域幅（トラフィック）
    • 1 TB/month
    • その月内で上記を超えると、100GB ごとに$40
  • 画像の最適化枚数（next/image を使って画像のリサイズなどをやっている箇所）
    • 5,000 枚/month
    • その月内で上記を超えると、1,000 枚ごとに$5

対策

  • リンクの prefetch 機能を使わない
    • prefetch 機能はリンク先のページを先読みする機能
    • これを使うとトラフィックが増大する可能性がある
  • 画像の最適化を行わない or 別のツールで画像の最適化を（安価であれば）検討
    • ※ 画像の最適化を行わないと通信量サイズが増えるので注意

参考：https://zenn.dev/aiji42/scraps/748b2aa4dd8dd1

その他気になる点

  • Pro プランでもランタイムのログは 1 日分しか保持されない
    • 別途ロギングツールを検討する必要はあるかも
  • Web ページ解析（GA みたいな）、パフォーマンス計測、監視は別途課金すれば使える
  • リソースの使用量は以下で確認できる
kurosamekurosame

今後に関して

  • すでに作られた AWS 構成を置き換えてまで Vercel を使うメリットは今の所感じていない
  • 今後新規システムの場合に検討の候補にいれたい
    • 以下の要件を持つシステムの場合、Vercel を検討するかも
      • 高いパフォーマンスを求めるシステム
        • Vercel の KVS や DB などのエッジコンピューティングサービスを利用すれば、API サーバーを経由せずにブラウザと Vercel 間のみの通信で完結できる可能性がある
      • SSR をやるシステム
        • Vercel だと自前でサーバーを用意しなくてよい
      • 小・中規模なシステムや画像が少ないシステム
        • コストが抑えられるかも
このスクラップは2024/02/01にクローズされました