コスト削減実例(Vercel編)

1.6K Views

September 17, 24

スライド概要

2024/09/17 吉祥寺.pmで話した内容です。

profile-image

技術支援をしています。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

PITCH DECK コスト削減実例 (Vercel編) 2024/09/17 merutin

2.

merutin 公官庁向けシステム開発 → ERPパッケージベンダー → DELTA 特定の技術にこだわらず、お客さんに合わせて何でもやっています。 直近1年くらいの仕事 ● ● ● ● ● ● Next.js + Go + Keycloakで認証認可のPoC作成 Cloud Functions + Firestore を Laravel + Go + MySQLにリアーキテクチャ 社内の管理会計ソフトウェアの開発(Next.js、GraphQL、Lambda ) LMSの構築、修正 技術顧問 コスト削減(AWS、Google Cloudなど)

3.

コスト削減について コスト削減の事業やっています !!! https://costcut.cloud/

4.

対象サービス Posemaniacs https://www.posemaniacs.com/ja フロントエンドはVercelを利用している バックエンドのコスト削減もしたが、今回の発表の 対象外

5.

Vercelの料金

6.

Vercelの料金

7.

Vercelの料金

8.

Vercelの料金

9.

請求内容が変わった 2024年6月の請求明細 2024年7月の請求明細

10.

ボトルネックを探す _next/imageの転送量が圧倒的に多いことから、転送量を減らせないかを検討する

11.

Next Image Componentとは サイズ等を表示に合わせていい感じに調整してくれる機能 _next/imageにサイズなどを調整した画像がキャッシュされるら しい。 Posemaniacsは画像ファイルを多く利用しているため、ここの転 送量が多くなっていた。 ※ 変更前の請求情報から入っている部分ではあります。 https://nextjs.org/docs/pages/api-reference/components/image

12.

Next Image Componentとは 実は画像の変換処理をするLoaderは色々別のものを選択できる → loaderを変更することでデータの転送量を軽減を行った

13.

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側である程度絞り込みができるので、悪用はできません

14.

ちょっとだけ苦戦した点 利用しているNext.jsのバージョンが古かったので、Docsに書いているようなnext.config.jsにloaderを直接記載する方法では 利用できなかった。 ImageのComponentにloaderを直接指定するようなラッパーを書いて回避

15.

コスト削減結果 施策の実行前後で、Fast Data Transferの量が約半分程度に下がった。 ※ 7/29 は変更中の転送量です Cloudflare側は大体月に8000 Image程度の変換数だった → 8000件) * 0.05 1000件あたりの費用) = 4ドル さらに、_next/imageへのアクセス件数が減ったことで、Edge Requestの 件数も減少した

16.

まとめ - Vercelの料金体系が変わっていく中で、費用が徐々に高くなってきた。 - Imageコンポーネントへのアクセスが多いことから、どうにかして転送量を削減 できないかを検討した。 - Cloudflare Transform images を利用することで、転送量に関係ない費用に なり、結果的にコストが削減できた。 - - 実はまだ別の部分をさげられないかを検討中。 コスト削減でお困りでしたらぜひお声がけください。 - Twitter(X)のDMで連絡もらえれば私がメインで進めます。

17.

コスト削減について コスト削減の事業やっています !!! https://costcut.cloud/