Cloudflare Pages

引用：

Pagesを使用すると、信頼できるフルスタックアプリケーションをわずかな時間で構築、デプロイ、配信できます。最低限の設定で、開発者、デザイナー、製品がコラボし、デプロイできます。

あんまりピンとこないですが、私は静的サイトを非常にシームレスに開発・デプロイを行える便利なやつというイメージでいます。

LP開発で便利

みなさんは社内やクライアントからLPを作ってほしいと言われたらどのように開発しますか？

ローカルでHTMLやJavaScriptを書いている人もいれば、前回の記事で使用したHonoXやAstroなど、SSGができるフレームワークを使って生HTMLやJavaScriptを出力している人もいるかなと思います。

開発が終わった後の成果物はどのように本番環境に載せますか？
レガシーなやり方ではレンタルサーバを借りてFTPでアップロードしたり、zipにしてファイル共有サービスで納品したりしている方もいれば、CI/CDパイプラインを構築して自動で本番リリースなど作り込んでいる人もいるでしょう。

ローカル開発や本番リリースは一旦置いておいて、途中経過を社内やクライアントに見せる時はどうしていますか？
シチュエーションとしては結構あるかなと思いますが、出力したファイルをレンタルサーバの確認用フォルダにアップロードしてURLを渡したり、ngrokのようなトンネリングサービスを使ってそのURLを渡したりなどありますが結構面倒ですよね。
前者はシンプルにアップロード作業が面倒、後者はPCがオンラインでないと見られないなどありますね。

私は上記の2つとも過去にやったことがありますが、面倒が故に確認を少なくして手戻りが発生などありました。。

そこで便利なのがCloudflare PagesのプレビューURLです。

GitHub上でプルリクエストを作成すると下記のようにそのブランチのコミット時点での内容で実際に見られるURLを出力してくれます。

これを社内やクライアントにそのまま送れば見てもらえば良いのでめちゃくちゃ便利。

面倒なアップロード作業もGitHubと繋がっているのでpushするだけですし、開発PCをオンラインにしておく必要もありません。

やり方はCloudflare Pagesで新規プロジェクトを立ち上げてGitHubのリポジトリと連携させるだけなので省略しますが、めちゃくちゃ簡単です。

でも、お高いんでしょう？

ここまでめちゃくちゃ便利なのですが、小規模なアクセス数だったらフリープランで十分戦えます。（というかフリーランス時代のプロジェクトではそれで十分でした）

レンタルサーバならランニングコストがかかりますがCloudflareならタダです。
ランニングコストは顧客負担だったとしてもタダのほうがありがたいですね。

そもそもCloudflareはCDN屋なので万が一のスパイクアクセスも余裕で捌いてくれますしほとんど言う事無しです。

課金すれば画像最適化をしてくれるCloudflare Imagesや詳細なアナリティクス機能なども使えるのでもっと便利です。

デメリットを上げるとすれば初学者からは少々敷居が高いくらいでしょうか。
ただ、得られる恩恵が非常に大きいので多少勉強してでもやれるようになった方が絶対良いと私は思います。

※Cloudflareの回し者ではありません

おわりに

ちょっと短いですがCloudflare Pagesは便利だぞという記事でした。

開発体験爆上がりなので社内やフリーランス案件で似たようなことをやっている方は触ってみると良いです。

Oh my teethでは当たり前のように使われています。今後も便利なサービスが出てきたら積極的に取り入れていきたいですね。

Oh my teethについて

Oh my teethでは未来の歯科体験を創るために日々活動しています。

Techチームではより良いユーザー体験を提供するべく、Webフロントエンドからバックエンド、スマホアプリに機械学習モデルなど、さまざまなプロダクトを開発しています。

一緒に未来の歯科体験を創りませんか？興味がある方は是非こちらを確認してください。

カジュアル面談も可能なので気軽に応募してみてください！