最近の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
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
日本時間の2024/04/05にCloudflareからRPCを使用したCloudflare Workers間の通信が発表されました。 これによりいくつかの課題が解決されると同時にCloudflare上にアプリケーションを構築する利便性が1段階どころか2段階以上上がったといっても過言ではないと思っています。 このRPCの対応によりService Bindingsが更に使い勝手がよくなったのでそれの紹介です。 出来上がりのコードはここにありますので、時間の無い方はこちらを参照ください。 前提条件 以前RemixとPrismaでD1に接続する記事を書きました。 その中で容量制限の問題があると書きましたが、それを解消する話をベースに今回のRPC対応の内容を書きます。ですので記事を読んでない方はCloudflare Workersの無料版はビルドファイルが1MBまでの制限があるということを念頭にお
2023-11-24 の Cloudflare Workers Meetup by NOT A HOTEL で話ました https://notahotel-cf.peatix.com/
GPT-4V x LINE Bot を Cloudflare Workers で実現するためにやったこと・やらなかったこと - hatappi.blog
この記事では OpenAI が提供する Vision API (GPT-4V) を使用して、LINE に投稿した画像に反応する Bot を作成した際にやったこと・やらなかったことを書いています。 Bot の実装を細かく解説はしていないので、それを知りたい方は「ChatGPT LINE」などでググると参考になる良い記事が沢山でてくるのでそちらを参照してください！ モチベーション LINE Bot は昔実装したものがありグループ LINE で身の回りのあれこれを通知する君になっていました。機能としては通知のみだったので何か反応してほしいなーと思ったのが最初のきっかけでした。冬休みで時間もあったので OpenAI 周りのプロダクトを整理するためにドキュメントを一通り見てその中から Vison API を使えば画像にも反応できる Bot にもなり面白そうなことがわかったのでガッと実装することにしま
2023年はエッジコンピューティングとデータベース接続の分野において、Cloudflare Workers(以下CFWorkers)が中心となり多くの進歩が見られました。本記事では、この1年間の重要なトピックと、それがどのように開発体験を変えたかを振り返ります。特に、CFWorkersのエコシステムの成長、機能拡張、およびDB接続の課題と解決策に焦点を当てています。 エコシステムの進化とCFWorkers上からのDB接続需要の増加 2021年頃から2022年にかけて、いくつかのWebアプリケーションのフレームワークやエコシステムが、CFWorkers上での動作やデプロイをサポートしたことがきっかけとなり、エッジランタイム・コンピューティングの注目を集めるようになりました。 Remix Remixは、フロントエンドのフレームワークであり、エッジランタイムへのデプロイをサポートしています。 2
Cloudflare、Workers KVの更新に失敗し障害発生。しかも復旧用ツールがWorkers KVに依存しており使えず、手動で緊急対応
Cloudflare、Workers KVの更新に失敗し障害発生。しかも復旧用ツールがWorkers KVに依存しており使えず、手動で緊急対応 Cloudflareは10月30日、同社がキーバリューストアとして提供しているWorkers KVの社内アップデート作業に失敗したことで、Workers KVのみならずCloudflare Pages、Cloudflare Access、Cloudflare Workers、Waiting Room、Cloudflare Dashboardなど各種サービスが世界協定時2023年10月30日19時54分（日本時間10月31日4時54分）頃から約37分間、サービスの一部または全部の機能が使えないなどの障害を起こしました。 幸いにも比較的短時間で復旧した障害でしたが、同社の報告によると、復旧のための社内ツールそのものがWorkers KVに依存していたた
Remix + Cloudflare Workers + D1 + KV + Queue + R2 + DOで簡単なアプリを作る
Remix + Cloudflare Pages/WorkersをベースにD1とKVと組み合わせた構成で作るアプリの解説は巷に結構あるが、それらに加えてQueueやR2なども合わせた参照実装みたいなものが見当たらなかったので作った。 このアプリの機能は下記。 Googleアカウントを用いたOAuthログイン セッション管理にKV,ユーザー管理にD1を使う はてブのようなブックマーク機能(基本的なCRUD) URLとコメントを入力してD1へデータ登録できる URLの先のページからOGPを取得して登録 QueueのProducerとConsumerを使って非同期にタイトルと画像を取得 取得した画像はR2にアップロードする URLごとにブックマーク数を管理する Durable Object(DO)を使う。 Cron Trigger ついでに追加。アプリ的には不要だがせっかくなので設定だけしておく
Cloudflare Workers + Hono ワークショップ - ServerlessDays Tokyo 2023
Cloudflare Workers + Hono ワークショップ 資料はこちら => workshops.yusuke.run #serverlessdays Yusuke Wada 2023-09-24 ServerlessDays Tokyo 2023 workshops.yusuke.run アジェンダ ワークショップについて Workers イントロダクション Hono イントロダクション 基本編 プロキシ編 Web API編 フルスタック編 AI編 Honoをより深く知る その他 1. ワークショップについて 1.1 対象 対象者 Cloudflareでのアプリケーション作成に興味のある方 Honoを使ってみたい方 フロント、バックエンド問いません 前提条件 Wranglerが動く環境をつくっておく npx wrangler が動く JavaScriptに対する知識があるとよい
「Cloudflare Workers活用事例 業務利用の決め手とその効果に迫るLunch LT」https://findy.connpass.com/event/318382/ での発表資料です。
Cloudflare WorkersがPythonをサポート、WebAssembly版Pythonランタイムの「Pyodide」を採用で
Cloudflare WorkersがPythonをサポート、WebAssembly版Pythonランタイムの「Pyodide」を採用で Cloudflareは、CDNエッジでJavaScriptランタイムによるアプリケーション実行基盤を提供する「Cloudflare Workers」で、Python言語のサポートをオープンベータとして開始したと発表しました。 これによりCloudflare Workers上でPythonを用いたアプリケーションの構築が可能になります。 Introducing Cloudflare Workers in Python, now in open beta! We've revamped our systems to support Python, from the runtime to deployment. Learn about Python Worke
Cloudflare Workersを利用した静的配信ページへの動的なOGPメタタグの挿入 - pixiv inside
こんにちは、ピクシブでエンジニアをしているnamazuです。 ピクシブ株式会社ではpixivを始めとする複数のサービスにおいてDDoS防御やBotへの対処としてCloudflare CDNを利用しています。 この度Cloudflareの提供するCloudflare Workersをマンガ家デビューを目指すクリエイターと出版社の編集者が繋がるサービス pixivコミックインディーズ にて利用しました。 本inside記事ではコミックインディーズの開発チームが取り組んだCloudflare Workersの活用事例についてご紹介します。 課題 pixivコミックインディーズはReact (+ vite)を用いて作られたウェブアプリケーションです。 CSR(ClientSideRendering)のSPAであり、コンテンツ配信用のNginxサーバーからindex.htmlを静的コンテンツとして配
bsky.app そういえば、古き良き時代は自分のブックマークは自動でTwitterに投稿されていたのだった。 今はBlueskyがメインになっているので、同じ仕組みが欲しい、と思った。ので、作った。 github.com 要件 先行事例 Rust版 WASM対応 Cloudflare Workersでの実装 1MB制限との戦い Fetch API KVでのSessionStore？ 要件 自分のブックマークはRSSで取得できる。定期的にチェックして新しいのがあれば、といったロジックで検出できる。 なので、基本的にはプログラムを定期実行できる場所があればGitHub Actionsとかでも良い。 ただ、対象のブクマ内容をpostする前に、それを既にpostしているか否かを知る必要がある。 専用のbotアカウントとかであれば、そのアカウントのpost feedを取得して最近のものをチェックす
前置き 4月の第1週に行われたCloudflare Developer Week 2024でAIやデータベース関係のアップデートの影に隠れ、WorkersをつくってるKenton氏のブログが2つ投下されました。 そして「JS RPC」という機能が追加されました。 これが一見地味なんですが、非常に楽しい未来を想像できるので、書いてみます。というか以前chimameさんが書いた記事でだいぶ理解できるのですが、もう少し噛み砕いて書いてみます。 Bindings Cloudflareにはいくつもプロダクトがあります。ストレージのR2、データベースD1、KVストアのKVなどです。そしてそれらに繋ぐ方法が「Bindings」という方法です。このBindingsで繋げられるものはたくさんあります。 AI Analytics Engine Browser Rendering D1 Environment
Web サービスリニューアルしたいことってありますよね？ ただ、一度に一気にリニューアルすると、想定していない不具合が出てきたり、今の運用どうするの？っていう問題があったりします。 そこで、 Cloudflare Workers を使って段階的に移行する方法を紹介します。 今回は、現行サービスを Cloudflare Proxy のオリジンとして設定してあることをベースとして、新しい部分は例えば Cloudflare Pages などで別ドメインでホストされているとします。 その場合、以下のように Cloudflare Workers でプロキシーしてあげることで、想定した動作を行うことが出来ます。 +---- Old Pages --- www.natsuneko.cat (Current Origin) | Internet -- Cloudflare Workers --+ | +-
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
第36回 JAWS-UG札幌 勉強会【 #CloudflareUG_cts と合同開催です！】 https://jawsug-sapporo.connpass.com/event/321565/
なぜ cloudflare-workers: 運用が楽 なぜ claude3: GPT-4 より体感性能がいい 動いてるもの /claude <prompt> で claude 3 が答えてくれるチャットボットで、 cloudflare-workers 上で動く。 ただし、AI は自分のことを FF7 のクラウドだと思い込んでいるミッドガル在住の中年男性という設定になっており、時折魔晄中毒で幻覚を見始める。 (アイコンは bing で生成させた) (最近 FF7リバースをクリアしたので...) 自分の課金で claude3 の APIキーを使って動かしてるので、一般公開はしない。代わりにソースコードは公開している。 claude3 を動かす 以下の記事を参考にした。 とりあえず課金してAPIキーを手に入れる。この課金登録フローが少々面倒だったが、調べれば出てくるのでこの記事では割愛。 トー
Cacheable Presigned URL with Cloudflare Workers
2023年10月06日「Cloudflare Meetup Nagoya 第3回」にて発表した資料。 https://cfm-cts.connpass.com/event/294096/
We've added JavaScript-native RPC to Cloudflare Workers
We've added JavaScript-native RPC to Cloudflare Workers04/05/2024 Cloudflare Workers now features a built-in RPC (Remote Procedure Call) system enabling seamless Worker-to-Worker and Worker-to-Durable Object communication, with almost no boilerplate. You just define a class: export class MyService extends WorkerEntrypoint { sum(a, b) { return a + b; } } And then you call it: let three = await env.
この記事では、Cloudflare Workers を使用してウェブサイトのメンテナンスモードを実現する方法を解説しています。また、作業中のユーザーにはオリジンサイトを、一般ユーザーにはメンテナンスページを表示させる方法を説明しています。 こんにちは。Classmethod Europe でフロントエンドエンジニアをしている watsuyo です。 ベルリンに来てから 1 ヶ月半が経過し、肌寒く、そして日照時間の短い冬の気配が感じられる季節になりました。 さて、ウェブサイトに大規模な変更を加える際、サイトの一時的な利用停止が必要な場面があります。Cloudflare で管理されているウェブサイトの場合、Waiting Room を使用することで、コードの編集を行わずに一時的なメンテナンスページを表示できます。 しかし、Cloudflare の契約プランによっては、Waiting Room
Workers Tech Talks in Osaka #1 Feb 26, 2024. Yusuke Wada
Go to Cloudflare Workers 〜移行から 0.5 年以上運用する〜 を YAPC::Hiroshima 2024 で話ました。（20min）
ことの顛末5月: Cloudflareで開発を始める/遊び始める2023年5月ごろからとある業務委託で新規開発を任されたので、心機一転新しいスタックで開発を行っていました。 具体的には Cloudflare Workers/Pages (Host) SvelteKit(フロントエンド) Hono (API Backend) Lucia Auth (認証) Drizzle (ORM) Swift UI (モバイル) Planetscale (DB) etc... なるべく安く、なるべく安定させて、かつWeb FrontendもiOSアプリも必要だったのでこのような構成になってます。 当時、この構成でこれだけのものを一人で開発していました。文字通りのfull stack engineerをやってました。とてもしんどかったですが、最近のエコシステムの成熟はとてつもなく、１ヶ月ほどで基本のものは出
先日行われたCloudflareのDeveloper Week 2024の記事の中にPicsartというサービスの事例記事がありました。 よくよく読んでみると「Cloudflareを導入したらパフォーマンス上がった」という簡単なセリフでは済まされない努力と工夫が書かれていました。非常に面白いので、自分なりに噛み砕いた要約を書いてみます。コードはあまり出てきませんがテクニカルな内容になっています。 Picsartとは そもそもPicsartとは？ということなんですが、iOSとAndroidのモバイルデバイスとWebに対応した、世界的なオンラインの写真編集サービスです。 Wikipediaによると180カ国で10億ダウンロードを超えているとのことです。 問題 Picsartには固有の問題がありました。 各アプリの起動時にクライアントデバイスは1.5MBの設定ファイルをダウンロードする クライア
TiDB + Prisma (Edge Functions Preview)をCloudflare Workersで動かす
2024/03/12にリリースされたPrisma v5.11.0でEarly AccessからPreviewになったため、記事を更新しました。 https://www.prisma.io/blog/prisma-orm-support-for-edge-functions-is-now-in-preview PlanetScaleからTiDB Serverlessへ サーバーレスデータベースのリーダー的存在だったPlanetScaleが無料プランを廃止することが発表されました。 自分はPlanetScaleがまだベータ版だった2021/11からサービスを触り始め、自社サービスのプロダクションデータベースとしても使っており、純粋にファンだったのもあって非常に残念でした。 とはいえ趣味で運用しているサービスのために課金することは難しいため、無料プランがある移転先を探していました。 以下のスクラ
NOT A HOTEL ではガッツリ Cloudflare Workers の上でアプリケーションを動かしています。 本格的にアプリケーションを開発しようとすると、ある機能 A を作成するために、それに依存する機能 B、機能 C を事前にセットアップしなければいけません。これらをスッキリさせる手法として Dependency Injection（以下 DI）があります。 環境変数もセットアップに必要な機能です。うちではどのように DI を行なっているか、一つの事例として紹介します。言語は TypeScript です。 ディレクトリ構成 di.ts を worker.ts と同じ階層に作成しています。 di.ts の中身 以下のようなコードを書いています。 使う時は new DIContainer(env, req) もしくは new DIContainer(env) と記述して利用できます
こんにちは、うしろのこです。直近1年ではVueから離れて、maja と呼ばれる組織管理基盤の新規プロダクトの開発をしていました。 プロダクトの話はこちら(maja)↓ note.st.inc 今回は、0->1における技術選定や開発中の工夫、結果どうだったかなどを書きます。 技術選定 初めに、前提条件は以下のような感じでした。 メンバーはReactの経験が豊富、フロントを触るのは多くて3,4人くらい 常にユーザー認証された状態で操作されるため、FE用のmiddleware的な層があるとうれしい toBアプリケーション せっかくなので使ったことのないものを使ってみよう、ということで、すでにWAFでの導入が進んでいたCloudflareの技術の採用をFEでも検討しました。少し触った感じではdeploy体験がよく、ローカル開発環境であるwranglerの出来も申し分なかったため、Cloudflar
Wasm core dumps and debugging Rust in Cloudflare Workers
Wasm core dumps and debugging Rust in Cloudflare Workers08/14/2023 A clear sign of maturing for any new programming language or environment is how easy and efficient debugging them is. Programming, like any other complex task, involves various challenges and potential pitfalls. Logic errors, off-by-ones, null pointer dereferences, and memory leaks are some examples of things that can make software
Cloudflare Workersを使って定期的なタスク自動化を実質無料で行う（不要な画像、アカウントの定期削除など）
Cloudflare Workersなら定期的なタスクを自動化 Google Cloud Schedulerのような機能を実質無料で実行できます(1日あたり最大100,000リクエストまで) 実際に自分のサービスで使っている例 Cron 実行履歴（不要な画像の定期削除） 自分の扱っているサービスの場合1日1度不要な画像の処理を定期実行するので1日1リクエスト 30日で30リクエスト リクエスト サブリクエストを含めると先月（4月6日から〜5月6日まで） 1ヶ月あたり90リクエスト 1日あたり最大100,000リクエスト以内なので無料で使える！ Cloudflare Workersの料金体系（2024/5/6現在） 2024年5月時点の料金体系 最新の料金情報はCloudflareの公式ウェブサイトで確認してください。 基本プラン Free: Cloudflare Workersの無料プラン
Last Friday, on December 15, 2023, I hosted the second ”Workers Tech Talks” event in Tokyo. It was a successful event, with over 90 developers attending! This could be the largest event for Workers developers globally. Ricky Robinett (Cloudflare - VP, Developer Relations & Community Team Manager) was also there as a speaker and demonstrated Workers AI. It was a fantastic time spent talking about C
業務で使えるかもしれない…！？GitHub Actions の Tips 集 / CI/CD Test Night #7
ワークショップ 来週というか今週の金曜日、名古屋でCloudflare Workers + Honoのワークショップをやるのですが、先日Birthday Weekで発表された「Workers AI (AIアプリがGPUで動く！)」が楽しいので、それを使ったアプリを作ろうということになりました。 先日もServerlessDays Tokyo 2023というイベントでCloudflare Workers + Honoのワークショップをやったのですが（4時間！）、その時にドタバタしちゃったんで、今回はもうやることを全部ここに書こうと思います。とはいえ「Cloudflare Workersとは」とか「Honoの特徴は？」とか書き出すとキリがないので、参考文献を参考にしてください。 準備してもらうこと まず、Cloudflareのアカウントを作って、Dashboardに入れることを確認してください
JSer.info #685 - Storybook 8.0がリリースされました。 Storybook 8 Storybook: UI component explorer for frontend developers 破壊的な変更として、storiesOf APIの削除、*.stories.mdxの削除、StoryShots addonの削除、Yarn v1のサポート終了などが行われています。 詳細はマイグレーションガイドを参照してください。 Migration guide for Storybook 8.0 • Storybook docs 機能追加として、Chromaticとの連携機能の実装、MSWを使ったReact Server Component(RSC)のサポート。 そのほかには、SWCを使うことでビルドパフォーマンスの改善、react-docgenがデフォルトとなるように変
Serverless Haskell - GHCのWASMバックエンドで Haskell を Cloudflare Workers に載せる
Serverless Haskell - GHCのWASMバックエンドで Haskell を Cloudflare Workers に載せる TL;DR GHC 9.10 から WASM バックエンド（クロスコンパイラ）が JavaScript FFI に対応したので、Haskell コードを Cloudflare Workers 上で動かしてみたよ。快適に開発するための環境構築・ハック方法と、GHCの出力をCloudflare Workers 向けに修正する方法を紹介するよ。 はじめに──Asterius から GHC WASM バックエンドへ GHC は 9.6 から WASM バックエンド（クロスコンパイラ）を搭載していますが、GHC 9.10 から WASM バックエンドが遂に JavaScript FFI に対応しました。 従来から C FFI には対応しており、これを使って F
GitHub - good-lly/lowstorage: Simple, zero-dependency, object pseudo-database for Cloudflare Workers using R2 bucket. 🧡💾
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
A “cold start” is the time it takes to load and execute a new copy of a serverless function for the first time. It’s a problem that’s both complicated to solve and costly to fix. Other serverless platforms make you choose between suffering from random increases in execution time, or paying your way out with synthetic requests to keep your function warm. Cold starts are a horrible experience, espec
Cloudflare Workers の無料プランで画像を圧縮する Next.js のプロジェクトを Cloudflare にデプロイする場合、問題になるのが Vercel が提供している画像の自動圧縮機能です。これを Cloudflare でも実現するためには、Cloudflare Workers が使えそうですが、無料プランでは画像の圧縮機能を提供していません。意地でも無料で実現したいという乞食精神に乗っ取り、画像変換コードを書くことにしました。 画像の変換方法 Cloudflare Workers では、一度のリクエストで処理できる CPU 時間は 10ms です。非同期アクセスの待ち時間は含まれないので、純粋な処理時間です。高速に処理するのならネイティブコードを使うのが一番ですが、もちろん使えません。そこで、WebAssembly を使うことにしました。最近 WebAssembly
Web+DB な業務システムも Cloudflare Workers で動かしたい！Connection pooler 比較
この記事は、モニクル Advent Calendar 2023 の10日目の記事です。 はじめに Cloudflare Workers から DB は普通に使えます。 しかしながら、Cloudflare Workers に限らず Edge な環境における DB のコネクションまわりについて、以下のことが気になります。 処理の度に接続が切れるのでコネクションプールが使えない（プールしても使い回せない） つまり毎回新しい接続確立のコスト（時間）が発生する 新しいコネクションの作成は少なからず DB 側にも負荷がかかる DB 側に Edge がスケールした分だけ素直に新しい接続が要求されてしまう 新しい接続要求を制御できない => 最大接続数オーバー この辺りも予めケアされているだろうという期待のもと D1 を DB として採用する選択肢もあります。しかしながら、D1 を趣味で使う分には良いと思
先日Cloudflare Workersでウェブページの本文を抽出したくなったことがありました。本文抽出といえば、@mozilla/readabilityが使えそうです。しかし依存に含まれるnwsapiにはFunctionコンストラクタが多用されており*1、Cloudflare Workersでは動作しません。これを修正するのも大変そうです。 そこで、TinyGoを使用してgo-readabilityをwasmにコンパイルしてみることにしました。 TinyGo のドキュメントUsing WASM | TinyGo のままではCloudflare Workersでは動かなかったので、TinyGoに含まれるwasm_exec.jsを少し修正したり*2、 import側もwasmファイルをfetchしているのを変更したり*3すると無事動きました。 動作するコードは https://github.
https://github.com/syumai/workers の紹介です。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近のCloudflare Workers - ゆーすけべー日記
すぐ使える Cloudflare Workers！
RPC対応によりCloudflare Workers間の連携がすごいことになった
Cloudflare Workers は楽しい！
2023年振返り: Cloudflare Workersとデータベース接続の進歩
Cloudflare Workersで構築する非同期ジョブシステム
Cloudflare Workersで、自分のはてブをBlueskyに流す - すぎゃーんメモ
Cloudflare WorkersのJS RPCを理解する
Cloudflare Workers を使って Web ページを段階的に移行したい - なつねこメモ
cloudflare-workers で動く claude3 の discord-bot を作ってみた
Cloudflare Workersでメンテナンスモードを実装する | DevelopersIO
Cloudflare Workersの環境を再現することについて
Go to Cloudflare Workers
Cloudflare Workersとかでお仕事したり遊んだりしていたら就職することになった件｜ryoppippi
Cloudflare WorkersとKVを使ってパフォーマンスを上げる話
Cloudflare Workers で Dependency Injection
Remix x Cloudflare Workersで0->1 - STORES Product Blog
Cloudflare Workers Tech Talks #2 - Yusuke Wada
Cloudflare Workersで動的コンテンツをキャッシュする際の新たな選択肢
My first Cloudflare Workers AI
2024-03-19のJS: Storybook 8、Nuxt 3.11、Cloudflare Workers + Vitest
Eliminating cold starts with Cloudflare Workers
Cloudflare Workers の無料プランで画像を圧縮する
go-readabilityをwasmにしてCloudflare Workersで本文抽出する - *iroi*
Go言語で始めるCloudflare Workers