Hono + htmx + Cloudflareは新しいスタック
この記事は以前7月に自分で書いた「Hono + htmx + Cloudflare is a new stack」という記事を一部修正し、訳したものです。 Hono + htmx + Cloudflareは新しいスタック 以前、バックエンドエンジニアだった身からすれば、Reactは複雑だと感じることがあります。さらに（私はフレームワーク開発者なのですが）フレームワーク開発者にとってはハイドレーションの仕組みを作ることは厄介です。しかし、しばしばReactを使うことになります。 Reactの優位な点の一つは「JSX」です。最初見た時、JSXは奇妙に思えました。「なんでJavaScriptの中にHTMLのタグが入っているんだ！」。しかし、一度慣れると、JSXは柔軟で、書きやすいことに気づきました。 今日はこれから、JSXをサーバーサイドのテンプレートとして使う技術スタックを紹介します。これはつ
最近のCloudflare Workers - ゆーすけべー日記
最近の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
記事中のURLプレビューを実装した (Cloudflare Pages Functions) | Marginalia
記事中のURLプレビューをiframeで表示するためのエンドポイントをCloudflare Pages Functionsで実装した。実はこれまで長らくはてなブログのembed APIを勝手に借りていた。倫理的によろしくない面もあったり、パフォーマンスや信頼性の面でもセルフホストしたいと思っていたが、着手するのを先延ばしにしていた。別に技術的に困難なポイントがあったわけではないが、備忘録としてやったことを書く。 /embed エンドポイントの作成このブログはCloudflare Pagesでホスティングしている。Cloudflare PagesのFunctions機能は、デプロイするレポジトリの /functions ディレクトリの中に配置したスクリプトを動的なWorker関数として呼び出せるようにしてくれる。 今回はこの機能を使って、 /functions/embed/index.tsx
学園祭で売上をリアルタイムに公開するサイトを雑に作ると盛り上がる - いなにわうどん
先日の学園祭で友人のオタク達とやきそばを焼いて原価ギリギリで売ったところ予想以上の盛況でした*1。色々と工夫点はあったのですが、その一つとして売上杯数を Web 上で登録してリアルタイムで雑に public internet に公開するという試みをしてみところちょっと盛り上がったため、その経緯を書いていきたいと思います*2。 つくったもの 会計を登録するシステムとその集計結果を表示する Web サイト（＋付随する簡単な API）を作りました。フロントエンド側のコードは GitHub 上に公開しています*3。 github.comサイトは以下のページから構成されます。フロントエンドはすべて public になっているため、簡易的な認証として API 側で Authorization ヘッダ内のトークンの有無を検証し、不正なトークンが送付された場合は 401 を返す設計としました*4。 トーク
Post Mortem on Cloudflare Control Plane and Analytics Outage
Post Mortem on Cloudflare Control Plane and Analytics Outage Loading... This post is also available in 繁體中文, Français, Deutsch, Español, Português, 한국어, 简体中文 and 日本語. Beginning on Thursday, November 2, 2023, at 11:43 UTC Cloudflare's control plane and analytics services experienced an outage. The control plane of Cloudflare consists primarily of the customer-facing interface for all of our service
Cloudflare Fonts試してみた
利用方法は非常に簡単で、CloudflareのWebコンソールからトグルをオンにするだけ。 オリジンの内容を変更したりなどの作業は一切不要。 サイドバーの Speed > Optimization を選択し、Content Optimization のタブの中にトグルが存在している。
Cloudflare Workers Browser Rendering API を使ってスクリーンショットを R2 に保存する - Qiita
Cloudflare Workers Browser Rendering API を使ってスクリーンショットを R2 に保存するcloudflareCloudflareWorkers Workers Browser Rendering API とは Automate an isolated browser instance with just a few lines of code This is why we’re excited to announce a private beta of the Workers Browser Rendering API, improving the browser automation experience for developers. With browser automation, you can programmatically do any
Cloudflare functions with Scala.js
Indoor VivantsAnton Sviridov. I love reinventing the wheel and I usually use Scala for that. TL;DR We are deploying an app to Cloudflare using Scala.js We are using ScalablyTyped We are using Scala 3 heavily Code on Github Deployed app Cloudflare API bindings Welcome to the "Put ma Scala on yo cloud" series I want to say that I'm kicking off a blog series, but even I don't believe that. If I did,
Cloudflare Tunnel を使って Kubernetes の Service を外部からアクセスできるようにする - hatappi.blog
背景 AWS で Kubernetes クラスタを運用する中でサービスを外部に公開したい時に思いつく方法が ALB など AWS から提供される load balancer を使用することだと思います。今回は諸事情により ALB を使えないため代わりの方法を探していました。 やりたいこと HTTPS なエンドポイントを公開する Pod を外から ALB などを使わずアクセスできるようにしたい。 やったこと 今回は Cloudflare Tunnel を使いました。Cloudflare Tunnel は Cloudflare が提供するゼロトラストサービスの１つです。オリジンの public IP を公開しないようにすることで、オリジンへの意図しない直接リクエストや内部のアプリケーションなどを外に公開することなく特定のアカウントからアクセスできるようにすることができます。 仕組みとしては c
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スタックにアクセスする - console.lealog();
端的にいうと、 フロントエンドはSvelteKitやらモダンなやつで組んで Cloudflare Pagesにデプロイしたい そしてKVやD1やらも使いたいし ローカルでも実際の値を参照して開発したい つまり、サーバーレンダリングやAPIルートを実装するときに、既存のスタックに保存してある値を使いたいという話。 個人的にはあるあるのケースで、あらゆるものをCloudflareのエッジで完結させる未来を待つなら、なおさら。 ローカルから実際のKVやD1にアクセスするには 現状、これをやるには2通りの方法しかない。 REST API `wrangler dev --remote` まず前者。これはいわずもがな、HTTP経由でアクセスできる。 ただ、Cloudflare Pagesにデプロイするなら、Workersで動作するコードからアクセスするなら、あえて1クッションはさむ理由はなさそう。 つ
Cloudflare、分散SQLiteデータベース「Cloudflare D1」の性能を10倍以上高速に、ストレージバックエンド強化で。任意の状態にいつでも戻せる機能も
Cloudflare、分散SQLiteデータベース「Cloudflare D1」の性能を10倍以上高速に、ストレージバックエンド強化で。任意の状態にいつでも戻せる機能も Cloudflareは、同社のエッジロケーションでマネージドサービスのSQLiteを提供する「Cloudflare D1」をアップデートし、大幅な性能向上と機能向上を行ったことを発表しました。 We've been heads down iterating on D1, and we've just shipped a major new version that's substantially faster, more reliable, and introduces Time Travel: the ability to restore a D1 database to any point in time. Read
D1: We turned it up to 11
This post is also available in Deutsch, 简体中文, 日本語, Español, Français. We’re not going to bury the lede: we’re excited to launch a major update to our D1 database, with dramatic improvements to performance and scalability. Alpha users (which includes any Workers user) can create new databases using the new storage backend right now with the following command: $ wrangler d1 create your-database --ex
Cloudflare Tunnel でローカルの開発環境を公開する
はじめにLINE Messaging API や Slack/Discord の Slash Command など、Webhook ベースの API を利用する場合、 ローカルに建てた Web サーバーを外部からアクセスできるようにする必要があります。 今までは、ngrok などのツールを利用していましたが、 Cloudflare Tunnel でも同様のことができるということで、 今回はそれを試してみました。 Cloudflare Tunnel とはCloudflare Tunnel は、プライベートなネットワークと Cloudflare の Edge Network を接続するためのツールです。 プライベートなネットワークと Cloudflare の Edge Network を接続することで、プライベートなネットワークを公開せずに、Cloudflare を通して外部からアクセスできる
Cloudflare Workersで手軽にRESTful APIを公開する - kasuのブログ
今回は、OpenAPI Specification から良い感じのドキュメントサイトを提供してくれるサービス bump.sh を見つけたので、RESTful API を用意して試してみます。 ドキュメントサイトがあることで、API が公開されていることがより分かりやすくなるでしょう。 こちらはスキーマの差分を解析するツール API Diff · Powered by Bump.sh を提供しており、今後 GraphQL もサポートされるそうなので楽しみです。 RESTful API まずは JSON を返すだけの簡単なAPIを作りたいと思います。 軽量なアプリケーションとなるので Cloudflare Workers をデプロイ先とします。 手書きしたくない ゼロから書くので定義ファイルとサーバーサイドの実装どちらも手書きすることはなるべく避けたいところです。 Node.js では pat
Cloudflare R2 で静的サイトを公開する - 酢ろぐ！
CloudFront + S3 で https://ch3cooh.net/ をホストしている。このサイトでは単に welcome! としか表示しない。特に何をやっているわけではなく、AdMob で規定されている 「アプリ向けの認定販売者宣言システム（app-ads.txt）」置き場である。そのためできる限りコストを掛けずに運用したい。 ch3cooh.netドメインは先日 AWS Route 53 から Cloudflare へ移管したので、CloudFront + S3で運用している静的サイトも Cloudflare + Worker + R2 に移行することにした。 R2 にバケットを作成して、htmlファイルをアップロードする マイアカウントページで API Key を作成する Denoflare をインストールする Denoflare 経由で Worker を作成する 参考ページ
CloudflareがTwitterのライバル・Mastodon用互換サーバーの「Wildebeest」を発表
Cloudflareが、自社のクラウド上に構築されたオープンソースでデプロイが容易なSNSプロトコル「ActivityPub」および「Mastodon」の互換サーバー「Wildebeest」を発表しました。 Welcome to Wildebeest: the Fediverse on Cloudflare https://blog.cloudflare.com/welcome-to-wildebeest-the-fediverse-on-cloudflare/ 2023年2月9日、Cloudflareがスーパークラウド上に構築できるオープンソースのActivityPubおよびMastodon互換サーバーであるWildebeestを発表しました。 Today we're announcing Wildebeest, an open-source, easy-to-deploy Activi
Cloudflare R2がGA(一般公開)されてパブリックアクセス&独自ドメイン設定が可能になりました！ | DevelopersIO
どうも、ベルリンオフィスの小西です。 今週はCloudflareのGA Weekですね。 それに伴ってこの度、ベータ版だった Cloudflare R2 もGA(一般公開)されました。 Cloudflare R2とは Cloudflare R2はAmazon S3互換のオブジェクトストレージサービスで、Cloudflare Workersから操作できるWorkers API、S3互換の（つまり CreateBucket や ListObjects などが使える）API、どちらもサポートしています。 エグレス料金はかからず、下記3つの要因のみで費用が決まる価格設定が魅力です（無料利用範囲も大きい）。 ストレージ … $0.015 / GB (月額) クラスA操作 … $4.50 / 100万回 クラスB操作 … $0.36 / 100万回 今回のGAとともに「Public Access」と「
Public buckets · Cloudflare R2 docs
Create public buckets on R2Public Bucket is a feature that allows users to expose the contents of their R2 buckets directly to the Internet. By default, buckets are never publicly accessible and will always require explicit user permission to enable. Public buckets can be set up in either one of two ways: Expose your bucket as a custom domain under your control.Expose your bucket as a Cloudflare-m
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Deploy a Browser Rendering Worker · Browser Rendering docs