ワークショップ 来週というか今週の金曜日、名古屋でCloudflare Workers + Honoのワークショップをやるのですが、先日Birthday Weekで発表された「Workers AI (AIアプリがGPUで動く！)」が楽しいので、それを使ったアプリを作ろうということになりました。 先日もServerlessDays Tokyo 2023というイベントでCloudflare Workers + Honoのワークショップをやったのですが（4時間！）、その時にドタバタしちゃったんで、今回はもうやることを全部ここに書こうと思います。とはいえ「Cloudflare Workersとは」とか「Honoの特徴は？」とか書き出すとキリがないので、参考文献を参考にしてください。 準備してもらうこと まず、Cloudflareのアカウントを作って、Dashboardに入れることを確認してください
Cloudflare WorkersのService BindingsこそRemixアプリケーションでは積極的に採用したい
[[unsafe.bindings]] name = "BindingsRemix" type = "service" service = "bindings-remix-staging" environment = "production" name にTypeScriptやJavaScript内で使用するService Bindingsの編集名を記載します。 service には実際のデプロイされたCloudflare Workersの名前を設定すればOKです。 実際に呼び出すには以下のように記載すれば大丈夫です。今回の例ではModule Workersという形式で記載しています。 export default { async fetch(request: Request, environment: Environment, context: Context): Promise<Res
Flareact - Edge-Rendered React Framework built for Cloudflare Workers
Flareact is an edge-rendered React framework built for Cloudflare Workers. It features file-based page routing with dynamic page paths and edge-side data fetching APIs. Flareact is modeled after the terrific Next.js project and its APIs. If you're transitioning from Next.js, a lot of the APIs will seem familiar, if not identical! Overview # Flareact will serve each file in the /pages directory und
GitHub - yusukebe/hono: Ultrafast web framework for Cloudflare Workers, Deno, and Bun. Fast, but not only fast.
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
Leading venture capital firms to provide up to $1.25 BILLION to back startups built on Cloudflare Workers
Leading venture capital firms to provide up to $1.25 BILLION to back startups built on Cloudflare Workers09/27/2022 This post is also available in 简体中文, 日本語, Français, Deutsch and Español. From our earliest days, Cloudflare has stood for helping build a better Internet that’s accessible to all. It’s core to our mission that anyone who wants to start building on the Internet should be able to do so
Cloudflare WorkersをRust(WASM)で書くと速いのか - console.lealog();
なんとなく察しはついてるけど、いちおう確かめておこうかと。 GitHub - leader22/workers-benchmark 詳細はこのリポジトリに。 Rustで書くには ドキュメントなどあらゆる情報は、Cloudflare公式のこのリポジトリにある内容がすべて。 GitHub - cloudflare/workers-rs: Write Cloudflare Workers in 100% Rust via WebAssembly Workerグローバルのコードがそれ用のcrateになってて、それを使ってRustでコードを書く。RequestやらKVやらだけでなく、いわゆるRouterやちょっとした便利関数まで実装されてた。 READMEにあるコード例をそのまま貼るとこんな雰囲気で。 use worker::*; #[event(fetch)] pub async fn main(
【ふーん、”エッジ”じゃん】Cloudflare Workersが0ms Cold Startsを実現するカラクリ はじめに CDNやキャッシュ周りの知見を深めていく中で、個人的に最近はエッジ関連がめっっっっっっちゃくちゃ熱いと感じました。 と言いますのも、Cloudflare Workersをはじめとした様々なインフラサービスにおいて、いろんな「エッジで動作する系」のものが登場しています。 有名どころでいうとこんな感じになります。 Cloudflare workers Vercel Edge Functions Supabase Edge Functions Netlify Edge Functions Deno Deploy Fastly Compute@Edge AWS Lambda@Edge 今回は、一度基礎に立ち返って"エッジ"とはなんぞや？というところから学び直しつつ、僕がとて
GitHub - panva/jose: JWA, JWS, JWE, JWT, JWK, JWKS for Node.js, Browser, Cloudflare Workers, Deno, Bun, and other Web-interoperable runtimes.
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
Remix on Cloudflare WorkersからWorkers KVを使う | DevelopersIO
キー値は最大512バイト、バリュー値については最大25MBまでサポートしており、任意のTTL（最低は60秒）を設定することも可能です。なお記録されるデータは結果整合性をとっており、データの伝播には最大60秒かかる場合があるためアトミックな処理には向いていません。Durable Objectsとも比較されますが、Durable Objectsは強い整合性をもっており、リアルタイムなデータのやり取りなどアトミックな処理を行うデータストアの用途として活躍します。なおDurable Objectsは有料プランでのみ利用可能となっています。 Workers KVのユースケースは無限に考えることができると思いますが、Remixと組み合わせた場合にはセッションのストレージ、APIやデータベースのキャッシュストレージとしての用途として特に活躍してくれるでしょう。 Workers KV、Durable Ob
最近 Web 上で写真をサッと管理するためのアプリケーションを Cloudflare 上で構築しているのですが、その際に Cloudflare Workers, KV を用いて GitHub アカウントを用いたアクセス制御を行う機会があったのでそのメモです。 認証の流れ GitHub アカウントと連携する場合は OAuth 2.0 を利用するため、クライアント側では次の流れを踏みます。 state パラメータを生成し、https://github.com/login/oauth/authorize?client_id=<id>&state=<state>（認可エンドポイント）へ遷移 GitHub 上の認可画面で、ユーザにアカウント連携の承認を求める。これが許可されると、事前に指定した（Workers 上の）コールバック URL にリダイレクトされる Workers：state パラメータを
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がデフォルトとなるように変
We released Cloudflare Workers three years ago, making edge compute accessible to the masses with native support for the world’s most ubiquitous language — JavaScript. The Workers platform has transformed so much since its launch. Developers can not only write sandboxed code at our edge, they can also store data at the edge with Workers KV and, more recently, coordinate state within our giant netw
Vercel's Edge Functions are built on top of Cloudflare Workers. The runtime is d... | Hacker News
Vercel's Edge Functions are built on top of Cloudflare Workers. The runtime is designed for any similar provider, but we've chosen Cloudflare for now because they have an amazing product.
動機 wrangler initを実行するとプロジェクトの雛形が生成されますが、wrangler.tomlは .gitignore に含まれていないため、リポジトリに含めて運用することが想定されます。 ただ、公式ドキュメントを見る限り wrangler.tomlに環境変数として渡す値を記述する模様で、セキュアな情報をゴリゴリ書くように見えました。 ローカルの開発では良いにしても、公開することを考えると結構物騒な運用になるので、できるだけセキュアな情報を書かず、wrangler.tomlを公開して運用できないかと調べました。 最初に 調べたのは 2022 年 7 月時点です。Cloudflare Workers の Doc は随時更新されており、この情報もすぐに古くなる可能性があります。 TL;DR 環境変数は.dev.vars に記述する、またはwrangler secret put <k
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
wrangler 2.0 — a new developer experience for Cloudflare Workers
wrangler 2.0 — a new developer experience for Cloudflare Workers Loading... This post is also available in 简体中文, 日本語. Much of a developer’s work is about making trade-offs: consistency versus availability, speed over correctness, you name it. While there will always be different technical trade-offs to consider, we believe there are some that you, as a developer, should never need to make. One of
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でNode.jsを動かしてみたので、その手順を整理してまとめておきます（元のスクラップ）。例として、Node.js + markedでHTMLをマークダウンへと変換するAPIをCloudflare Workersにデプロイしてみます。 関連記事 事前準備 Cloudflareのアカウントを作成しておきましょう。 Wranglerをインストールする Cloudflare Workersで関数のビルド・プレビュー・デプロイをするときにはWrangler（ラングラー）という公式の提供するCLIを使うことになります。ここではWranglerをグローバルインストールしておきます。 npmでインストールする場合 :::message warning 2021/02/07時点ではM1 Mac + npmで@cloudflare/wranglerをインストールすることが
Rustでサーバレスアプリケーション開発 in Cloudflare Workers - Qiita
この記事は Rust Advent Calendar 2021 1日目の記事です。 Cloudflare Workersとは Cloudflareのエッジネットワークに関数を作成してデプロイできるようにするサーバーレスアプリケーションプラットフォーム 類似のサービスは AWS CloudFront Function など Workers KV, Durable Object などのデータベースやストレージを扱える JavaScript, Rust, C/C++ などで書ける 基本はJavaScriptで、Rust, C/C++は WebAssembly として動作する 最近、Javascriptを使わないでRustのみでアプリケーションを作れるようになった https://blog.cloudflare.com/workers-rust-sdk/ Hello, Cloudflare Wor
この記事ではWorkersからオブジェクトストレージであるR2を操作してみます。 R2の特徴は、エグレス料金（ダウンロードなどの下り通信量）が無料でS3互換APIを備えています。またアクセスをWorkers環境に限定させることでクレデンシャル管理をWorkersスクリプトにオフロードし、複雑な認証機構を作りこめることが特徴です。 料金体系も以下の通り安価に設定されています。 それでは早速触っていきます。Wranglerの環境がまだ未設定の方はこの記事を参考に環境を作ってください。タイトルにはWindowsと入っていますがMacでも基本手順は同じです。 Projectのinit 以下のコマンドでWorkers プロジェクトを作成します。 wrangler init firstr2test 対話プロンプトは以下を参考に入力してください。 実行が完了したら、cd firstr2testでディレク
GitHub 今回のソースを上げました。 目標 前回はCRUDのREADだけを実装しました。 それだけではフレームワークを活かせていないので、今回はかんたんな認証を実装します。認証済みのユーザーだけsecretページに入れるようなものを作りたいと思います。それでは行きましょう。 認証 認証について調べたのですが、表題の構成ですと2022年2月では大きく２通りのパターンがあるようです。 Remix Auth Supabaseを用いる Supabase Authを用いる それぞれどういうメリット・デメリットがあるのかわからないのですが、Remix Auth Supabaseを用いるとあまりに簡単に実装できてしまい書くことがなくなるので、今回はSupabase Authの方を選択します。また、Remix Auth Supabaseの方も内部的にはSupabase Authを使っているので、結局ソ
<script id="qwikloader">((e,t)=>{const n="__q_context__",o=window,a=new Set,i=t=>e.querySelectorAll(t),r=(e,t,n=t.type)=>{i("[on"+e+"\\:"+n+"]").forEach((o=>c(o,e,t,n)))},s=(e,t)=>new CustomEvent(e,{detail:t}),l=(t,n)=>(t=t.closest("[q\\:container]"),new URL(n,new URL(t.getAttribute("q:base"),e.baseURI))),c=async(t,o,a,i=a.type)=>{const r="on"+o+":"+i;t.hasAttribute("preventdefault:"+i)&&a.prevent
Cloudflare Workers の無料プランで画像を圧縮する Next.js のプロジェクトを Cloudflare にデプロイする場合、問題になるのが Vercel が提供している画像の自動圧縮機能です。これを Cloudflare でも実現するためには、Cloudflare Workers が使えそうですが、無料プランでは画像の圧縮機能を提供していません。意地でも無料で実現したいという乞食精神に乗っ取り、画像変換コードを書くことにしました。 画像の変換方法 Cloudflare Workers では、一度のリクエストで処理できる CPU 時間は 10ms です。非同期アクセスの待ち時間は含まれないので、純粋な処理時間です。高速に処理するのならネイティブコードを使うのが一番ですが、もちろん使えません。そこで、WebAssembly を使うことにしました。最近 WebAssembly
Cloudflare WorkersではServerlessな実行環境でJavaScriptのコードを実行することができます。SeverlessということでJavaScriptを実行するサーバなどのインフラの準備、メンテナンスはCloudflareが行うので開発者はコードの作成のみに集中することができます。コードの作成後にデプロイした(Cloudflareにコードをアップロード)コードはある特定の場所にあるデータセンターのサーバに保存されるのではなく世界中に分散するCDNのエッジにデプロイされるため世界中のどこからアクセスしても高速に応答することができます。 本文書では初めてCloudflare Workersを使う人を対象にアカウントの作成からデプロイの方法、シンプルなコードを使ってCloudflareの基本的な利用方法の説明を行なっています。Servelessな環境を利用した経験がない
Expand: Runtime APIs Runtime APIs Expand: Bindings (env) Bindings (env) AI Open external link Analytics Engine Open external link Browser Rendering Open external link D1 Open external link Durable Objects Open external link Environment Variables Open external link Hyperdrive Open external link KV Open external link mTLS Queues Open external link R2 Open external link Rate Limiting Secrets Open ext
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
Cloudflare Workers docs 巷で話題のエッジワーカーというやつ。 お仕事で使えるかもしれないというわけで、Docsを一通り読んでみて、ちょっとしたコードをデプロイしてみたところまでの感想。 Docsを読んでの学び コールドスタートがない AWSやらGCPのそれと違って、ランタイムごとにコンテナを〜という構造ではないから。 V8のIsolateなる機能を使って、基本的に立ちっぱのホストの上で、ランタイムだけを起動できるとのこと。 How Workers works · Cloudflare Workers docs なので、たまーに動かすコードでも実行が速いというわけ。 リージョン: 地球 普通にそう書いてあってカッコいい・・ってなった。 実行時間の制限がない 時間に関する制限は、CPU時間だけ。 Limits · Cloudflare Workers docs Netl
Remix on Cloudflare Workers と Next.js on Vercel で TTFB 比較してみた
前提 共通 データプロキシ&クライアント: Prisma.io (us-east-1) データソース: Supabase (us-east-1) Remix デプロイ: Cloudflare Workers 完全非キャッシュSSR / KVによるデータクエリキャッシュ+SSR ※KV利用の方はPrismaのデータフェッチが一切発生しません Next.js デプロイ: Vercel (Serverless: Tokyo Region) SSR(キャッシュヘッダなし) / SSG 比較物 ともにPC用のスタイルしか用意していないため、PCで閲覧してください Remix x Cloudflare: https://remix-cloudflare-workers.aiji422990.workers.dev/ 左下の紫のボタンで 完全非キャッシュSSR / KVによるデータクエリキャッシュ+SS
このエントリーはPerl Advent Calendar 2021の 16 日目の記事です。 モチベーション Cloudflare Workers が面白くて、よくいじっているのですが これは JavaScript で書くものなんですよね。 やっぱり Perl で書きたい！！ ということで、Cloudflare Workers のスクリプトを Perl で書いてみました。 PSGI に対応するアプリにしたので、 plackup でも動きます。 つまり… Cloudlare Workers でも Perl でも動く Perlを書いたことになります！ 紹介します。 Cloudflare Workers の書き方おさらい Cloudflare Workers の書き方をおさらいしましょう。 Service Workers の API にならった書き方をすることになります。 const handl
JSer.info #611 - TypeScript 4.9 betaがリリースされました。 Announcing TypeScript 4.9 Beta - TypeScript 型キャストはせずに型の一致をチェックできるsatisfies演算子の追加、in演算子での型の絞り込みの改善、== NaNをコンパイルエラーに変更などが行われています。 satisfies演算子については次の記事が詳しいです。 Typescript’s new ‘satisfies’ operator | by Cefn Hoile | Aug, 2022 | Medium また、--watchでのファイル監視のデフォルトをuseFsEventsに変更、exportsフィールドのtypeVersionsの優先度を修正なども含まれています。 Cloudflare Workersのruntimeであるworkerd
GitHub - wilsonzlin/edgesearch: Serverless full-text search with Cloudflare Workers, WebAssembly, and Roaring Bitmaps
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
ここ最近 Cloudflare Workers を触った実感です。趣味の時間で調べて、外部 API のプロキシをやったり画像をキャッシュして返す程度の処理を書きました。コードとしてはチュートリアル改変レベルです。 TL;DR Cache できる場面では Cache をする設計を意識しないと遅くなる Cache API を利用するには独自ドメインを取得して割り当てる必要あり、*.workers.dev では Cache は使えない模様 localhost で動作しないので、 wrangler publish する必要ある Cloudflare の管理画面で独自ドメインを買える。Google Domains よりも安価なので、実験用に持っておくことをお勧めする 例えば R2 バケットに入った画像を配信する場合、 Cache API でキャッシュしたものを返すことで、x0ms 単位で返せるように
CloudFlare Workers、Cloudflare D1、HonoでLINE botを作りました はじめに 妻とのお買い物リスト共有にLINEを利用しているのですが、かなり昔に投稿した買いたい物が流れてしまって遡るのが大変という事象が発生していたので、解決するためにLINE botを作成しました。 作成時の流れ、ハマった事、気づいた事などをまとめておきます。 私自身がTypeScriptほぼ初心者かつ、CloudFlare Workers、Cloudflare D1、Honoを利用したことがなく、間違っている部分があるかもしれませんのでご了承くださいませ。 利用技術 CloudFlare Workersが少し前から気になっていたので、下記技術スタックで作成してみました。 CloudFlare Workers CloudFlare D1 Hono LINE Messaging API
Build a Slackbot Before you startAll of the tutorials assume you have already completed the Get started guide, which gets you set up with a Cloudflare Workers account, C3 Open external link , and Wrangler. OverviewIn this tutorial, you will build a Slack Open external link bot using Cloudflare Workers Open external link . Your bot will make use of GitHub webhooks to send messages to a Slack c
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(Rust)からKVを使うチュートリアルをやってみた #Cloudflare | DevelopersIO
どうも！オペ部西村祐二です。 この記事は「Cloudflare のアドベントカレンダー」の4日目の記事です。 以前、下記のようなブログを書きました。そこからCloudflareのサービスに興味がでてきましたので今回、Cloudflare Workers(Rust)からCloudflare Workers KVを使うチュートリアルをやってみました。 今回、やってみたチュートリアルは下記になります。 Use Workers KV directly from Rust · Cloudflare Workers docs Cloudflare Workers KVとは Cloudflareのアプリケーション向けサーバーレス Key-Value ストレージです。 Cloudflare Workers KVは、Cloudflareのグローバルネットワーク内にあるすべてのデータセンターで、セキュアな低レ
GitHub - yusukebe/r2-image-worker: Store and Deliver images with R2 backend Cloudflare Workers.
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
Cloudflare Workersはサーバレスエッジコンピューティングサービスです。そしてデータの永続的保存オプションとして以下が用意されています。 KV : key-value型永続ストレージ R2 : AWS S3互換ストレージ Durable Objects : オブジェクトストレージ D1 : エッジで動作するSQL Liteデータベース(2023/02/05 時点でアルファ版です） Queues : ジョブのキューイング この記事ではKVを使ってJavaScriptで簡単なTodoを作ってみます。記事前半分の土台となっているのはこのブログですが、英語であり、また手順として少し初心者にハードルが高く、Cloudflareのバージョンアップにより画面イメージも変更となっているため再構成しています。 後半部分は少し難易度があがりますが、追加シナリオです。ぜひ挑戦してみてください。 な
JSer.info #637 - Safari 16.4がリリースされました。 WebKit Features in Safari 16.4 | WebKit Safari 16.4 Release Notes | Apple Developer Documentation Beta版時の2023-02-20のJS: Sandpack 2.0、Safari 16.4 Beta、Reactドキュメンタリー - JSer.infoでも紹介しましたが、大量の変更点が含まれています。 margin-trimプロパティ、lh unit、CSS Typed Object Model APIのサポート、Constructable Stylesheetsのサポート Declarative Shadow DOM、EmentInternals、Imperative Slot APIのサポート RegExp l
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
My first Cloudflare Workers AI
【ふーん、”エッジ”じゃん】Cloudflare Workersが0ms Cold Startsを実現するカラクリ
Cloudflare Workers + KV で OAuth2.0 クライアント
2024-03-19のJS: Storybook 8、Nuxt 3.11、Cloudflare Workers + Vitest
Node.js support in Cloudflare Workers
Cloudflare Workers の wrangler.toml に環境変数を書かないで管理する
Eliminating cold starts with Cloudflare Workers
Cloudflare Workers + Node.jsでマークダウン変換APIを動かす
Cloudflare Workers からR2を操作する
Supabase+Remix+Cloudflare Workersで認証
Cloudflare Workers and micro-frontends の疑問点とその調査結果
Cloudflare Workers の無料プランで画像を圧縮する
サーバーレス入門。初めてでもわかるCloudflare Workersの書き方からデプロイまで。| アールエフェクト
Tutorials · Cloudflare Workers docs
okinawa.rb #222 で Cloudflare Workers を紹介しました
Cloudflare Workersを軽く試した感想 - console.lealog();
Cloudflare Workers🔥でもPerl🐫でも動くPerlを書く
2022-09-29のJS: TypeScript 4.9 Beta、workerd(Cloudflare Workers runtime)、Web Almanac 2022
Cloudflare Workers の Cache API は積極的に使いましょう
CloudFlare Workers、Cloudflare D1、HonoでLINE botを作りました
Build a Slackbot · Cloudflare Workers docs
Cloudflare Workers と KV でTodoListアプリを作る
2023-03-29のJS: Safari 16.4、DenoとCloudflare WorkersのNode.js互換性、pnpm 8.0.0