3章 デプロイサービスの無料枠を節約するには
この情報は2026年7月の開発時点でのものです。
最新の情報を確認した上で参考としてください。
さて、プログラミング知識０から完全無料でWebサービスを開発するための参考情報を書いてきましたが、今回が最終回となります。
議題はデプロイサービスの無料枠の節約方法です。無料枠でWebサービスをリリースする際に、最初のボトルネックとなりやすい部分ですね。
サービスごとに無料枠は違いますが、ここではVercelの無料枠について触れてみます。1ヶ月あたりの制限があります。（各項目の解説はChatGPTによるもの。なお、全項目ではなく主要なもののみ掲載。）
・Fast Data Transfer（100GB）
Vercelからユーザーへ送るデータ量。
・Edge Requests（100万）
VercelのEdgeネットワークで処理されるリクエスト数。
・Function Invocations（100万）
Serverless/Functionsを呼び出した回数。
・Fluid Active CPU（4時間）
Functionsが実際にCPUを使って処理した時間。
・Fluid Provisioned Memory（360 GB-hours）
Functionsに割り当てたメモリ量×実行時間。
テキスト中心のWebページであれば、Fast Data Transferはそれほど問題にはなりにくい部分です。画像や動画を使用したページを作る場合、ここがネックになる可能性もあるので、必要に応じて軽量化をしましょう。
問題になりやすいのは、Fast Data Transfer以外の項目です。それぞれの制限は1ヶ月（30日）単位なので、1日あたりの平均で考えると、
Edge Requests：3.3万
Function Invocations：3.3万
Fluid Active CPU：8分
Fluid Provisioned Memory：12 GB-hours
特にFluid Active CPUはネックになりやすいです。ひとつひとつの処理自体は高速で1秒もかからないとしても、1日平均8分=480秒と考えれば、例えばユーザーが500人になったとすると1人あたり1秒も使えないことになります。
流石に数百人規模まで成長した時点で有料プランへの乗り換えを検討した方が良いですが、処理が冗長で1人あたり平均10秒使う、ということになればユーザー数は48人程度で頭打ちになってしまいます。
これの対策は、そもそもの処理数を減らすことです。処理数を減らすということはEdge RequestsやFunction Invocationsの削減にも繋がるので、全体的な節約になります。
と言っても具体的にどうすればいいのか、完全初心者だと分からないと思うので、ここでは私が実際に使った節約方法をお教えします。
・リンクのprefetchをOFFにする（個人的最重要）
prefetchとは「先読み」のことで、ユーザーが次に開く可能性が高いWebページを、ブラウザが裏側で事前に読み込んでおく技術です。特に指定しない場合、全てのリンクはprefetchが有効になっています。
これが非常に厄介で、例えばヘッダーに各ページへのリンクを掲載している場合、ブラウザはその全てのリンク先をprefetchします。ユーザーが使うかどうかに関わらず、です。そしてリンク先のページが動的ページだった場合、リクエストが発生します。つまり、「1つのページを開いただけなのに複数ページ分のリクエストが発生する」という状況が発生します。
更に問題なのは、せっかくprefetchしたキャッシュがヒットせずキャッシュミスになる場合、またリクエストが発生することです。私の作成したWebページでは確認した範囲全てキャッシュミスになっていました。要は、
1つのページを開いただけで複数ページ分のリクエストが発生する。しかもそれがページ遷移のたびに毎回発生する。全部キャッシュミスなので、prefetchの恩恵は全く得られていない。
という悲惨な有様です。具体的には、1ページ開くたびにFunction Invocationsが50くらい増えてました。全リンクのprefetchをOFFにした結果、1ページごとに1,2回程度という劇的な削減に成功しました。
・プロキシの設定を見直す
プロキシを設定して、認証が必要なページに未ログインユーザーが移動するのを防止することが出来ます。ただし、プロキシはページ移動のたびに処理が発生するので、無駄な処理を入れていないかは慎重にチェックする必要があります。
例えば、ページ側でアクセスユーザーの情報を取得する場合。プロキシとページ側で2回ユーザー情報を取得するのは無駄です。この場合はページ側に認証チェックを入れてしまって、プロキシは認証チェックをしないようにするのが良いと思います。
認証不要なページでプロキシが処理をしている場合も、無駄なので処理を外してしまいましょう。
・独立した処理をPromise.allで並列化する
これはどのくらい効いてくるのか分かりませんが、ページの読み込み時間の改善に繋がる可能性があります。また、同時処理なのでFluid Active CPUの節約になる可能性があります（未検証）。
仮に0.1秒の短縮だとしても、100人ユーザーが操作すれば10秒の短縮です。
如何でしたでしょうか。参考になれば幸いです。
また、Netlifyを利用する場合は無料枠がVercelと異なりますが、処理の軽量化という意味では同じなので、ここに書いている節約方法は有効だと思います。
これにて、3回に渡る完全無料のWebサービスの開発講座は終わりとなります。
コーディングについては開発するサービスや個人の好みがあるので、AIと二人三脚で自分なりに作っていくのが良いと思います。知識が０だからと尻込みする必要はありません。自分が作りたいサービスを作ってみてください！
・結論
処理の発生そのものを削減することで、無料枠の節約に繋がる。特にprefetchは予想以上に処理を呼んでいる可能性があるので、枠が気になる場合は最優先で対応したい。
