Vercelでやらかす前に色々調べるスクラップ
pofu_chan個人的に一番怖いのは請求額。
プロプランで契約しているが、従量課金制のものは下記。
帯域幅： 1TB / 月
サーバーレス関数実行容量： 1000GB / 月
画像最適化： 5000枚 / 月
pofu_chanトップページでの1PVあたりのトラフィック量を700kb、
平均PVは160万PVだと仮定する。
帯域幅
1TBを超えると、$55 / 100GBの従量課金が発生する。（2022/2/6現在）
パターン１：平均PV160万/月の場合
月間トラフィック量： 700kb * 1,600,000PV = 1.04TB（1,068GB）
超過トラフィック量： 1,068GB - 1,024GB = 44GB
超過容量： 44GB / 100GB = 0.4
超過した44GB分の請求（ $55 / 100GB）がくるので、この場合の請求金額は約6,300円
パターン２： 広告などを打ち、300万PVだった場合
700kb + 300,0000PV =1.95TB（2,002GB）
2,002GB - 1024GB = 978GB
978GB / 100GB = 9.78
10 * 6300 = 約6,3000円
実際はユーザーキャッシュがあったりするのでこの通りの数字にはならないが、
160万ユーザーがトップページに来たらといった感じの大きめの見積もりとなる。
pofu_chanサーバーレス関数実行容量
主な実行箇所
・ISRでページを生成するとき
・Next.jsのAPIルートなどで関数を実行するとき
1000GB / 月の無料枠を超えると $55 / 100GB で従量課金が発生する
ISRのrevalidateを気をつけたりしないと行けない（1sに設定してしまうとかは避けたい）
自分の場合使い方があってるかはわからないが3600sに設定し、
CMSからのwebhookでビルド -> Vercelはデプロイメントが更新されるとCDNキャッシュをクリア という形で更新が反映されるようにはしてみている。
（これで使い方があってるかはわからないけどビルド時間は大幅軽減できてる + 更新も反映される）
これだったらrevalidateはSTG環境以外は 3600s * 24 （1日）みたいな感じでもっと長めにキャッシュする形でもいいのではないかと思った。
pofu_chan画像最適化
Next.jsにある next/image を用いた画像最適化（webp画像生成とかいろいろ）の恩恵を受ける際にかかる制限。
月5,000枚とあるがビルドのたびに更新されるので、かなり多くnext/imageを使用してたりするとあっという間に容量を食いつぶしそう。
多少めんどくさかったが自前でwebpとpng画像を用意し、
pictureタグを使った最適化コンポーネントを作って対応している。
なので今の所この部分での従量課金が発生する可能性は無い。はず
pofu_chanセキュリティ
エンドユーザーがアクセスするURLとしては 〇〇.comみたいなトップレベルドメインへのアクセスではなく、www.〇〇.com のようにwww（サブドメイン）にアクセスされるように設定中である。
wwwを設定する場合、AレコードではなくCNAMEレコードで設定することをVercelは推奨している。
参考箇所： https://vercel.com/docs/concepts/projects/custom-domains#redirecting-www-domains
料金に関してだと、DDos攻撃によるトラフィックの大幅増加などが怖すぎるのでこの設定はしておいたほうがよいと思った。
そして何よりも攻撃される事自体嫌なので。。
pofu_chanLPなどを置きたいと言われた場合に、
外部ベンダーさんが作ったものをそのまま置くみたいなケースだと、画像いっぱいretina対応しまくり、srcSetを使っていないなどで1PVあたり20MBみたいなとんでもトラフィックになってしまうことがある。
そういったものを置くのは別ドメインを切ってレンタルサーバーなり、S3 + cloudfrontに置いたほうが比較的料金は抑えられて安全になると思った。
1PVあたり20MBのページに、月間40万PVとかくるとVercelの場合それだけで60万くらいの請求金額になるので。。。（怖い
videoタグでソース内部にある動画を配信するとかも基本的には避けるべきと思ってる。
pofu_chanまだまだこの観点抜けてるとか、こうしたらどうとかあればコメントがほしいです。