Cloudflare Pagesを使って自作ブログをホスティングしてみたら良かったので紹介する

2022年7月19日 15:37

こんにちは！株式会社マクアケでエンジニアをやっている @Jerome_1010です。フロントエンド領域を組織横断的に扱うFrontend Working Groupと、実行者やキュレーターのためのシステム開発を行うOperation Engineeringチームに所属しています。

これまで公式アカウント的な投稿が多かった本noteですが、よりtech blogらしい投稿を展開していこうということで、今回は自分が自作ブログをCloudflare Pagesでホスティングしてみて良かった点などを書いていこうと思います。

この記事を読んでわかること

Cloudflare Pagesとは、Cloudflare社が提供するJAMstackプラットフォームで、容易にホスティングできる手軽さとCloudflareのCDNエッジ上にコンテンツが配置されることによる高性能さを兼ね備えています。

今回の構成図はこんな形です。

githubへのpushとGraphCMSでのpublishをきっかけにCloudflare Pagesでビルド・デプロイするような構成になっています。普通のJAMstackですね。

あくまでも個人ブログなのでCMSを採用するまでもないかなと思ったんですが、モノは試しということで今回使ってみることにしました。

詳しい使い方は公式ドキュメントをご覧いただくとして、使ってみて良かったところを紹介していきます。

github(or gitlab)と連携し、ビルドコマンドとパスを設定するだけですぐに使えるという点がかなり魅力的でした。

たったこれだけの設定で済み、あとはgithubにpushするだけでビルドされるのは便利すぎて感動しました。

CMSとの連携も簡単で、Settings > Build & deployments > Depoy hooksからhookを追加し、あとは生成されたhooksをCMS側で登録すれば、CMSの記事公開などからビルドを発火させることができました。

今回は一人で開発しましたが、コラボレーションのための機能が揃っているのも非常に魅力的でした。

デフォルトブランチ以外のブランチにpushすると<hash>.<project-name>.pages.devでプレビュー用のurlが生成され、開発中のものを他のメンバーに共有できます。

また、Cloudflare Accessによるアクセス制限も利用可能なので、プレビュー用のページは特定のメンバーのみ閲覧できるようにするなどといったことも可能です。

個人ブログはもちろん、小規模なプロジェクトであれば無料枠で賄えてしまうほど安いのがとても惹かれました。

Freeプランでも月に500回までビルドできるという十分すぎるビルド回数に加えて、Freeにも関わらずbandwidthが無制限(!!)というのは圧倒的だと思います。

その他良かった点以外に気づいたことをまとめておきます。

環境変数は設定できる一方で、secretを保存する機能が無いのが少し気になりました。
- Workerの方にはそうした機能があるとのことなのでPagesにも早く来ないかなと待ち遠しいですね
ビルドに少し時間がかかる点が気になりました。
- この点も今後改善されるようなので楽しみですね！https://blog.cloudflare.com/cloudflare-pages-build-improvements/

nodeのバージョンを指定する場合、環境変数にNODE_VERSIONを作りバージョンを指定するよう公式ドキュメントに記載がありますが、自分は.node-versionでバージョンを指定するのをオススメしたいと思います。
- ドキュメントには記述がないですが、ちゃんと読み込んでビルド時に反映してくれました。
- こちらの方がコード上で管理できて良いかなと思います(自分はnodenvを使っているので特に)。

ここまで使ってみたところ、自分としては

といった場合に特にCloudflare Pagesが刺さるのかなと感じました。理由としては以下のとおりです。

(Freeの場合)月間500ビルドまでであること
- 開発人数が増えるとビルド回数も増えるためキツくなりそう
(Freeの場合)ビルドのラインが1つなので混雑するかも
secretを扱いづらいのでセキュリティ的に不安が残りそう
25MiBのコンテンツサイズ制限があるため、コンテンツが無限に増えるとキツい
- SSGの場合必然的にビルド時間も長くなる
- 画像や動画が重たい場合は別のCDNなどにアップしておくことで回避できるかも
有料プランと言えど月間$20、$200なのでインフラコストを考えると破格
- 機能的にこれで十分なら寄せる価値は十分アリ

どのサービスにも言えることかもしれませんが、適したシチュエーションではかなりパワフルなので使い所を狙っていけると良いかなと思いました。

というわけで簡単ではありますがCloudflare Pagesを使ってみた記事でした。これをきっかけにCloudflareに興味を持ったりJAMstackを始める方がいたら嬉しいなと思います！🙌
自分も次はWorkerやR2などCloudflareの関連サービスを触っていきたいです！

また、マクアケでは一緒に働くエンジニアを募集しています！もし興味を持ってくれた方がいたら

ウチのチームリーダーとのカジュアル面談や👇

求人一覧や👇👇

イベント記事など👇👇👇

色々あるので是非覗いてみてください！ありがとうございました！🙏

この記事が気に入ったらサポートをしてみませんか？