新規投稿のお知らせを受信されたい方は、サブスクリプションをご登録ください:

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

2022-11-17

5分で読了
この投稿はEnglish繁體中文FrançaisDeutschPortuguêsEspañol简体中文でも表示されます。

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

Spice up static sites on Cloudflare Pages with Page Functions

その数か月後、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が本番運用を開始するにあたり、今回のリリースで改良・追加されたエキサイティングな機能のいくつかをご紹介します。

エクスペリエンス

Gitを使ったデプロイ

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

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

Functionを直接アップロード

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

Functionのデバッグ

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

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

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

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

wrangler pages deployment tail

Functions指標をリアルタイムで取得

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

Cloudflareエコシステムとの迅速な統合

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

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

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

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

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

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

サードパーティサービスとの統合

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

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

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

お気に入りのフルスタックフレームワークを使用

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

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

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

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

RemixSvelteKitQwikCitySolidStartAstroNuxtなどの多くの公式にサポートされているフレームワークと組み合わせることで、サーバーサイドレンダリング(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の下)でぜひお知らせください。ビルドをお楽しみください!

Cloudflareは企業ネットワーク全体を保護し、お客様がインターネット規模のアプリケーションを効率的に構築し、あらゆるWebサイトやインターネットアプリケーションを高速化し、DDoS攻撃を退けハッカーの侵入を防ぎゼロトラスト導入を推進できるようお手伝いしています。

ご使用のデバイスから1.1.1.1 にアクセスし、インターネットを高速化し安全性を高めるCloudflareの無料アプリをご利用ください。

より良いインターネットの構築支援という当社の使命について、詳しくはこちらをご覧ください。新たなキャリアの方向性を模索中の方は、当社の求人情報をご覧ください。
Developer WeekCloudflare PagesCloudflare WorkersServerlessFull StackJAMstackDeveloper Platform開発者

Xでフォロー

Nevi Shah|@nevikashah
Cloudflare|@cloudflare

関連ブログ投稿

2024年10月09日 13:00

Improving platform resilience at Cloudflare through automation

We realized that we need a way to automatically heal our platform from an operations perspective, and designed and built a workflow orchestration platform to provide these self-healing capabilities across our global network. We explore how this has helped us to reduce the impact on our customers due to operational issues, and the rich variety of similar problems it has empowered us to solve....

2024年9月27日 13:00

Our container platform is in production. It has GPUs. Here’s an early look

We’ve been working on something new — a platform for running containers across Cloudflare’s network. We already use it in production, for AI inference and more. Today we want to share an early look at how it’s built, why we built it, and how we use it ourselves. ...