はじめに Morisawa Fonts というフォントサブスクリプションサービスで SRE を担当しています。 先日、Morisawa Fonts で Web フォントのサービス をリリースしました。これはモリサワのフォントを Web サイトで利用できるサービスです。 その中で、Web フォントを配信する機能の一部 を Cloudflare Workers を使って実現しました。以下は簡単な構成図です。 実行時間 Cloudflare Workers のダッシュボードでは、CPU 時間 と Wall 時間 の 2 種類の実行時間を確認できます。 Wall 時間 とは Worker の呼び出しの開始から終了までの合計時間です。 この Worker では、 CPU 時間は数 ms 程度に収まっていました。 一方で Wall 時間は次のグラフのようになっていました。グラフの色は各パーセンタイルご

日本時間の2024/04/05にCloudflareからRPCを使用したCloudflare Workers間の通信が発表されました。 これによりいくつかの課題が解決されると同時にCloudflare上にアプリケーションを構築する利便性が1段階どころか2段階以上上がったといっても過言ではないと思っています。 このRPCの対応によりService Bindingsが更に使い勝手がよくなったのでそれの紹介です。 出来上がりのコードはここにありますので、時間の無い方はこちらを参照ください。 前提条件 以前RemixとPrismaでD1に接続する記事を書きました。 その中で容量制限の問題があると書きましたが、それを解消する話をベースに今回のRPC対応の内容を書きます。ですので記事を読んでない方はCloudflare Workersの無料版はビルドファイルが1MBまでの制限があるということを念頭にお

はじめに Cloudflare WorkersにはBindings（バインディング）とよばれる仕組みがあります。バインディングを設定すると、オブジェクトストレージのR2やデータベースのD1など、Cloudflareが提供する別のサービスと連携できるようになります。 Service bindingsはバインディングの一種であり、Worker同士で通信するための仕組みです。無料プランと有料プランどちらでも利用できます。 通信はインターネットを経由せず、Cloudflareの閉じられたネットワーク内で完結します。そのため通常のfetch()関数の呼び出しと比較してレイテンシーは無視できるほど小さくなります。また、インターネットを経由しないため非公開のWorker同士で通信可能です。 Service bindingsがリリースされたのは2022年5月10日です。安定しているとは思いますが、将来的に

Cloudflare Worker + D1 + Hono + OpenAIでLINE Botを作るを見て、Cloudflare Workersに興味を持った。そこでLINEで英会話や添削ができるbotを作ってみた。 作ったもの こんな形で英会話をしたり、英作文テーマを作ってくれたり、添削をしてくれたりする。 実際のコードは https://github.com/shibayu36/english-line-bot 。このコードをforkしてもらって、LINEチャネルの作成、Cloudflareへのデプロイ、src/prompt.tsのカスタマイズをすると、自分用のLINE botも作れると思う。 利用技術 OpenAI API Hono Cloudflare Workers Cloudflare Queues Cloudflare D1 開発Tips 基本的な作り方は Cloudflar

Cloudflare PagesでURL短縮サービスを作ってみましょう！これを作ることであなたは以下を体験することができるしょう。 HonoでWebページをつくること Cloudflare KVをアプリケーションの中で使うこと アプリケーションをCloudflare Pagesへデプロイすること アプリケーションの特徴 今回作ってもらうアプリケーションはこのような特徴があります。 Viteを使って開発 UI付き JSXを使ってHTMLを書ける メインのコードは100行以下！ Zodを使ったバリデーション バリデーションエラーも表示 簡易なCSRF対策 デモ 完成品を使っている様子です。 完成品 完成済みのコードは以下にあります。 アカウント 今回、アプリケーションを作ってCloudflare PagesへデプロイするにはCloudflareのアカウントが必要です。無料の範囲で遊べるので、も

最近のCloudflare Workersについて、知らない方向けにざっくばらんに書いてみます。 連絡事項 自己紹介しておくと、僕はCloudflareのDeveloper RelationsチームにいてDeveloper Advocateをやってます。 一方で、HonoというCloudflareのみならずDenoやBun、Fastly等で動くWebフレームワークを開発してます。 Cloudflare Workersとは？ 本題に入る前に、そもそも「Cloudflare Workersとは？」を簡単に紹介しておきます。 Cloudflare WorkersとはCloudflareのエッジで動くサーバーレス環境です。 基本的にJavaScript/TypeScriptでアプリケーションを書きます。 V8というJavaScriptエンジンの上でアプリを動かすのですが、これはWebブラウザのGo

「Hono」というCloudflare Workers向けのフレームワークを作っています。 以前もYAPCの発表とZennの記事で紹介したものです。 Hono[炎]っていうイケてる名前のフレームワークを作っている Hono[炎] Ultrafast web framework for Cloudflare Workers. あらためて、さかのぼってみると「Initial Commit」が去年の12月15日でそれから現在405コミット。頑張っています。これは僕個人だけのものではなく、コントビューターの方のかいもあってです。ちなみに、そういうのも考慮して、個人リポジトリでやっていましたが、ある時から「honojs」オーガナイゼーションに切り替えました。 現在のバージョンは「v1.4.5」。 APIで紆余曲折ありつつも、安定してきました。また、使ってくれる人もだんだんと増えています。 今回は「現

Cloudflare Workers + KV + honoで簡単なAPIサーバーを作ってみたくて、ebaというモックAPIを作成できるAPIサーバーを書いてみた。突然適当なメソッドと適当なURLで適当なレスポンスを返すAPIが欲しくなったときに使える。 使い方としては、1) 専用の名前空間を作って、2) 好きなエンドポイントを設定する、だけ。こんな感じ。 # 名前空間の作成。パスワードも適当に設定しておく。 $ curl -X POST 'https://eba.razokulover.workers.dev/' -H 'X-REQUEST-TYPE:register' -d '{"password": "xxxxxxxx"}' {"namespace": "your-unique-namespace", "password": "xxxxxxxx"} # エンドポイントの作成 # GE

前々から感じてはいたけど、誰も触れてない気がするのは、まあ1/Nなんか問題にならないからってことなんやろうけど。 とりあえず備忘録として書いておく。 0コールドスタート Eliminating cold starts with Cloudflare Workers https://blog.cloudflare.com/eliminating-cold-starts-with-cloudflare-workers/ FaaSでありながら0コールドスタート！と謳っているそのわけは、 TLSのClientHelloがきたときにあっためはじめるので HTTPが飛んでくる頃にはもうホカホカですよ ってことらしい。 コンテナベースのFaaSよりかはそもそも速いけど、それをさらに短縮することで実質は0！っていう。 しかし実際は export default { fetch: () => new Res

Cloudflare Fonts: enhancing website font privacy and speed2023-09-25 This post is also available in 简体中文, 繁體中文, 日本語 and 한국어. We are thrilled to introduce Cloudflare Fonts! In the coming weeks sites that use Google Fonts will be able to effortlessly load their fonts from the site’s own domain rather than from Google. All at a click of a button. This enhances both privacy and performance. It enhance

Hori Blogフリーランスでバックエンドエンジニアとして活動している Ryota Hori のブログです。 最近はテック系記事より雑記ブログ気味。 ご縁がありまして「しいたけ占い公式サイト」の開発に携わりました。 比較的シンプルなページ構成ですが、高トラフィックを快適に提供する Web サイトとして色々と工夫したので記録に残しておきます。似たような構成の Web サイトを構築する際の参考になれば幸いです。 （技術的開示および実績公開に関してはしいたけ.さんより許諾を頂いております。ありがとうございます。） 「しいたけ占い公式サイト」とは 占い師であるしいたけ.さんが占いコンテンツを連載する公式サイトです。 しいたけ占いの公式サイト。占い師しいたけ.が 12 星座別の運勢をオーラカラーと共に診断。毎週月曜日更新の週刊占いと、上半期、下半期占いをお楽しみいただけます。 しいたけ占い公式サイ

What are 103 Early Hints?103 Early Hints, a new informational HTTP status code to provide resource hints to clients before the final response is ready, has landed in Chrome 103. If you haven't already read the blog from Cloudflare about how it works & their performance benchmarks, you definitely should! How do they help my site?Naturally, what the benchmarks say and what you perceive in reality wi

Hono とは？ Hono は TypeScript/JavaScript のシンプルな Web フレームワークです。Hono という名前は日本語の「炎」に由来します。 Hono の特徴としては以下の点が挙げられています。 ウルトラファスト 依存関係ゼロ ミドルウェア TypeScript マルチプラットフォーム ウルトラファスト Benchmarks の示すとおり、Hono はその他のライブラリに比べて早い結果がでています。Hono が早い理由として、内部で使うルーターに秘密があります。Hono では以下の 2 種類のルーターどちらを使用するか選択できます。 TrieRouter RegExpRouter 「TrieRouter」URL のパスマッチングは URL のパスマッチングにTrie 木という構造を使っています。「RegExpRouter」は登録されたルーティングをあらかじめひと

【2023年02月13日追記】 コンソールからCORSの設定が出来るようになったようです。 こちらの記事はコンソールから設定できない場合にAPIから設定する方法です。 はじめに 先月にGAとなったCloudflare R2を使って静的ファイルを配信する場合の設定や使用例などを記事に起こしていきます。 【前提条件】 Cloudflareのアカウント作成方法については触れませんのでご自身で調べて下さい Cloudflareのコンソール画面を紹介していますが、言語設定を英語にしているため、そのままの紹介です Next.jsを例にビルド済みのJavaScriptやCSSの配信例を記載します 静的ファイルは専用のサブドメインから配信するものとします まとめ ざっと記事として言いたいことから public domain accessが使えるようになっているので使用するのが吉 AWS S3やGCSと異な

2022/12/30 追記 今はもう Public Buckets の機能があるので、このスクラップの内容は基本的に必要ありません。 Bucket Accessの設定からDomain Accessを有効化することで、キャッシュも効くようになります。 下記の記事が参考になりそうです。 Cloudflare R2の画像をCache APIでキャッシュして返したのでそのメモ。

ここ最近 Cloudflare Workers を触った実感です。趣味の時間で調べて、外部 API のプロキシをやったり画像をキャッシュして返す程度の処理を書きました。コードとしてはチュートリアル改変レベルです。 TL;DR Cache できる場面では Cache をする設計を意識しないと遅くなる Cache API を利用するには独自ドメインを取得して割り当てる必要あり、*.workers.dev では Cache は使えない模様 localhost で動作しないので、 wrangler publish する必要ある Cloudflare の管理画面で独自ドメインを買える。Google Domains よりも安価なので、実験用に持っておくことをお勧めする 例えば R2 バケットに入った画像を配信する場合、 Cache API でキャッシュしたものを返すことで、x0ms 単位で返せるように

Web APIのパフォーマンス向上に「Dynamic Content Storing = DCS」という戦略を考えている。 Web APIに限らず、サーバーサイドで動的に作られるコンテンツ全てへ適応できるものである。 本番環境で運用したわけではないが、実際に動くモックを作ってみた。 背景とともに紹介しよう。 要点 「Dynamic Content Storing」とは「動的コンテンツをエッジのkey-valueストアに保存する」ことを言う。 ユーザーには（初回以外）KVストアから取得したコンテンツを返す。 有効期限もしくはコンテンツの更新をトリガーに新しくコンテンツを生成する。 どんなバックエンドにも適応できる「Incremental Static Regeneration」と考えることができる。 原理は「Stale-While-Revalidate」と同じだがこの場合はコンテンツがより永

Cloudflareはプライバシーを優先する企業で、当社ではEU一般データ保護規則（「GDPR」）で求められるさまざまな対策を既に実施していました。当社では、処理する個人データを販売したり、サービス提供以外の目的で使用したりすることは決してありません。さらに、当社は、データ主体が自分の個人情報にアクセスして訂正や削除を行えるようにしており、当社のネットワークを通過する情報をお客様が制御できるようになっています。 詳しくは、GDPRに関するよくある質問（FAQ）をご参考いただくか、Cloudflareのプライバシーポリシー全般をご確認ください。

Google Fonts is one of the most common third-party resources on the web, but carries with it significant user-facing performance issues. Cloudflare Workers running at the edge is a great solution for fixing these performance issues, without having to modify the publishing system for every site using Google Fonts. This post walks through the implementation details for how to fix the performance of