月間500万PV＆転送量80TBのサイトをたった4万円で維持する方法

月間ページビュー(PV)が500万PVあり、データ転送量も80TBあるという人気ウェブサイトを400ドル(約4万6000円)以下で維持する方法を、3Dのアセットライブラリを一般公開しているPoly Havenがまとめています。

How we handle 80TB and 5M page views a month for under $400 – Poly Haven Blog
https://blog.polyhaven.com/how-we-handle-80tb-and-5m-page-views-a-month-for-under-400/

ウェブサイト運営のポイントの1つは「資金リソースをどう管理するか」です。資金があればAmazon S3のようなクラウドプラットフォームを利用するのが簡単ですが、データ転送量が月間80TBもあるPoly HavenのようなウェブサイトでAmazon S3を利用すると、月額約4000ドル(約46万円)もの費用がかかります。

Poly Havenは基本的にPatreonで募った寄付をベースに運営されており、Amazon S3を利用すると、毎月集まる4000ドルほどの寄付がすべてサーバー代に消え、他に資金を回すことができなくなってしまいます。

そこでPoly Havenが頼っているのが「Cloudflare」です。Poly HavenはCloudflareを「大規模なキャッシングレイヤー」と呼んでいます。実際にどういうことかというと、例えばロンドン在住のPoly Havenユーザーが同サイトからデジタルアセットをダウンロードした場合、データファイルはオリジンサーバーからフェッチされ、Cloudflareのエッジノードを経由してルーティングされます。その後、別のロンドン在住のユーザーが同じデータファイルをダウンロードした場合、Cloudflareはこのデータをキャッシュしているため、オリジンサーバーにアクセスすることなくユーザーにデータファイルを転送することが可能となるわけです。

Cloudflareユーザーはデータのキャッシュ期間を設定できるため、めったにユーザーがアクセスしないコンテンツは可能な限り長いキャッシュ期間を設定し、頻繁に内容が更新されるコンテンツは短いキャッシュ期間を設定して最新のデータが正しくユーザーに届くようにする、などが可能。

Poly Havenの場合、Cloudflareのデータキャッシュをうまく利用することで、ユーザーのダウンロードトラフィックの85％(オレンジ線)をCloudflareのキャッシュでまかなうことに成功しているそうです。

Poly Havenではユーザーがダウンロードするデータファイルだけでなく、ウェブサイトのすべての要素(スタイルシート、JavaScript、JSONデータなど)もキャッシュしているとのこと。このキャッシュはダウンロードファイルのキャッシュよりも効率的で、Poly Havenではトラフィック(アセット関連を除く)の約93％をキャッシュでまかなうことに成功しています。

ウェブサイトの大部分をキャッシュでまかなうことで、オリジンサーバーの稼働率を下げることが可能になり、ウェブサイトの維持費を安く抑えることができるとPoly Havenは主張。Cloudflareの場合、1つのドメインあたり20ドル(約2300円)の費用がかかり、Poly Havenはメインのウェブサイト「polyhaven.com」と、アセットダウンロード用の「polyhaven.org」の2つのドメインを利用しているため、「月間約40ドル(約4600円)」の費用が必要となるそうです。

Cloudflareを利用することで、Poly Havenの場合は月間トラフィックの約85％を処理することが可能ですが、残りの15％はオリジンサーバーで処理する必要があります。Poly Havenの場合、Cloudflareと提携しているBackblazeのクラウドストレージ「B2 Cloud Storage」を利用しているため、ダウンロードトラフィックの料金は一切請求されないそうです。そのため、B2 Cloud Storageの利用料はストレージ料金、アップロードコスト、一部のAPIリクエストコストの合計「月額約11ドル(約1300円)」で済んでいる模様。

ここまではユーザーがPoly Havenからアセットファイルをダウンロードするためのサーバーを維持するのにかかる費用について言及していますが、これとは別にリンクなどを表示するためのウェブサイトを運営するにも費用がかかります。メインウェブサイトである「polyhaven.com」はJavaScriptフレームワークであるNext.jsを使用して構築されています。Next.jsはVercelのアプリケーションであり、独自サーバーやクラウドプロバイダー上で利用することもできますが、Vercelのサービスを利用することでより手ごろな価格で簡単に利用することができるそうです。また、Vercelのサービスを利用するとサーバーレスでサイトの構築が可能になるとのこと。

Vercelのサービスの基本料金は「月額20ドル」で、使用量に応じて追加料金が必要になります。Poly Havenの場合、Cloudflareをキャッシングレイヤーとして活用していることから、基本料金以上を請求されることはないそうです。

さらに、Poly Havenはユーザーがどのアセットをダウンロードしたかなどの情報をまとめて保存するためのデータベースとして、GoogleのCloud Firestoreを利用しています。Poly Havenは「Cloud Firestoreは確かに最も安価なオプションではなく、「月額約100ドル(約1万2000円)」ほどかかります。これはウェブサイト運営費用の約半分を占めるものですが、それでも正しい選択だと理解しています」と記しました。

この他、Poly HavenはVercelの請求額を抑えるために、APIを実効するためのサーバーとしてVultr.com を利用しているそうです。APIはVercel上のフロントエンドウェブサイトをデータベースに接続するためのもので、「月額5ドル(約580円)」で済んでいるとのこと。

Poly HavenはデータベースとAPIのコストが比較的安く抑えられている理由として、「データ転送のキャッシュ率が93％」と非常に高い点を挙げています。そして、これを実現しているのがCloudflareの「Argo」です。Argoを用いることで「DNSルートを最適化して遅延を改善」し、「すべてのグローバルトラフィックが数百のエッジノードに分割される前に、少数の大規模なデータセンターを通過するようにルーティングする」ことが可能になるとのこと。これにより、具体的には「ロンドン在住のユーザーがPoly Havenのアセットをダウンロードした場合、Cloudflareがアセットをキャッシュし、西ヨーロッパ全域にキャッシュデータを転送できるようになる」そうです。

Argoの利用でデータ転送量のキャッシュ率が非常に高くなるそうで、Poly Havenの場合はArgoを使用しない場合は75％であったところ、Argoを利用することで93％まで高めることに成功しています。ただし、Argoのネットワークを通過するトラフィック1GBあたりいくらかの使用料を支払う必要があるとのこと。

Poly Havenのトラフィックのうち、Argoのネットワークを通過するトラフィックは以下の通り。

Poly Havenの場合、「.com」と「.org」の2つのドメインを利用していますが、「.com」ドメインではArgoを有効にし、80TBのデータ転送量が発生する「.org」ドメインではArgoを無効にしています。これにより、Argoの利用料を「月額約160ドル(約1万9000円)」程度に抑えることに成功しています。

また、Argoを利用することでレイテンシーの改善、APIサーバーの負荷軽減、Vercelの使用量の削減といったメリットが得られるとPoly Havenは説明しています。

そして最後の利用サービスが、ウェブサイトに表示されるすべての画像をホスティングするためのbunny.netです。bunny.netは画像を動的にサイズ変更・圧縮することができる最適化サービスも備えており、これによりページ読み込みの高速化というユーザーエクスペリエンスの向上と、ワークフローの効率化(1つのPNG画像をアップロードするだけで任意のサイズと形式の画像をサービスが出力してくれる)が可能になります。

Poly Havenの場合、月間データ転送量は4.36TBで、bunny.netの利用料は「月額約27ドル(約3100円)」程度になるそうです。