コスト削減実例(Vercel編)
1.3K Views
September 17, 24
スライド概要
2024/09/17 吉祥寺.pmで話した内容です。
関連スライド
各ページのテキスト
PITCH DECK コスト削減実例 (Vercel編) 2024/09/17 merutin
merutin 公官庁向けシステム開発 → ERPパッケージベンダー → DELTA 特定の技術にこだわらず、お客さんに合わせて何でもやっています。 直近1年くらいの仕事 ● ● ● ● ● ● Next.js + Go + Keycloakで認証認可のPoC作成 Cloud Functions + Firestore を Laravel + Go + MySQLにリアーキテクチャ 社内の管理会計ソフトウェアの開発(Next.js、GraphQL、Lambda ) LMSの構築、修正 技術顧問 コスト削減(AWS、Google Cloudなど)
コスト削減について コスト削減の事業やっています !!! https://costcut.cloud/
対象サービス Posemaniacs https://www.posemaniacs.com/ja フロントエンドはVercelを利用している バックエンドのコスト削減もしたが、今回の発表の 対象外
Vercelの料金
Vercelの料金
Vercelの料金
Vercelの料金
請求内容が変わった 2024年6月の請求明細 2024年7月の請求明細
ボトルネックを探す _next/imageの転送量が圧倒的に多いことから、転送量を減らせないかを検討する
Next Image Componentとは サイズ等を表示に合わせていい感じに調整してくれる機能 _next/imageにサイズなどを調整した画像がキャッシュされるら しい。 Posemaniacsは画像ファイルを多く利用しているため、ここの転 送量が多くなっていた。 ※ 変更前の請求情報から入っている部分ではあります。 https://nextjs.org/docs/pages/api-reference/components/image
Next Image Componentとは 実は画像の変換処理をするLoaderは色々別のものを選択できる → loaderを変更することでデータの転送量を軽減を行った
Cloudflare Transform images https://example.com/cdn-cgi/image/width=100/https://s3.example.com/bucket/image.png のような形でURLを指定することで、指定したURLの画像を変換できるサービス 1000件のユニークな画像変換で0.05ドル 上記の例だと、width=100/https://s3.example.com/bucket/image.pngには何度アクセスしても変換は1回 データの転送量は費用に入らない！ Next.jsの公式でもCloudflareの利用方法が記載されていたので利用するように変更。 ※ 変換元のドメインはCloudflare側である程度絞り込みができるので、悪用はできません
ちょっとだけ苦戦した点 利用しているNext.jsのバージョンが古かったので、Docsに書いているようなnext.config.jsにloaderを直接記載する方法では 利用できなかった。 ImageのComponentにloaderを直接指定するようなラッパーを書いて回避
コスト削減結果 施策の実行前後で、Fast Data Transferの量が約半分程度に下がった。 ※ 7/29 は変更中の転送量です Cloudflare側は大体月に8000 Image程度の変換数だった → 8000件) * 0.05 1000件あたりの費用) = 4ドル さらに、_next/imageへのアクセス件数が減ったことで、Edge Requestの 件数も減少した
まとめ - Vercelの料金体系が変わっていく中で、費用が徐々に高くなってきた。 - Imageコンポーネントへのアクセスが多いことから、どうにかして転送量を削減 できないかを検討した。 - Cloudflare Transform images を利用することで、転送量に関係ない費用に なり、結果的にコストが削減できた。 - - 実はまだ別の部分をさげられないかを検討中。 コスト削減でお困りでしたらぜひお声がけください。 - Twitter(Ｘ)のDMで連絡もらえれば私がメインで進めます。
コスト削減について コスト削減の事業やっています !!! https://costcut.cloud/