はじめに
こんにちは！クリスマスが近づいてきましたね。
私、やしきんこと中屋敷は、クリスマスには季節限定の美味しいものを食べに行こうと思っています🌟
2025年のオルターブースアドベントカレンダー19日目の記事となります。
18日目は石田さんによる「情報セキュリティ監査に初めて挑んだお話し」でした！
私は毎月1本ブログ記事を書くことを目標にしています。去年の12月からブログを何本書けているかチェックしたところ、12本でした。日付を見たところ毎月1本はかけていなかったので、来年は毎月1本ずつコンスタントに書いていこうと思います🔥
今回は「Cloudflareに入門してみたい！」と思い、まずは身近なリソースを試してみました。
Cloudflareとは
Cloudflareは、Webサイトやアプリの速度と安全性を向上させるサービスです。代表的な機能は以下の通りです。
CDN（コンテンツ配信ネットワーク）：世界中に分散したCloudflareのエッジサーバーを利用して、サイトを高速表示します。
DNS：UIから簡単にレコードの追加・編集ができ、DNSSECやWHOISプライバシー保護などの機能でドメイン管理を容易にします。
Cloudflare Workers：コードをCloudflareのエッジで実行できるサーバレス環境を提供します。
Cloudflare Pages：GitHubやGitLabのリポジトリと連携し、静的サイトを簡単にホスティングできます。
今回はこの中から Cloudflare Pages を使って、購入したドメインでマイページをホスティングします。
Cloudflareを利用する
クラウドサービスを試すとき、私の鉄則は「一番手軽なものから始める」ことです。
例えば、AWSを利用する際は、ハッカソンでよく使っていた静的ページのホスティングサービスを探し、AWS Amplifyを利用しました。そこからEC2やS3など、他のリソースも試していく…という流れです。IoT開発が趣味でSORACOMを使い始めたときも、最初はHarvest Dataを利用し、そこからローコードツールのSORACOM Fluxを触っていました。
このように、普段よく使うクラウドサービスのリソースに置き換えやすいものから試すと、他のクラウドサービスも怖くありません。非常におすすめです🌟
というわけで、今回はイメージしやすく、手軽に試せそうなCloudflare Pagesから利用してみます。
Cloudflareでドメインを購入する
せっかくなのでCloudflareでドメインも購入して、カスタムドメインで公開します！
ドメインの管理ページからドメインの購入を行うことができます。
購入したいドメインを検索したところ、年間5ドル程度で購入できるドメインもあり、価格の安さに驚きました。
ドメインの購入手続きを行います。手続きは簡単で、個人情報を入力し、支払い方法や期間を選択するだけですぐに完了しました。
Cloudflareで購入したドメインは、標準で多様な設定をUIから簡単に操作できます。ドメインの管理のページから、以下のように構成を確認できます。
「DNSSEC」は、DNS応答の偽造や改ざんを防ぐための技術的な拡張機能です。デフォルトでは無効のため、利用したい場合はこちらの画面でアクティブにする必要があります。
「WHOISプライバシー」はWHOISレコードに表示される情報に対して、個人情報を保護します。
「WHOISプライバシー」の保護により、実際にwhoisコマンドを実行すると、保護が必要な情報についてDATA REDACTEDと表示されます。
Cloudflare Pagesを利用してマイページをホスティングする
次に、購入したマイドメインを利用してマイページをホスティングします。「Workers＆Pages」を開き、「アプリケーションを作成する」を選択します。
今回はClodflare WorkersではなくCloudflare Pagesをデプロイするので、下部の「Get Started」と記載されているメニューを選択します。
以下のようにファイルかGitリポジトリに連携する方法を選択できるため、「既存のGitリポジトリをインポートする」を選択します。
GitHubに接続から、自身のアカウントに連携します。
アカウントを選択すると、連携するリポジトリを選べるので、Cloudflare Pagesにデプロイしたいリポジトリを選択します。
選択した後、Cloudflare Pagesへデプロイするにはリポジトリからプルリクエストをマージする必要があるため、何か編集を加えてプルリクエストを作成し、マージします。
Cloudflare Pagesのページに遷移すると、以下のように連携したリポジトリを利用したCloudflare Pagesのセットアップ画面が表示されるため、「セットアップの開始」を選択します。
セットアップ時にフレームワークの選択ができるため、自身の利用したいフレームワークを選択し、「保存してデプロイする」を選択します。
セットアップ完了後、Cloudflare Pagesでのデプロイが開始します。
デプロイ完了後、カスタムドメインの設定画面が表示されるので、「カスタムドメインを追加する」を選択します。
先ほど購入したドメインを入力し、「続行」を選択します。
DNSレコードのCNAMEタイプを確認し、「ドメインをアクティブにする」を選択します。
アクティブにしたカスタムドメインにアクセスすると、Cloudflare Pagesにデプロイした内容が表示されることを確認できます。
Cloudflareを利用した感想
デプロイ設定で面白いと感じたのは、Azure Static Web Appsでは.github/workflowsのGitHub Actionsを使ってビルド・デプロイするのに対し、Cloudflare PagesではCloudflare側ででビルドが実行される点です。使用感はVercelに近いと感じました。
また、Cloudflareでドメインを購入するとDNS設定も簡単で、カスタムドメイン利用時の設定が非常にスムーズでした。通常は自身で設定が必要な部分もUI上で確認したり、設定を行うことができるため、初めてドメインを利用する人が仕組みを学ぶのにちょうど良いと感じました！
終わりに
今回はCloudflareで購入したドメインとCloudflare Pagesでマイページを作成しました。他にもさまざまなサービスがあるため、別のサービスを試した際は解説ブログを載せていきます👍
CloudflareはFreeプランから利用できますので、気になった方は是非お試しください🌟
サービス一覧 www.alterbooth.com cloudpointer.tech www.alterbooth.com
