今さらCloudFlare Pagesの手軽さに感動した話

1. CloudFlareとは

みなさん、こんにちは。パートナービジネス（AG-Boost）事業部でエンジニアの清水です。 今日はCloudFlareに興味があり使ってみたところAWSとの違いに感動したのでそのことについて書きます。 CloudFlareは、ウェブサイトをより速く、安全にするためのサービスを提供している企業です。 CDNというイメージがありますが、AWSの「S3」に対応する「R2」や「CloudFront」「Route53」「S3」全ての機能を持ったPagesなどWebサービスを運用するための機能全般的に揃っています。

国内の大手企業でWebエンジニアをスタートした人はAWSかGCPを使うという選択肢になりなかなかCloudFlareを使う機会がないんじゃないかと思いますが使ってみたら色々とCloudFlareでいいんじゃね？ってなるくらいCloudFlareにハマると思います。

1-a. CloudFlare Pagesとは

CloudFlare Pagesは静的サイトを簡単に公開できるプラットフォームです。 ただ静的サイトだけではなくGitHubと連携して自動的にビルドやデプロイを行ってくれるため動的サイトも簡単に公開できます。これで面倒なインフラ管理から解放されます。

2. CloudFlare Pagesを使ったGitHub管理しているソースコードの公開手順

それでは実際にCloudFlare Pagesを使って、GitHubにあるソースコードを公開する手順を見ていきましょう。

Githubのレポジトリ, CloudFlareアカウントは既に存在するとします。

  1. CloudFlare Pagesの設定 画面で「Worker&Pages」の「Pages」セクションへ。ここで「Create a project」をクリックします。

  2. Githubレポジトリとの連携 GitHubアカウントと連携させて、公開したいリポジトリを選びます。

  3. ビルド設定の確認 デフォルト設定では、npm run buildでビルドされます。 個人的にはビルドが付いていることには驚きました。 AWSだとGithub ActionsやCircleCIなどでS3に上げる前に設定しなければいけません。

    pages build

  4. デプロイの実行 設定が終わったら、自動的にビルドとデプロイが始まります。数分後には公開完了です。 公開されると仮のURLが付与されます。 例えばPagesのプロジェクト名をag-boostとかにすると https://123456.ag-boost.pages.dev のようなURLになります。

  5. ドメイン設定 Webサイト登録でドメインを登録します。 CloudFlare上で購入したドメインか他社で購入したドメインを選択できます。 このWebサイト登録でhttps化するかどうかを聞かれるので「はい」を選択します。 AWSでは割とめんどくさいhttps化ですがCloudFlareではただの「はい」「いいえ」の選択肢で実現できます。 Webサイト登録ができたらDNS設定で先ほどのPagesで発行されたURLをCNAMEで登録します。

数秒〜数分すると設定したドメインのURLがhttpsで公開されます。

3. AWSで公開する手順

次に、AWSを使った場合の手順を見てみましょう。 よくある手順なのでだいぶ割愛しています。

  1. S3バケットの作成 AWS管理コンソールでS3にアクセスし、新しいバケットを作成します。

  2. 静的ウェブサイトホスティングの有効化 作成したバケットで「静的ウェブサイトホスティング」を有効にします。

  3. ファイルのアップロード React.jsのビルドファイルをS3バケットにアップロードします。

  4. Github ActionsやCircleCIで自動デプロイ設定 npm run buildでビルドしたディストリビューションファイルをs3にアップロードする設定をします。 Github ActionsなどのconfigスクリプトやアップするためのAPIキーが必要です。

  5. CloudFrontディストリビューションの作成 S3バケットをオリジンとしてCloudFrontを設定します。

  6. Route 53でドメイン設定 カスタムドメインを使う場合は、Route 53でDNS設定を行います。

  7. HTTPS化設定 ACMで証明書を取得しCloudFrontのディストリビューションに貼り付ける

4. 両者の工数の違い

上記の手順を見るだけで非常に楽なことがわかります。 CloudFlareに付いて調べたとき「CloudFlareで5分でサイトを公開してみた」のようなタイトルで紹介しているブログが散見されましたが誇張ではなく5分でできますし、初めて触る人でも1時間もあればDNS設定までできると思います。

一方、AWSはS3バケットの設定から始まり、バケットポリシーの設定やCloudFrontディストリビューションの作成、HTTPS化など多くのステップが必要です。また、AWSの各サービスを理解していることも求められます。

5. まとめ

Webサービス構築で慣れているAWSやGCPを選択しがちですが、フロントだけでもCloudFlareを選択するのはありではないでしょうか。 あと、コストもAWSより安いです。