フロントエンドクラウドデプロイメント：国際的な主要クラウドプラットフォームの体験共有と指標評価

開発者が優れた無料ウェブサイトデプロイサービスを選び出すために、本記事では体験と数値に基づいて、世界中の主要なモダンなフロントエンドデプロイメントプラットフォームを全面的にテストします。

体験対象には、Vercel、Cloudflare Pages、GitHub Pages、そして新たに発見したEdgeOne Pagesが含まれます。測定指標には、世界各地のアクセス遅延、Google Lighthouse 測定指標、および体験中のデプロイのスムーズさが含まれます。

なお、AWS PagesやNetlifyも注目されていますが、登録や認証プロセスが若干複雑で（クレジットカードの紐付けや不正防止認証が必要）、今回の体験対象には含まれていません。

今回の体験共有を通じて、有益な参考情報を提供し、最適な無料ウェブサイトデプロイサービスを選び出す助けになれば幸いです。

Pages ウェブサイトデプロイメントとは、特定のプラットフォームを通じて静的ウェブサイトや静的コンテンツをインターネット上に公開し、アクセス可能にすることを指します。現在のプラットフォームの多くは、Serverlessデプロイメントに基づく動的ウェブサイトの開発をサポートしています。

体験対象の設定

静的ウェブサイトは広範な用途があり、ブログ、会社のホームページ、ドキュメント、および展示ページなどが含まれます。今回の体験対象は、Reactフレームワークに基づいて構築された写真展示サイトです。

このウェブサイトの静的リソースの合計サイズは約110MBで、create-react-appツールを使用して生成されており、典型的な展示型サイトです。

以下はデプロイ成功後のリンクです。具体的な体験結果を見る前に、各サイトのロード速度とコンテンツのレンダリング速度を直感的に体験できます:

プラットフォーム	デプロイ先アドレス
Vercel	https://testvc.wenyiqing.tech/
Cloudflare	https://testcf.wenyiqing.tech/
Github	https://testgh.wenyiqing.tech/
EdgeOne	https://testeo.wenyiqing.tech/

プラットフォームの特徴とデプロイ体験

Vercel

デプロイ成功のウェブサイト、こちらをクリックして体験。

シンプルなウェブサイトデザイン、スムーズなデプロイプロセスで、登録からデプロイ成功までわずか5分です。

体験の結論

Vercelは効率的、迅速、簡単な開発とデプロイの体験を提供することに特化しており、全体のデプロイ体験はCloudflareよりも優れています。欠点としては、無料プランのリソースが少ない点があります。

利点

1. シンプルでスムーズなページ: Vercelのウェブページ体験は非常に良く、データ表示も清潔で整理されています。

2. Serverless関数のサポート: Serverless関数をサポートし、フロントエンドプロジェクトにバックエンドロジックを簡単に追加できます。

欠点

1. リソース制限: 無料プランではソースファイルサイズが100MBに制限されており、静的リソースが多いウェブサイトには適さず、追加のリソースストレージサービスの購入が必要です。

2. ビルド回数の制限: 無料バージョンでは1日に最大100回のデプロイが許可されており、さまざまな制限があります。通常のユーザーは上限に達しやすいです。

Cloudflare Pages

デプロイ成功のウェブサイト、こちらをクリックして体験。

Cloudflareを使用したウェブサイトのデプロイはスムーズで、ステップが明確に示されており、公式ブログには充実したチュートリアルとガイドが掲載されています。さらに、Cloudflareは高要求のユーザーのニーズを満たす豊富な有料拡張機能も提供しています。

CloudflareはすでにPagesとWorkersのアーキテクチャを統合しており、開発者がさらに多くの動的機能を追加する必要があるときにシームレスな移行を実現できます。

Cloudflare Workersは、複雑なロジックを実行する軽量なコードを開発者が記述およびデプロイできるサーバーレスコンピューティングプラットフォームです。従来のバックエンドサーバーに依存する必要はありません。

体験の結論

Cloudflare Pagesは明らかな利点があり、業界のリーダーとしての地位を占めています。しかし、中国およびアジアの一部地域ではアクセス遅延が特に高く、無料プランのリソース制限が厳しく、プラットフォームの重点は有料ユーザーに向けられています。

利点

1. 充実したCDN: Cloudflareは強力なCDNを持ち、デプロイされたウェブサイトが世界中で非常に速くアクセスできるようにしています。

2. 詳細なチュートリアル: 公式ウェブサイトには非常に詳細なチュートリアルがあり、テキストやアニメーションも含まれており、初心者にとって非常にフレンドリーです。

3. 便利な拡張と統合: 有料機能には、マルチユーザーコラボレーションや効率的な並行性が含まれており、開発者がWorkersにシームレスに移行できるようにサポートしています。主要なCMSには豊富なプラグインがあり、自動デプロイメントプロセスを強化します。

欠点

1. アジア地域で高遅延: Cloudflareは中国および周辺地域でのアクセス遅延が非常に高く、テストでは中国地域のリクエストがアメリカに戻ることが示されています。

2. 制限された無料プラン: 無料バージョンでは並行ビルド（マルチユーザーコラボレーション開発をサポートしていない）がサポートされておらず、月間500回のみのビルド機会があります。

3. 高価な有料プラン: 有料プランは3つの段階に分かれており：0 -> $ 20 -> $ 200 -> ∞、大半の特長的な機能は有料プランにのみ提供されています。

Github Pages

デプロイ成功のウェブサイト、こちらをクリックして体験。

GitHub PagesはGitHubプラットフォームに基づいており、完全に無料であるという位置付けと膨大なユーザーベースのおかげで、多くの開発者がGitHub Pagesを使用してウェブサイトをデプロイしています。

体験の結論

知名度が非常に高いため、GitHub Pagesはフロントエンドの初心者がデプロイの学習に選ぶ第一候補となります。活発なコミュニティも様々な問題解決に役立ちます。

しかし、拡張性や自動化の面では、GitHub Pagesは商用プラットフォームに遅れを取っており、安定性も疑問視されています。

利点

1. 完全無料: 支払いプランのために移行を強制される心配がありません。

2. 活発なコミュニティ: アクティブなコミュニティがあり、多くの専門家がおり、問題を迅速に解決できます。

欠点

1. 不安定: GitHub Pagesのアクセスは不安定で、時折接続が切れたりアクセスが遅くなったりします。テスト中にルート追跡パスも理想的ではありませんでした。

2. プリセットビルドスクリプトの欠如: GitHub Pagesは、フロントエンドフレームワークのパッケージングとビルドのワークフローをプリセットしていないため、デプロイワークフローを手動で記述する必要があり、初心者にはハードルが高いです。

3. 制限されたリソース: 商用または共同開発では、GitHub Pagesのリソース制限がニーズを満たせない可能性があります。ストレージの限度は1GBで、1時間あたり最大10回のビルドデプロイが多くのアプリケーションシナリオを制限します。

EdgeOne Pages

デプロイ成功のウェブサイト、こちらをクリックして体験。

EdgeOne Pagesは中国のTencent Cloud EdgeOneが新たに提供するウェブサイトデプロイメントサービスであり、現在はBeta版完全無料で、グローバルアクセラレーション版のプレフィックス付きの.siteドメイン名を提供し、現在の全てのプラットフォームが中国で一般的にパフォーマンスが悪いという問題を解決しています。

体験の結論

EdgeOne Pagesは国際的な大手と比較すると少し劣りますが、プラットフォームは豊富な無料リソースを開発者に提供しており、もうすぐServerlessをサポートする予定です。将来的には有料プランが導入される予定ですが期待が持てます。

利点

1. 無料で制限が少ない: 現在プラットフォームはほとんど制限がなく、有料機能も必要なく、クレジットカードの紐付けも不要です。公式の説明によると、商用版がリリースされた後、無料プランには制限が増える可能性があります。

2. 安定した並行ビルド：EdgeOne Pagesは並行ビルドの面で卓越したパフォーマンスを見せています。並行ビルドがビルド失敗につながりやすいことを考慮すると、大部分のプラットフォームはこれに対して厳格な制限を設けています。

欠点

1. シンプルな機能: 現在のプラットフォーム全体の機能はまだかなりシンプルで、提供されるフロントエンドテンプレートも限られており、急速に進化しているようです。

2. 一部地域での高遅延：EdgeOne Pagesがデプロイしたウェブサイトは、ほとんどの海外地域で好成績を収めていますが、一部地域でのアクセス遅延は高いです。詳しくは本文で詳述します。

利点と欠点のまとめ

以上に示したのはプラットフォームの特有の利点です。カスタムドメインのサポートやSSLサービスの提供などの共通の利点については詳述しません。本体験中に発見されなかった利点が他にもある可能性があるので、ぜひコメントで補完してください。

CloudflareやVercelなどの成熟したプラットフォームでは、ビジネスレベルの欠点はほとんどなく、主に無料プランのリソースサポートに集中しています。

リソース制限の面で、開発者のニーズは異なるため、上限到達の状況も異なります。そのため、リソース制限が厳しいかどうかは実際の状況に応じて判断する必要があります。本記事の内容はあくまで参考であり、すべての利用シナリオをカバーすることはできません。

ウェブサイトデプロイの指標測定

測定指標には三つのカテゴリがあります：

1. 世界各地のアクセス遅延：このテストはデプロイされた静的ウェブサイトの世界中のクライアントからのアクセス遅延を測定し、各プラットフォームのCDN構築レベルを評価することを目的としています。

2. Google Lighthouse測定指標：Google Lighthouseは、ウェブページのパフォーマンス、アクセシビリティなどを評価するためのツールです。今回の測定指標には、最初のコンテンツ描画 (FCP)、最大コンテンツ描画 (LCP)、合計ブロッキング時間 (TBT)、および累積レイアウトシフト (CLS)などが含まれます。これらの指標は、ページロードプロセス中の実際のユーザー体験を反映できます。

世界各地のアクセス遅延測定

世界各地のアクセス遅延はプラットフォームのプレフィックス付きドメインに基づいて測定されます。プラットフォームがカスタムドメインを最適化している場合、測定結果は実際の状況と異なる可能性があります。

世界中の遅延測定には、バイアスを防ぐために複数のツールを使用しました。以下の画像では、測定ツールとしてCDNPerfを使用しています。

Vercel

Vercelのパフォーマンスは非常に良好で、ごく少数の地域を除いて、ほとんどの地域でスムーズにアクセスできます。

Cloudflare Pages

Cloudflareのテスト結果は非常に優秀で、多くのノードで高遅延が全く見られません。詳細なテストのために測定ノードを増やし、アジア地域の高遅延地域がいくつか見受けられます。

Github Pages

GitHub Pagesは全体的に満足できるパフォーマンスを示しており、中国とアジア太平洋地域のノードではアクセスが不安定な場合があります。

EdgeOne Pages

EdgeOne Pagesはほとんどの海外地域で十分なパフォーマンスを示していますが、一部地域では遅延が高いです。現在のグローバルノード数が少ないため、中国地域でのテストに明らかな利点があります。

Google Lighthouse実使用体験の測定

ウェブページのパフォーマンスを評価するために、Google Lighthouseを使用して以下の主要な指標を測定します：CLS、LCP、FCP、TBTなど。詳細な指標の説明についてはGoogle公式ドキュメントをご参照ください。

Lighthouseの単一測定では変動が大きいため、偶然の誤差を減らすために個々のサイトについて10回のテストを行い、最後に単一測定結果の平均を計算しました。

以下は測定結果です：

	Vercel	Cloudflare	GitHub	EdgeOne
CLS（ms）	0.47	0.75	0.33	0.55
LCP（s）	2.08	1.06	2.56	5.28
FCP（ms）	489.38	725.79	338.17	397.42
TBT（ms）	201.55	49.3	47.33	56.92
Speed Index（s）	2.84	2.55	3.16	1.86
Performance Score	55	62	56	51

異なるタイプのウェブサイトにおけるGoogle Lighthouseの指標テスト結果は大きく異なるため、今回の共有結果は参考用です。

総括

全体的に見て、Cloudflare と Vercel のような大手プラットフォームは多様なソリューション、拡張機能の強さ、およびスムーズなデプロイプロセスを提供しています。

GitHub Pages は、カスタムドメインの不可、アクセス不安定、SSLサポートの欠如といったオンラインの声が高かった問題を解決しました。今後、さらなる自動化が進むと思われます。

EdgeOne Pages は驚きをもたらしました。大手プラットフォームと比較してユーザーのデプロイ体験の差があまりなく、各種指標テストでも良好な結果を示し、無料リソースの面で最も寛大なサポートを提供しています。

今回の共有では無料プランに関する内容を網羅しており、ユーザーが初期段階で優れたデプロイリソースを見つける手助けを目的としています。有料プランについては複雑であり、それぞれのプラットフォームが異なる計画、リソース配分、技術サポートなどを提供しているため、さらに深くは立ち入りません。

開発者の実際の状況に応じて、以下の推奨を行いました：

1. 予算が限られている：EdgeOneをお勧めします。理由は非常に寛大な無料リソースを提供しているためです。
2. 技術要件が高い：VercelとCloudflareをお勧めします。特にCloudflareは予算に余裕がある開発者に適しています。
3. フロントエンドデプロイの初心者：GitHub Pagesをお勧めします。活発なコミュニティリソースがあるためです。

これは各プラットフォーム無料プランのリソース使用状況をまとめた対照表です。

	Vercel	Cloudflare	GitHub	EdgeOne
カスタムドメイン	✅️	✅️	✅️	✅️
SSL 対応	✅️	✅️	✅️	✅️
リクエスト数無制限	✅️	✅️	✅️	✅️
内部ドメインの登録	不可	✅️	不可	✅️
ビルド回数	100回/日	500回/月	10回/時	無制限
同時ビルド	1	1	10	無制限
帯域幅	100GB/月	無制限	100GB/月	無制限
デプロイ可能サイト数	100	100	無制限	20

以上の「無制限」とは、本体験中に上限に達しておらず、かつ公式サイトで制限の記述が見当たらなかったことを意味します。