Hono + htmx + Cloudflare is a new stack Jul 21, 2023 As a former backend engineer, I sometimes find React complex. Moreover, as a framework developer, creating a hydration mechanism can be troublesome. But we often end up using React. One of the main advantages of using React is JSX. At first, JSX seems strange - “Why are HTML tags in JavaScript!!!” However, once I get used to it, I find that JSX
Yesterday, on July 19, I hosted an event called ”Workers Tech Talks #1” in Tokyo. It’s a developer meetup for developers by developers, particularly aimed at those interested in Cloudflare Workers. As a Developer Advocate at Cloudflare, this was - exactly what I wanted! Let’s dive into the details of the event. Me? Before we get started, let me introduce myself. I’ve been working as a Developer Ad
Cloudflare Workers + R2で低コストで画像配信を移行した話/cloudflare_workers_r2_migration
Workers Tech Talks #1 #workers_tech https://workers-tech.connpass.com/event/287490/ で発表した 「Cloudflare Workers + R2で低コストで画像配信を移行した話」の資料になります。 元ネタになった記事は以下になります。 https://qiita.com/teckl/items/4314aa210a689d08e759
Workers Tech Talks #1 で話した内容です。 https://workers-tech.connpass.com/event/287490/
最近、週末の趣味プロジェクトとして Cloudflare Workers（と Vercel Edge Functions）向けの Slack アプリ開発フレームワークを作りました。 私は普段 Slack の Developer Relations Engineer として Qiita の Slack チームの公式な記事を書いているのですが、この Cloudflare Workers 向けのものは業務で開発した公式ツールではなく、完全に個人プロジェクトなので、Qiita の Org ではなく Zenn に個人的な記事として書くことにします。 ・・・そして、書き終わってみると、随分と長い記事になってしまいました。興味のあるところだけでもぜひ読んでみてください。 この記事で説明するもの この記事では、Slack アプリ開発の基本と、以下のライブラリの使い方について解説していきます。 「Slack
Hori Blogフリーランスでバックエンドエンジニアとして活動している Ryota Hori のブログです。 最近はテック系記事より雑記ブログ気味。 ご縁がありまして「しいたけ占い公式サイト」の開発に携わりました。 比較的シンプルなページ構成ですが、高トラフィックを快適に提供する Web サイトとして色々と工夫したので記録に残しておきます。似たような構成の Web サイトを構築する際の参考になれば幸いです。 （技術的開示および実績公開に関してはしいたけ.さんより許諾を頂いております。ありがとうございます。） 「しいたけ占い公式サイト」とは 占い師であるしいたけ.さんが占いコンテンツを連載する公式サイトです。 しいたけ占いの公式サイト。占い師しいたけ.が 12 星座別の運勢をオーラカラーと共に診断。毎週月曜日更新の週刊占いと、上半期、下半期占いをお楽しみいただけます。 しいたけ占い公式サイ
Webhook的に ActivityPub に投稿する実装を作った - castaneaiのブログ
CDNやセキュリティサービスなどを提供しているCloudflareのマシュー・プリンスCEOが、2023年1月から7月までのCloudflareのDNS順位ランキングを公開し、Twitterのトラフィックが減少していることを示しました。 Twitter traffic tanking. https://t.co/KSIXqNsu40 pic.twitter.com/mLlbuXVR6r— Matthew Prince ???? (@eastdakota) プリンスCEOがTwitterとThreadsに投稿したDNSサービスランキングのグラフによると、2023年1月時点で32位だったTwitterは2023年4月までは36位との間を行ったり来たりしていますが、2023年4月初頭に32位を記録した後はだいたい35位と37位の間を往復するようになり、とうとう2023年7月には38位と40位の間
Cloudflare Pagesの`{name}.pages.dev`ドメインに自分だけアクセスできるようにアクセス制限をつける手順 Cloudflare Pagesの {name}.pages.dev ドメインに自分だけアクセスできるようにアクセス制限をつける手順です。 アプリケーション側の変更は不要で、Cloudflare Accessの機能を使ってアクセス制御ができます。 カスタムドメイン(Cloudflare DNS)を設定している場合の方法は色々ありますが、デフォルトで用意されている {name}.pages.dev ドメインに対して設定する手順についてです。 この手順がかなりややこしいので、設定方法メモ書きです。 プレビューブランチへのアクセス制御の有効化手順 Cloudflare Pagesでページを作る Settings -> Access policyでEnable ac
Google Analytics 4移行対策、Publickeyの場合。Simple AnalyticsとRanklet4を導入し、GA4も使うことに
Google Analytics 4移行対策、Publickeyの場合。Simple AnalyticsとRanklet4を導入し、GA4も使うことに Google AnalyticsはPublickeyのようなブログに限らず、個人や組織の公式サイトやECサイト、そしてWebアプリケーションなど、さまざまなWebサイトで使われているアクセス分析ツールのデファクトスタンダードといえます。 そのGoogle Analyticsが今月（2023年7月）から、大幅に機能変更が行われた新バージョン「Google Analytics 4」（以下、GA4）に移行し、これまでのGoogle Analytics（通称UA：Universal Analytics）は廃止されました。 UAも、新しくなったGA4も、無料で利用できる大変ありがたいツールであり、こうした有用なツールを無料提供しているGoogleには
パフォーマンスの高みを目指せ！ CDNのエッジサーバーでSSR - CloudflareでViteを動かす手順 ウェブサイトの高速化はあらゆるウェブ制作者の悲願です。1ミリ秒でも早くコンテンツを届けるために、エンジニアたちは血と汗と涙を流します。しかし、ウェブサイトの高速化は、ウェブサイトの構成要素を最適化するだけでは実現できません。 大きな課題として次の2つが挙げられます。 コンテンツの転送量が大きく、表示までに時間がかかる 物理的なクライアント/サーバー間の距離が遠く、転送に時間がかかる これらの課題を解決するため、様々な技術が発展してきました。今回はその中でもSSR（サーバーサイドレンダリング）と、CDN（コンテンツデリバリーネットワーク）に注目します。 本記事ではSSRとCDNの概念について解説し、実際にCloudflareというCDNからコンテンツを配信する方法を紹介します。フレ
IntroductionIn this article I describe a simple architecture for an early stage SAAS. As a solo founder, I report some choices made to launch Feelback, a small-scale SAAS for collecting users signals about any content. This article will cover the technical side of designing and running a simple SAAS. It will also include some details about coding and evolving the initial feature set ready at launc
はじめに こんにちは！株式会社Rivine のつかもとです！ 普段はエンジニアとして、主にフルリモートの開発支援案件に従事しながら Rivine の取締役としても日々粛々と働いております。 前回の記事では、 Hugo のブログ開発について執筆しましたが、 今回は、弊社ホームページの利用技術でもある 「Cloudflare Pages」 を使って ハンズオン形式にて、前回の記事で作成した Hugo のブログを公開してみたいと思います。 ※ 本記事タイトルの「5分もあれば十分だ」という表現について ※ 5分もあれば十分だ という少しネタを交えた表現をしておりますが、トータルの作業時間については、各開発環境やネットワーク環境、作業スピードによって変動するかと思います。 あくまで、筆者が本記事の手順を滞りなく、スムーズに作業した上での 目安時間 だとご認識いただけますと幸いです。 今回公開するブロ
相次ぐCDNエッジのJSランタイム登場は「エッジミドルウェア」や「エッジプロキシ」と呼ばれる新たな仕組みを実現する［PR］
相次ぐCDNエッジのJSランタイム登場は「エッジミドルウェア」や「エッジプロキシ」と呼ばれる新たな仕組みを実現する［PR］ CDNのエッジロケーションでJavaScriptランタイムを提供するサービスが相次いで登場しています。 代表的なものとしてCDNプロバイダのCloudflareやFasltyが提供する「Cloudflare Workers」や「Fastly Compute@Edge」などがあり、最近ではCDNプロバイダ以外からも「Deno Deploy」「Vercel Edge Runtime」などが登場しています。 これらに共通するのは、世界中に分散したデータセンターで稼働するサービスであること。そして、サーバサイドJavaScriptの実行環境が用意されていることです。 Vercelが提唱するエッジミドルウェア 現在インターネット上でサービスを提供する手段としてエッジロケーション
ローカルでのフロントエンド開発時でも、実際のCloudflareスタックにアクセスする - console.lealog();
端的にいうと、 フロントエンドはSvelteKitやらモダンなやつで組んで Cloudflare Pagesにデプロイしたい そしてKVやD1やらも使いたいし ローカルでも実際の値を参照して開発したい つまり、サーバーレンダリングやAPIルートを実装するときに、既存のスタックに保存してある値を使いたいという話。 個人的にはあるあるのケースで、あらゆるものをCloudflareのエッジで完結させる未来を待つなら、なおさら。 ローカルから実際のKVやD1にアクセスするには 現状、これをやるには2通りの方法しかない。 REST API `wrangler dev --remote` まず前者。これはいわずもがな、HTTP経由でアクセスできる。 ただ、Cloudflare Pagesにデプロイするなら、Workersで動作するコードからアクセスするなら、あえて1クッションはさむ理由はなさそう。 つ
実践エッジユースケース
AWS Dev Day 2023 Tokyo 2023-06-22 Yusuke Wada Developer Advocate @ Cloudflare
Today, Cloudflare is very excited to announce full support for HTTP/3 Extensible Priorities, a new standard that speeds the loading of webpages by up to 37%. Cloudflare worked closely with standards builders to help form the specification for HTTP/3 priorities and is excited to help push the web forward. HTTP/3 Extensible Priorities is available on all plans on Cloudflare. For paid users, there is
最適化はCDNがやればいい
エッジで輝くフロントエンド
Cloudflare Meetup #1
こういう作業は早めにやっておくのが吉ということで、サービス譲渡が発表されたGoogle DomainsからCloudflareにドメインを移管することにしました。
2023年6月16日、今朝のIT界隈はこちらのニュースで持ちきりでした。 Googleさんが直々に提供している人気のドメインホスティングサービス、Googleドメインが事業売却となるということです。 かくいう私も自分の個人用ドメインをGoogle Domainsでホストし、個人用メールアドレスや技術検証などに活用しているので引っ越しを検討しなければなりません。色々調べてまとめてみました。 今回の事業売却の影響は？ Webニュース等でも紹介されているとおり、以下です。 現行ユーザーが直ちに対応を行う必要はない 2023年後半をめどにSquarespace社へドメインや顧客を移管予定 移管完了から少なくとも1年間は現在の価格を尊重 ただし現Squarespaceのサービス価格相場を比較すると、Googleドメインの倍ぐらいの価格設定になってしまうリスクもありそうです。 他社の主なドメインサービ
概要 私は個人でWebサイトやWebサービスを色々公開しております。 この度、個人開発でWebサービスを運用するときにCloudflareを利用すると様々なリスクを無料でヘッジできるので事例を紹介します。 今回移行してみたサイトの1つはこちら。多分、瞬間的に表示されると思います。 個人開発サービスの問題 費用をかけられない お金をかければWAFや計算処理の高いサーバやコンテナなどの環境を使えますが、テストで開発したサービスや収益化するかどうかわからないサービスをたくさん運用することになるので固定費は可能な限り抑える必要があります。 いかに安く安定的にサービスを提供できるかは腕の見せどころでもあります。 複数サービスがダウンする可能性 固定費を抑えるために1ホストにいろいろなサービスを動かすことが多いと思います。 よって、1つのサービスに対してDoS攻撃や突発的にWeb上でバズって大量のトラ
こんにちは！DPE（Developer Productivity Engineering）チームの高畑（Sorarinu (@int_sorarinu) / Twitter）です。 最近は月一のキャンプを楽しみに日々を生きていて、栃木県のとあるキャンプ場が最高すぎてリピートしまくっています。 今回は、ビザスクのメンテナンスを行う際の仕組みを刷新したお話をしてみようと思います！ これまでのメンテナンスの仕組み ビザスクではアプリケーションの定期メンテナンスを行う際に「メンテナンスモード」へと移行して、メンテナンス期間中にアクセスされた場合にメンテナンス画面を返すようにしています。 その際、アドバイザー用の画面、クライアント用の画面、社内の管理画面のそれぞれでメンテナンス用のインスタンスをデプロイ・トラフィックの切り替えを行なっていました。 メンテナンスの画面を返すだけであればこの仕組みで問題
Starting today, Cloudflare’s API Gateway can protect GraphQL APIs against malicious requests that may cause a denial of service to the origin. In particular, API Gateway will now protect against two of the most common GraphQL abuse vectors: deeply nested queries and queries that request more information than they should. Typical RESTful HTTP APIs contain tens or hundreds of endpoints. GraphQL APIs
結論 Cloudflare WorkersでGraphQLサーバを立てて普通に動く TCPでのデータベース接続も問題ない（ベータなので使ってると何かあるかもしれないが） Node.js互換は完全ではないので、Node.jsが必要な処理はオリジンサーバを用意するのが吉 動機 Cloudflare WorkersはCDN上のプロキシやRemixやNext.jsのレンダリング用のバックエンドとして使うというようなことが多いです。フロントエンドからデータ取得や更新するためのAPIとなると別のバックエンドサーバを立てて、構築するのがほとんどだと思います。 自身も漏れなくそのパターンでNode.jsでバックエンドサーバを立てることが多いですが、そうなると簡単に建てれるCloud Runを初手で選ぶのですが、Cloud Run自体は素晴らしいサービスなんですが、更に欲が出てくるのが人間です。 デプロイを
英会話LINE BotのCloudflare Queues利用部分をwaitUntil APIで書き直す - $shibayu36->blog;
OpenAI APIで英会話LINE Botを作る with Hono + Cloudflare Workers + Queues + D1 - $shibayu36->blog; を書いたら、id:mechairoi さんからwaitUntilが使えるんではと教えてもらった。確かにwaitUntilで書き直せればQueues依存がなくせるため、コンポーネントの複雑度もコストも抑えられる。 実際にやってみるとかなり簡単にできたのでメモしておく。 waitUntil APIとは https://developers.cloudflare.com/workers/runtime-apis/fetch-event/#waituntil The waitUntil command extends the lifetime of the "fetch" event. It accepts a Pro
OpenAI APIで英会話LINE Botを作る with Hono + Cloudflare Workers + Queues + D1 - $shibayu36->blog;
lizod: 1kb 未満の zod の精神的後継
CloudflareのDeveloper WeekではAI基盤のConstellationや、HTTP以外のTCP接続が可能になるconnect()、PlanetScaleやSupabaseなどのデータベース統合など魅力的な製品の紹介やアップデートがありました。これらを活用することでよりフルスタックなアプリケーションをエッジ上で構築する事が可能になります。 また、Cloudflareに限らず、FastlyでもCompute@Edge上でNext.jsが動いたり、先日KVストアが導入されたDeno Deployではエッジ上でリッチなアプリケーションをつくるこができます。 一方、CDNのエッジで実行されることの醍醐味のひとつに「オリジンを活かす」ことがあります。オリジンに対しての「リバースプロキシ」です。「フルスタック」に目が行きがちですが、エッジコンピュートはリバースプロキシに新しい風を吹き
CloudflareのDeveloper Week 2023の気になった発表のまとめ - console.lealog();
今年も祭りの季節がやってきましたね。 Developer Week 2023 | Cloudflare というわけで、今年も個人的に気になったものを。 （発表されるのがだいたいJST深夜かつ最後が金曜日なので、どうやっても公開するの週明けになるんよな・・） Introducing Constellation, bringing AI to the Cloudflare stack https://blog.cloudflare.com/introducing-constellation/ Workersで機械学習のモデルが動かせるようになったとのこと プライベートβ サポートされているランタイムで動作するモデルであれば、自作のものでも、用意されてるものでもOK 現状はONNX形式のみ対応 https://github.com/onnx/models https://github.com/d
ヘッドレスブラウザ＋Puppeteerが使える「Cloudflare Workers Browser Rendering API」がオープンベータに
ヘッドレスブラウザ＋Puppeteerが使える「Cloudflare Workers Browser Rendering API」がオープンベータに Cloudflareは、同社のサーバレス基盤であるCloudflare Workersを通じてヘッドレスブラウザとそれをコントロールするPupeteerを呼び出せる「Workers Browser Rendering API」（以下、Browser Rendering API）のオープンベータを発表しました。 これまではBrowser Rendering APIはクローズドベータとして一般ユーザーには開放されていませんでしたが、オープンベータ化によりウェイトリストに登録したユーザーから利用できるようになると説明されています。 The Workers Browser Rendering API allows developers to prog
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
Database Integrationsを発表：数回クリックして、Workers上のNeon、PlanetScale、Supabaseに接続できます
Database Integrationsを発表：数回クリックして、Workers上のNeon、PlanetScale、Supabaseに接続できます2023/05/16 開発者としての最高の喜びのひとつは、自分のアイデアが実現するのを見ることです。迅速に移行したい場合、Cloudflareの開発者プラットフォームは、数分以内にアプリケーションを0から100にするためのツールを提供します。 開発者の士気を落とすことの1つは、次のような質問です：「Workers で使用できるデータベースは何ですか？」です。Workersが接続できるデータベース、Workersと互換性のある適切なライブラリやドライバを見つけること、定型文の例を当社の開発者プラットフォームで実行可能なものに変換するなどという場合に、開発者はつまずきます。 本日、Database Integrationsを発表しました–Work
The Workers Browser Rendering API allows developers to programmatically control and interact with a headless browser instance and create automation flows for their applications and products. Since the private beta announcement, based on the feedback we've been receiving and our own roadmap, the team has been working on the developer experience and improving the platform architecture for the best p
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
How Cloudflare is powering the next generation of platforms with Workers
How Cloudflare is powering the next generation of platforms with Workers05/18/2023 We launched Workers for Platforms, our Workers offering for SaaS businesses, almost exactly one year ago to the date! We’ve seen a wide array of customers using Workers for Platforms – from e-commerce to CMS, low-code/no-code platforms and also a new wave of AI businesses running tailored inference models for their
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Hono + htmx + Cloudflare is a new stack - Yusuke Wada
Cloudflare Workers Tech Talks #1 - Yusuke Wada
gRPC Client on Cloudflare Workers
Cloudflare Workers で Slack アプリを動かす方法
Cloudflare活用術の第一歩、『Cloudflare Workers+Pagesで旅行メモのサイトを作ってみよう！』発売／技術の泉シリーズ 7月の新刊【Book Watch/ニュース】
「しいたけ占い公式サイト」を支える技術 | Hori Blog
Twitterのトラフィック減少をCloudflareのCEOが証言
自宅サーバーにお一人様Misskeyサーバーを構築してみた
Cloudflare Pagesの`{name}.pages.dev`ドメインに自分だけアクセスできるようにアクセス制限をつける手順
パフォーマンスの高みを目指せ！ CDNのエッジサーバーでSSR - CloudflareでViteを動かす手順 - ICS MEDIA
Cloudflare Zero Trust〜VPN置き換えについて〜 | DevelopersIO
Architecture of an early stage SAAS | Feelback Blog
【Cloudflare Pages】ブログを公開したい？...5分もあれば十分だ
Introducing HTTP/3 Prioritization
Google DomainsからCloudflareにドメインを移管した - ぷらすのブログ
Googleドメイン売却!? 良さげな移行先サービスを比較してみた - Qiita
個人開発のWebサービスをCloudflareに載せてみた【無料でここまでできる】
メンテナンスの仕組みを刷新してみた件 - VisasQ Dev Blog
Protecting GraphQL APIs from malicious queries
【ほぼ0円！】Hugo + Cloudflare Pages + AWS でホームページをリニューアル
現状Cloudflare WorkersでGraphQLサーバを構築するならコレ
Cloudflare Workersプロキシパターン
Workers Browser Rendering API enters open beta
D1: We turned it up to 11