Cloudflare Pagesのあなたのサイトを、一般提供されたPages Functionsでより充実させる

2021年4月にPagesをローンチする前、Cloudflareはこのサービスが何か魔法のようなもの、つまり「ちょうどいい」と感じられる体験の始まりになると考えていました。_開発者なら誰でも_数秒でウェブサイトを完成させ、Cloudflareエコシステムの他の部分を使用してさらに機能を追加できるような、シンプルかつ非常にスムーズな体験を思い描いていたのです。

その数か月後、2021年11月にPagesがフルスタックプラットフォームであることを発表すると、そのビジョンは現実のものとなりました。静的なサイト向けの開発プラットフォームを作成することがPagesの目標ではありませんでした。また、Cloudflare Workersはすでに私たちのエコシステムの一部であり、当社は未知の可能性に触れていることを認識していました。Pages Functionsの導入により、開発者はCloudflare Workersを使用して、どのような静的なサイトでも簡単に動的コンテンツを追加することができるようになったのです。

Functionsがオープンベータになってからの1年間、開発者がプロジェクトに求めるフルスタック機能を調査し、Functionsの体験を現在の形にするための微調整に着手しました。

Pages Functionsの一般提供を発表できることを嬉しく思います。

Pagesの文脈では「Functions」と呼ばれていますが、Cloudflareネットワーク上で動作するこれらの機能は、Cloudflare Workersを「偽装」したものです。PagesはWorkersのパワーとスケーラビリティを活用し、ユーザーが愛用しているPagesのエクスペリエンスに沿うように特化させました。

Functionsを使えば、ストレージソリューションとの統合、サードパーティサービスとの接続、お気に入りのフルスタックフレームワークによるサーバーサイドレンダリングなど、サイトに追加する動的機能の可能性を感じることができます。Pages Functionsが本番運用を開始するにあたり、今回のリリースで改良・追加されたエキサイティングな機能のいくつかをご紹介します。

コーディングがお好きなら、インフラストラクチャをCloudflareに任せて、コーディングに専念できます。

JavaScript/Typescript Functionを記述し、Gitプロバイダにコードをコミットしてfunctionsディレクトリにドロップするだけです。当社の高速CIシステムは、お客様のコードを構築し、お客様の静的アセットと一緒にデプロイします。

自分でビルドすることを好む場合でも、Pagesではまだサポートされていない特別なgitプロバイダーをお持ちの場合でも問題ありません。functionsフォルダにFunctionをドロップした後、お好みのCIツールでビルドし、Pagesにプロジェクトをアップロードしてデプロイできます。

ベータ版では、お客様とそのチームが、何よりも可視性を重視しているということが明らかになりました。Cloudflare Workersと同様に、リクエスト処理中の関数を監視するシンプルな方法を構築しています。問題をより早く検出できれば、より早く対処できます。

ログを「テーリング」することで、Functionのログを簡単に見ることができるようになりました。結果やリクエストIPなどの基本的な情報については、Pagesダッシュボードに移動して関連ログを取得することができます。

より具体的なフィルタリングを行うには

を使用することで、Functionが受け取る各リクエストのコンソールログと例外ログのライブフィードを受け取ることができます。

wrangler pages deployment tail

ダッシュボードでは、PagesがFunctionsのデータをリクエストの成功/エラー指標と呼び出しのステータスという形で集約します。指標ダッシュボードは、プロジェクト単位での使用状況を把握するだけでなく、成功/エラーのボリュームを把握することで、Functionsの健全性を把握することができます。

ストレージバインディング

真のフルスタックを目指したい場合、お客様のニーズとエコシステムに合ったストレージソリューションを見つけるのは簡単なことではありませんが、そうする必要はありません。

Functionsでは、Workers KV、Durable Objects、R2、D1、そして近日サポートが追加されるQueuesやWorkers Analytics Engineを含む幅広いストレージ製品を利用することができます。ネームスペース、バケット、データベースを作成し、Pagesダッシュボードでバインディングを追加するだけで、わずか数クリックでフルスタックサイトを立ち上げることができます。

コメントシステムの導入から、独自の認証システムの構築、データベースに支えられたeコマースサイトの作成まで、開発者向けプラットフォームで既存の製品と統合することで、お客様のサイトのユースケースを飛躍的に拡大することができます。

シークレットバインディング

ビルド時と実行時の両方で利用可能な環境変数の追加に加え、プロジェクトに「シークレット」を追加できるようになりました。これらは暗号化された環境変数で、どのダッシュボードインターフェースにも表示されないため、APIトークンやパスワードのような機密データ保管するための最適な場所となります。

Pagesの目標は、お客様が愛用するツールを、お客様の立場に立って常に提供することです。また、このベータ期間中に、一般的なサードパーティサービスと統合するためにFunctionsを使用する方法について、いくつかの一貫したパターンがあることに気づきました。Cloudflareの既製のコードスニペットであるPagesプラグインは、お客様のアプリケーションを中心としたお好みのエコシステムを構築するためのプラグアンドプレイ体験を提供します。

簡単に言えば、Pagesプラグインは再利用かつカスタマイズ可能なランタイムコードの塊であり、Pagesアプリケーションのどこにでも組み込むことができます。これは「構成可能」なPages Functionで、プラグインにFunctions（つまりWorkers）の全権限を与えるものであり、ミドルウェア、パラメータ化されたルート、静的アセットを設定する機能などが含まれます。

Pagesプラグインを使用すると、公式にサポートされているSentry、Honeycomb、Stytch、MailChannelsなどを含むサードパーティアプリケーションと統合できます。

開発者の立場に立って考えるという精神は、Javascriptのフレームワークという形でも表れています。広く採用されているフレームワークだけでなく、今後登場するフレームワークの大規模なサポーターとして、Cloudflareのチームは多くのフレームワーク作成者と協力し、新しい技術を試してすぐにPagesにデプロイできるような機会を創り出しています。

現在ではNext.js 13などに対応

最近、EdgeランタイムにオプトインするNext.jsアプリケーションのサポートについて発表しましたが、本日はNext.js 13に対応したことをお知らせします。Next.js 13は、ネストされたルーティング、React 18のサーバーコンポーネント、ストリーミングなど、最も要望の多かった最新のパラダイムをNext.jsフレームワークにもたらします。

フレームワークの好みが違っていても問題ありません。

Remix、SvelteKit、QwikCity、SolidStart、Astro、Nuxtなどの多くの公式にサポートされているフレームワークと組み合わせることで、サーバーサイドレンダリング（SSR）を活用して、Pagesでフルスタックを実現できます。PagesにおけるSSRのサポートに関するCloudflareのブログ記事では、これらのフレームワークを組み合わせて開始する方法について説明しています。

Pages FunctionsはWorkersにより提供されていますが、表面上はまったく同じではないことを認識しています。しかし、Workersを使用していてCloudflare Pagesを試してみたいという既存ユーザー向けに、すぐに始めていただけるダイレクトパスを用意しました。

すでにWorkerを1つ持っていて、Pagesで簡単にフルスタック化したい場合は、Pages Functionの「アドバンストモード」を使うことができます。ESモジュールWorker （_worker.jsと呼ばれます）をプロジェクトの出力ディレクトリに生成し、デプロイします。これは、フレームワークの作成者である場合や、ファイルベースのルーターに適合しない複雑なユースケースがある場合に特に役立ちます。

本日は、Functionsの一般提供を発表し、お客様のトラフィックを拡張できるようになったことを嬉しく思います。オープンベータ期間中は、この機能をお試しいただくために、1日あたり10万件という上限を無料リクエストに設けていました。現在も無料リクエストは1日10万件までですが、有料で無制限とすることができます。

Functionsはあくまで「特別」なWorkersですので、今回の発表により、Workers有料サブスクリプション、またはWorkers Enterprise契約において、Functionsの利用が料金に反映されるようになります。Workersと同様に、有料プランの場合は当社の2つの利用モデル（BundledとUnbound）を選択することができ、それに応じて課金されることになります。

Cloudflareが「インターネットへの贈り物」として位置づけるPagesでは、無料の静的アセットリクエストを無制限に取得でき、主に動的リクエストに対して課金されます。Functionsによる課金の仕組みについては、当社のドキュメントで詳しく説明しています。

使用を開始するには、Pages FunctionsドキュメントとCloudflareのブログ記事を参照していただき、初めてのフルスタックアプリケーションをデプロイするのに最適なフレームワークを決定してください。プロジェクトのビルドを開始したら、#functionsチャンネル（Cloudflare Developers DiscordのPagesの下）でぜひお知らせください。ビルドをお楽しみください！