Open9

Vercelでやらかす前に色々調べるスクラップ

pofu_chanpofu_chan

個人的に一番怖いのは請求額。
プロプランで契約しているが、従量課金制のものは下記。

帯域幅: 1TB / 月
サーバーレス関数実行容量: 1000GB / 月
画像最適化: 5000枚 / 月

pofu_chanpofu_chan

トップページでの1PVあたりのトラフィック量を700kb、
平均PVは160万PVだと仮定する。

帯域幅

1TBを超えると、$55 / 100GBの従量課金が発生する。(2022/2/6現在)

パターン1:平均PV160万/月の場合
月間トラフィック量: 700kb * 1,600,000PV = 1.04TB(1,068GB)
超過トラフィック量: 1,068GB - 1,024GB = 44GB
超過容量: 44GB / 100GB = 0.4
超過した44GB分の請求( $55 / 100GB)がくるので、この場合の請求金額は約6,300円

パターン2: 広告などを打ち、300万PVだった場合
700kb + 300,0000PV =1.95TB(2,002GB)
2,002GB - 1024GB = 978GB
978GB / 100GB = 9.78
10 * 6300 = 約6,3000円

実際はユーザーキャッシュがあったりするのでこの通りの数字にはならないが、
160万ユーザーがトップページに来たらといった感じの大きめの見積もりとなる。

pofu_chanpofu_chan

サーバーレス関数実行容量

主な実行箇所
・ISRでページを生成するとき
・Next.jsのAPIルートなどで関数を実行するとき

1000GB / 月の無料枠を超えると $55 / 100GB で従量課金が発生する

ISRのrevalidateを気をつけたりしないと行けない(1sに設定してしまうとかは避けたい)

自分の場合使い方があってるかはわからないが3600sに設定し、
CMSからのwebhookでビルド -> Vercelはデプロイメントが更新されるとCDNキャッシュをクリア という形で更新が反映されるようにはしてみている。
(これで使い方があってるかはわからないけどビルド時間は大幅軽減できてる + 更新も反映される)

これだったらrevalidateはSTG環境以外は 3600s * 24 (1日)みたいな感じでもっと長めにキャッシュする形でもいいのではないかと思った。

pofu_chanpofu_chan

middlewareを使う場合とかも実行時間はここにカウントされる?
STG環境のベーシック認証など

pofu_chanpofu_chan

ISRに紐づく話で next/link で遷移をつないでいる場合。
prefetchオプションは気をつけたほうがいい

一覧ページで表示領域内に10個など記事リンクが写り込んでしまうと、誰もアクセスしないような記事などもまとめてprefetchによってISRが実行され容量を食うことになる。

revalidateの感覚を短めに設定している場合などは、これがなおさら怖い

pofu_chanpofu_chan

画像最適化

Next.jsにある next/image を用いた画像最適化(webp画像生成とかいろいろ)の恩恵を受ける際にかかる制限。

月5,000枚とあるがビルドのたびに更新されるので、かなり多くnext/imageを使用してたりするとあっという間に容量を食いつぶしそう。

多少めんどくさかったが自前でwebpとpng画像を用意し、
pictureタグを使った最適化コンポーネントを作って対応している。

なので今の所この部分での従量課金が発生する可能性は無い。はず

pofu_chanpofu_chan

セキュリティ

エンドユーザーがアクセスするURLとしては 〇〇.comみたいなトップレベルドメインへのアクセスではなく、www.〇〇.com のようにwww(サブドメイン)にアクセスされるように設定中である。

wwwを設定する場合、AレコードではなくCNAMEレコードで設定することをVercelは推奨している。
参考箇所: https://vercel.com/docs/concepts/projects/custom-domains#redirecting-www-domains

料金に関してだと、DDos攻撃によるトラフィックの大幅増加などが怖すぎるのでこの設定はしておいたほうがよいと思った。
そして何よりも攻撃される事自体嫌なので。。

pofu_chanpofu_chan

LPなどを置きたいと言われた場合に、
外部ベンダーさんが作ったものをそのまま置くみたいなケースだと、画像いっぱいretina対応しまくり、srcSetを使っていないなどで1PVあたり20MBみたいなとんでもトラフィックになってしまうことがある。

そういったものを置くのは別ドメインを切ってレンタルサーバーなり、S3 + cloudfrontに置いたほうが比較的料金は抑えられて安全になると思った。

1PVあたり20MBのページに、月間40万PVとかくるとVercelの場合それだけで60万くらいの請求金額になるので。。。(怖い

videoタグでソース内部にある動画を配信するとかも基本的には避けるべきと思ってる。

pofu_chanpofu_chan

まだまだこの観点抜けてるとか、こうしたらどうとかあればコメントがほしいです。