Cloudflare Pagesは、静的Webサイトをホストするためのクラウドホスティングサービスであり、Cloudflareのプラットフォーム上に構築されています。静的Webサイトとは、動的コンテンツを含まないWebサイトのことであり、HTML、CSS、JavaScript、画像、動画などの静的なファイルで構成されたものです。JAMstackと略されることの多い、JavascriptやApi、Markupのデプロイ先として意欲的な開発が行われています。GitHub、GitLab、Bitbucketなどのリポジトリを簡単にデプロイできます。
Cloudflare Pagesの利点には、高速で信頼性が高く、グローバルなネットワークを利用しているため、ユーザーにとって快適なWebサイト体験を提供することが挙げられます。また、無料プランがあり、初めてのユーザーや小規模なWebサイトの所有者にとって非常に使いやすくなっています。Cloudflareの無料枠設定は類似のサービスと比べて非常に大きく、近年非常に人気を集めているサービスです。
他にもDNSサービスを筆頭に、WorkersやKVなど、Cloudflare関連のサービスを利用されている方であれば、利用するハードルは非常に低く、設定も簡単なため便利です。サイト訪問者に近いエッジサーバーからコンテンツが配信されるため、レイテンシが低く、より表示スピードを高めることができるのも魅力でしょう。
独自ドメイン設定や、各種静的サイトジェネレーター系のビルド連携など、豊富な機能が揃っています。Analytics機能もあり、GoogleAnalyticsを導入しなくても、簡易的なアクセス解析を行うこともできます。大量のアクセスにも強い基盤の上に構築されているため、個人のサイトからサービスサイトまで、静的なサイトのホスティングとしては今後もシェアを拡大していくことが予想されます。
Cloudflare Pages公式サイトは以下をご参照ください。
» Cloudflare Pages公式サイト
Cloudflare Pagesを利用するためには、Cloudflareのアカウントを作成する必要があります。アカウント作成は無料で行うことができます。
GitHub、GitLab、BitbucketなどのGitリポジトリにアクセスし、Webサイトのリポジトリを作成します。すでに作成済の場合は必要ありません。
Cloudflareアカウントにログインし、「Pages」を選択して、新しいプロジェクトを作成します。プロジェクトの名前を入力し、使用するリポジトリを選択します。
ビルド設定を構成し、Webサイトをビルドするためのコマンドを指定します。また、必要に応じてビルド後のファイルを指定の場所にデプロイする設定を行います。
カスタムドメインを設定する場合は、ドメインの所有権を確認するためにTXTレコードを追加する必要があります。ドメインの設定が完了したら、Cloudflare Pagesから提供されるDNSサービスを使用して、カスタムドメインを設定します。
Cloudflare PagesにWebサイトをデプロイするには、リポジトリにコミットするだけでOKです。リポジトリに変更があった場合は、自動的にビルドが行われ、Webサイトが更新されます。
Cloudflare Cloudflare Pagesは自社内のサービスを色々なかたちで連携することで、色々なことが実現できてしまいます。また、Javascriptを駆使して外部のメールAPIやSMTPを使えば、メール送信することも可能です。ただ単純に、できるだけ手軽に問い合わせフォームを設置したい、という場合には、外部のフォームサービスを利用するのが圧倒的にお手軽です。
Cloudflare Pagesで作られたサイトにSSGformを利用してフォームを設置するのは非常に簡単です。以下の手順に沿って進めてみてください。
メールアドレスだけで登録できます。登録後、メールアドレス確認が完了すれば準備完了です。
好きな名前をつけてフォームを管理することができます。ここでは例えば「Cloudflare Pagesサンプルお問い合わせフォーム」と設定することにします。フォーム作成と同時に専用のURLが発行されますので、それをコピーします。
Cloudflare Pagesにデプロイするページのいずれかに、<form からはじまる、formをhtmlで記述してください。どういった項目をフォームに用意するか、また、どういったclass指定やcssで装飾を施すかは自由です。シンプルなフォームの場合、以下のようなhtmlが含まれたページを作成することになると思います。（※URLはサンプルなので、このままコピペしても動きません）
あとはCloudflare Pagesにデプロイするジェネレーターのローカルサーバーから、またはCloudflare Pagesにデプロイした後に実際のURLでテスト送信をして、問題なく通知メールが届けば完了です。シンプルな設置以外にも、reCAPTCHAを追加したり、ファイル送信フィールドも追加できますので、詳しくはコード例のサンプルをご覧ください。
「Cloudflare Pagesを採用したいけど、フォームがなぁ」と悩まれていたのであれば、SSGformを活用して、快適なCloudflare Pagesライフを送ってください！
