[B! Cloudflare] rikubaのブックマーク

入門Cloudflare Workers

はじめにこの記事はCloudflare Workersの入門記事です。名前は聞いたことがあるけれどCloudflare Workersが何者か知らない方「Cloudflare Workersはサーバーレス・エッジコンピューティングサービスだよ」と説明されて日本語でOKと感じた方 AWSのLambdaやGCPのCloud Runと似たコンセプトのサービスだろうと認識されている方上記に当てはまる方のお役に立てるはずです。開発環境の構築まずは開発環境を構築しましょう。といっても、最新のnode.jsをインストールするだけです。インストールできたらバージョンを確認しておきましょう。補足 v16.13.0より新しいバージョンのnodeが必要になります。記事を読み進めて不具合が発生した場合はnodeのバージョンを確認してください。 Windowsの動作検証はしていません。ここから先の手

rikuba 2023/04/14

Cloudflare

リンク

Hello, Superflare

A full-stack toolkit for Cloudflare Workers. The best parts of D1, R2, Queues, and more—all in one place.

rikuba 2023/03/27

Cloudflare

リンク

Cloud Run東京リージョンにカスタムドメインをマッピングするとどのくらいのレイテンシが発生するのか

調査結果まとめ日本の真ん中あたりから東京リージョンのCloudRunにアクセスしたときのTTFB（Time To First Byte）のざっくり計測結果。詳細は後述。 Cloud Runのデフォルトドメインに直接アクセスした場合: 28msくらい Cloud Runにカスタムドメインをマッピングした場合: 99msくらいさらにCloudflareからCNAMEで指した場合: 114msくらい Cloudflare WorkersでCloud Runのデフォルトドメインをプロキシした場合: 44msくらい Cloud Run + Cloud Load Balancing（CDNなし）: 31msくらい Cloud Runの東京リージョンで「カスタムドメインのマッピング」を利用するとレイテンシが発生する 2023年1月現在、Cloud Runのドキュメントの既知の問題には以下の記載があり

rikuba 2023/03/12

リンク

Cloudflare Pagesの開発でVite使う

Cloudflare Pagesの開発にはwrangler pages devが使えるんだけど、引数にコマンドライン渡せるの知らなかった。引数に渡したコマンドが開いたポートをリバースプロキシしてくれる。つまり、viteコマンドを渡せばViteのdevサーバーをバックエンドにしたWranglerが立ち上がり、裏側ではHMRが効く。これ何が嬉しいって、/functionsでAPIを作った場合にこれまでWranglerとVite2つ立ち上げていたのが1つで済むし、クライアントもAPIサーバーもホットリロード効くのでDXが良い。そして、これを利用すると例えば非常に少ないファイルでReactのSPAが作れる。まずWranglerにコマンドライン渡せるやつはこんな感じ。以下のスクショだと、Viteのdevサーバーが5175で立ったのを検出してWranglerがプロキシしている。ではこれを利用して

rikuba 2023/03/12

リンク

CloudFront+S3構成だった自分のサイトをCloudflare+R2に移行した - Lambdaカクテル

自分のウェブサイト( http://www.3qe.us/ )をCloudFront+S3構成からCloudflareを使った構成に乗り換えたので、ひっかかった点やつまづいた点などをメモしておく。結論としては普通に移行できたが、メールとの兼ね合いでDNSまわりでちょっと配慮が必要な部分があるかも、といった具合。試したいときは全部読んでからチャレンジしよう。ウェブサイトの静的配信にCloudFrontとS3を使っていたモチベーション: ALBのコストが高い Cloudflare 構成 Cloudflare Pages Cloudflare+ Denoflare + R2 修正 R2のstatic hosting機能を直接使う手順 Webサイト追加 R2バケット作成 APIトークン作成 Denoflareでworkerをデプロイする完了まとめオチ参考文献ウェブサイトの静的配信

rikuba 2023/02/11

リンク

Worker Tools

Worker Tools are a collection of TypeScript libraries for writing web servers in Worker Runtimes such as Cloudflare Workers and Deno Deploy. ToolsServicesHow to UseExamplesQuestionsWhat niche do Worker Tools fill?Tools🧭 Worker Router — Complete routing solution that works across CF Workers, Deno and Service Workers🔋 Worker Middleware — A suite of standalone HTTP server-side middleware with TypeS

rikuba 2023/01/03

Cloudflare

リンク

500点出す！ - ゆーすけべー日記

﹁Web Speed Hackathon 2022﹂という﹁非常に重たいWebアプリをチューニングして、いかに高速にするかを競う競技﹂があります。リモート参加で11月1日から27日まで開催されています。ここで言う﹁高速﹂とはCore Web Vitalsのスコアが高いことを言い、Lighthouseのスコアをベースにした500点満点の争いです。 ISUCONのフロントエンド版ですね。以前にも同じ課題で﹁学生向け﹂と﹁社内︵サイバーエージェント︶向け﹂が行われたらしく、まだ500点を出した人はいません。そこで僕は﹁満点を出したい﹂と思い、初日から、いやむしろフライングしていたからその前から頑張ってきました。そして、先日︵17日︶、ついに500点満点を出しました！たぶん、レギュレーションはクリアしている、はずです︵もし違反してたらすいません…︶。自動で行われる﹁Visual Re

rikuba 2022/11/22

リンク

Automate an isolated browser instance with just a few lines of code

Automate an isolated browser instance with just a few lines of code11/16/2022 If you’ve ever created a website that shows any kind of analytics, you’ve probably also thought about adding a “Save Image” or “Save as PDF” button to store and share results. This isn’t as easy as it seems (I can attest to this firsthand) and it’s not long before you go down a rabbit hole of trying 10 different librarie

rikuba 2022/11/17

リンク

お名前.com→Cloudflareに移管して格安＆ストレス無しのドメイン管理をしよう！ | オタク総研

お名前.com→Cloudflareに移管して格安＆ストレス無しのドメイン管理をしよう！

rikuba 2022/08/06

リンク

Cloudflare Workers + KV + honoで簡単な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

rikuba 2022/05/25

Cloudflare

リンク

Cloudflare Workers メモ

前提 Cloudflare Workers は知っていたが最近触って、本番環境へ導入済み。普段は Erlang/OTP を書いてるので JavaScript は専門外自社サービスの本番環境には Cloudflare Workers を導入済み OpenResty はエンタープライズ大規模環境向けで設計/開発経験あり雑感 Cloudflare Workers® ざーっと見た感じ Nginx + Lua (OpenResty) のマネージド、さらに Edge で動かしてくれて、スケールも勝手にしてくれるバージョンという認識。実際 shared.dict / redis の代わりが Workers KV が利用できる。さらにローカル開発環境が充実している、デプロイ後のログ確認も管理画面から簡単に利用できる。 Lua Introducing Cloudflare Workers これを読む

rikuba 2022/05/25

Cloudflare

リンク

Cloudflare R2もいいぞ！ - ゆーすけべー日記

CloudflareがSQLデータベースD1をアナウンスして衝撃を受けましたが、﹁R2もいいぞ！﹂というお話。 R2はS3みたいなストレージエンジンで、Sの前﹁R﹂、3の前の﹁2﹂ともじってて、AWS対抗といえます。で、ちょうどD1がアナウンスされた昨日にベータオープンしました。 A New Hope for Object Storage: R2 enters open beta ﹁ただのストレージだろ﹂とたかをくくってたんですが、使ってみてだいぶよいです。先にまとめると以下の3つのことが言えます。安い DX︵Developer Experience︶がよい Cloudflareの他の製品を組み合わせるとヤバい詳しく紹介します。作ったアプリ R2を評価するために、以前S3をバックエンドにして作ったアプリケーションをR2に置き換えるというのをやりました。そのアプリケーションについては

rikuba 2022/05/13

Cloudflare

リンク

Announcing D1: our first SQL database

This post is also available in Français, Deutsch, Español, 简体中文, 日本語 and 繁體中文. We announced Cloudflare Workers in 2017, giving developers access to compute on our network. We were excited about the possibilities this unlocked, but we quickly realized — most real world applications are stateful. Since then, we’ve delivered KV, Durable Objects, and R2, giving developers access to various types of st

rikuba 2022/05/12

リンク

Next.jsを使う必要がない小規模なSPAの最小構成を考えてみた

はじめに React開発におけるNext.jsのプレゼンスが日に日に増している今日この頃ですが、Next.jsを使う必要がない小規模なSPAを作る場合の型が欲しくなり、色々調べて技術選定をした上で実際に作ってみるところまでやったので、その技術選定理由とセットアップ手順を共有したいと思います。フロントエンドの移り変わりは速いとはいえ、割とホットな技術を選定できたと思うのでしばらくは使っていけそうです︵そう思いたい…︶。前提趣味で小規模なSPAを作る場合を想定ルーティングなしの単機能アプリ SSRが必要ないモーダルなどの動きのあるUIが必要ない技術スタックVite Preact TypeScript Tailwind CSS Cloudflare Pages 技術選定理由Vite少し前まではこういうケースではcreate-react-appを使用していましたが、Viteに置き

rikuba 2021/11/28

リンク

最近知ったCloudflareで実はこんなこともできる集

Argo Tunnel Client(cloudflared)をngrokの代替として使う cloudflaredというArgo Tunnelクライアントを使えば、ngrokのようにローカルサーバを外部に公開することができる。 # localhost:8080 を公開する。実行後に表示されるURLを使ってどこからでもアクセスできる。 cloudflared tunnel --url http://localhost:8080 これだけならばわざわざ乗り換える理由にはならないが、ngrokでは有料でしか使えない機能も無料プランで使える。カスタムドメインの割り当て SSOによる認証 TCPのプロキシセキュアでDDNSのいらないVPNの構築例えば個人で自宅にVPNの環境を作る場合、ルーターのVPN機能を使うか、VPNサーバを立ててDDNSでドメインを自宅のグローバルIPに紐付けるといったや

rikuba 2021/10/27

リンク

Cloudflare Workers 面白い - ゆーすけべー日記

追記 Cloudflare Workers向けのWebフレームワークを作っているので、そちらを是非チェックしてみてください！ honojs/hono: Ultrafast web framework for Cloudflare Workers. Fast, but not only fast. Cloudflare Workers が面白い。面白いので、いくつか簡単なアプリを作ってみた。例えば、そのひとつが Slack Bot で﹁yusukebe++﹂とかやるとインクリメントされるやつ。今回は Cloudflare Workers の面白さについて解説する。より興味のある方がいれば、上記のコードを参考にしてもらうといいだろう。 Cloudflare Workers とは？ Cloudflare の CDN エッジでスクリプトが動くのが Cloudflare Workers。いわゆる

rikuba 2021/10/16

リンク

Web3 — A vision for a decentralized web

This post is also available in 简体中文, 繁體中文, 日本語, and 한국어. By reading this, you are a participant of the web. It's amazing that we can write this blog and have it appear to you without operating a server or writing a line of code. In general, the web of today empowers us to participate more than we could at any point in the past. Last year, we mentioned the next phase of the Internet would be always

rikuba 2021/10/02

リンク

記憶に残らないものをメモするためにMemory Noteという仕組みを書いた

Memory NoteというプログラマブルなTodoアプリのミドルウェアを書きました。ややこしいですが、大雑把に言えばReminder的なTodoリストを扱うREST APIをCloudflare Workersで動かす仕組みです。 Headless Todo Appという単語がしっくりくるのかもしれません。単体だと何ができるのかよくわからないものですが、Todoサービスを自分用に作れる仕組みです。対象ユーザーは主に自分ですが、Memory NoteのREADMEにセットアップ方法や関連するクライアントの実装も公開しています。自分の場合は、iOSのショートカットから音声入力で、メモをGitHub Projectのボードにカードして記録しています。この記録したメモを、iOSのWidgetsとしてホーム画面に出したり、AlfredのHotKeyでワンタッチで表示したり、部屋に電子ペー

rikuba 2021/09/27

“Headless Todo App”

リンク

Cloudflare待機室

本日、Cloudflare待機室をご紹介できることをうれしく思っております！まず、プロジェクトFair Shotという新プログラムで選ばれたお客様に最初にご利用いただけます。このプログラムは、新型コロナワクチン接種の圧倒的な需要によって、予約登録Webサイトが機能しなくなっている問題の解決を目的としています。BusinessプランとEnterpriseプランのお客様への一般提供については、近い将来行う予定です。でも、待機室が楽しみってどういうことでしょうか？大半の方が、待機室がどういうところかをご存知のはずです。そこにいるということにうれしい要素は、ほぼありません。私たちがよく知っている待機室は、医師の診察を受ける前にいる部屋です。そうです、予約していても、医師に待たされたり、患者が遅れたりすることがありますね。医師は一度に1人の患者しか診ることができないため、患者が順番待ちをするという

rikuba 2021/08/25

リンク

GitHub - lspgn/edge-sql: Cloudflare Workers providing a SQL API

I had an idea. Here's a little backstory. Many services provide a REST API on top of a SQL database. For certain datasources, flexibility in terms of queries is key. Often those use-cases are dashboard prototyping, for example with Grafana. This data is usually read-only statistical datasets where the user needs to run many queries in order to troubleshoot an issue or just find the best visualizat

rikuba 2021/01/21

リンク

はてなブックマーク

タグ

関連タグで絞り込む (18)

Cloudflareに関するrikubaのブックマーク (23)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

今週のはてなブックマーク数ランキング（2024年7月第1週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス