はてなブックマーク

2023年はエッジコンピューティングとデータベース接続の分野において、Cloudflare Workers(以下CFWorkers)が中心となり多くの進歩が見られました。本記事では、この1年間の重要なトピックと、それがどのように開発体験を変えたかを振り返ります。特に、CFWorkersのエコシステムの成長、機能拡張、およびDB接続の課題と解決策に焦点を当てています。 エコシステムの進化とCFWorkers上からのDB接続需要の増加 2021年頃から2022年にかけて、いくつかのWebアプリケーションのフレームワークやエコシステムが、CFWorkers上での動作やデプロイをサポートしたことがきっかけとなり、エッジランタイム・コンピューティングの注目を集めるようになりました。 Remix Remixは、フロントエンドのフレームワークであり、エッジランタイムへのデプロイをサポートしています。 2

利用方法は非常に簡単で、CloudflareのWebコンソールからトグルをオンにするだけ。 オリジンの内容を変更したりなどの作業は一切不要。 サイドバーの Speed > Optimization を選択し、Content Optimization のタブの中にトグルが存在している。

はじめに この記事は、Cloudflare が提唱する Fragment Piercing (フラグメント・ピアシング) の記事(Cloudflare Workersによるマイクロフロントエンドの段階的な採用)を読んだ筆者が、そこから得たアイデアとそれをPoC（概念実証）している「コンポーネント配信システム」についてドキュメント化したものである。 この記事で取り上げられているシステムなどは、まだ実用段階に達していないものが多く含まれている。 デザインシステムとコンポーネントの配信 近年、デザインシステムを構築したり公開する企業や組織が増えている。 「デザインシステム」の価値は、Storybookのドキュメントに次のように示されている。 デザインシステムは複数のプロジェクトを横断してチームが複雑で、丈夫で、アクセシビリティの高いユーザーインターフェースを構築するための再利用可能な UI コン

フォームを作成する場合、最近は個人的には react-hook-form と zod を使用して実装することが多い。 この2つの組み合わせに関する解説は他の方の記事に譲る。 こんな感じで、簡単にスキーマの定義とバリデーションの設定ができて、フォームの各フィールドと組み合わせることが可能である。 const schema = z.object({ username: z .string() .min(3, "3文字以上で入力してください") .max(10, "10文字以上で入力してください"), email: z.string().email("メールアドレスの形式で入力してください"), favoriteNumber: z .number() .max(10, "10以下の数字を入力してください") .min(1, "1以上の数字を入力してください"), }); const Form =

GCP の Cloud Run で Node のサーバを稼働させ、Cloud Logging にログを出力して、更にエラーが発生したときは Error Report で通知を受けるというような構成を組む際に、 どのようなケースで「重要度」が正しくマークされるのか どのような形式でログを吐けば Error Report が自動生成されるのか ドキュメントを読んでも、これらのことがいまいちわからなかったので実験してみました。 また、標準の console だけではなく、Node の主要なロガーライブラリーのうち、どれが一番 Cloud Logging と Error Report との相性が良いのかも実験から導き出しました。 前提 ロギング方法 Cloud Run で express サーバを用意し、下記のように文字列と Error をロガーで標準出力および標準エラーに出力 app.get("

この記事は Cloudflare Workers and micro-frontends: made for one another のブログを理解するためのに Qwik の基本的な概念について理解することを目的とした記事です。 上記ブログに関しては、@laiso さんがわかりやすく解説してくれています。 本記事が、これらの記事やブログを読んで Qwik に付いて深堀りしたくなった方のお役に立てれば幸いです。 また、後日私の方でも、上記記事の解説や補足を何かしらの方法でまとめたいと思っています。 2022/10/26 追記 上の宣言通り、スクラップにまとめました。 What is Qwik ? Qwikは builder.io によって作られた、フロントエンドライブラリです。 SSRをデフォルトとし、Cloudflare Workers などでのエッジレンダリングにも対応しています。 js

モチベーション Turborepoを使用する目的はいくつかありますが、リモートキャッシュが一番大きいと個人的には思っています。 リモートキャッシュを使用することで、CIの高速化やチームメンバーのローカルでの開発体験向上にもつながります。 リモートキャッシュを導入する最も簡単な方法は、Vercelを利用することですが、チームでとなるとアカウント管理や料金など問題が発生します。 アカウントレスなチーム専用のリモートキャッシュサーバをセルフホストし、上記の問題を解消することが本稿のモチベーションです。 なお、Turborepoの紹介や導入・使用方法に関しては説明を省きますので、詳しく知りたい方は公式サイトやドキュメント、下記のmizchiさんの記事などを参照してください。 リポートキャッシュサーバのセルフホスト 公式ドキュメントでVercel以外のリモートキャッシュサーバとの連携について明記され

この記事は何？ これは「Next.jsのISRを独自に実装する」という記事の続編になります。 この記事では、上で紹介しきれなかった、CSRなページ・SPAなコンテンツをスタティックなページに変換して配信するということについて紹介していきます。 前提となる情報は上の記事で述べられているため、まずはそちらをご覧ください。 全体像 上の記事にでも説明されていた概要図をそのまま引用しています。 本記事で説明するのは、Cloudflare Workers以外の部分です。 ここではオリジンをNext.jsにしていますが、Create React Appで作ったようなプレーンなSPAサイトでも構いません。 Next.jsのISRを独自に構築する ~ Cloudflare Workers編（Cache APIの注意点） ~ Workerとオリジンとの間にレンダリングミドルウェアを挟むことで、事前に代理レン

概要 PrismaDataProxyが遅いので、セルフホストするためのライブラリを自作して解決しました、というお話です。 本記事で作成・紹介したライブラリはOSSとして公開&npmにpublishしていますので自由にお使いください。 PrismaDataProxy とは Prisma.ioが提供する、データベース接続管理とプーリングのためのプロキシサーバです。 https://www.prisma.io/data-platform より With the Proxy Without the Proxy Cloudflare WorkersやVecel Edge Functionなどは、データベースとのネイティブ(TCP)接続ができません。 そこでPrismaDataProxyデータベースとの接続の間に入り、WorkerからはHTTP接続でデータベースとの仮想接続を実現します。 以降、長いの

はじめに Next.js で MPA を構築していると、ページ単位でアクアセスコントロールを行うニーズやケースがよく発生します。 ここでのアクセスコントロールは、ページごとにアクセス可能な条件を定義したり、ルールにそぐわないアクセスを別のページに転送させるなどの処理を意味します。 例えば、一般ユーザ向けのページと、登録済みユーザ向けのマイページを持つケースを考えてみると… 一般ユーザ向けページは誰でもアクセス可能 マイページはログイン済みのユーザのみアクセス可能 ログインのためのサインイン・アップフォームのページも存在するが、ログイン済みであればマイページにリダイレクトされる ただし、パスワードリセットのフォームは誰でもアクセス可能 今回は上記のルールを実装する上での、いくつかのアクセスコントロールパターンを考えます。 個人的には中規模以上のプロジェクトではパターン3をおすすめします。その

Why Next.js 私は、業務でもプライベートでも Next.js を使っています。 Next.js は "Zero Config" をうたっているわけですが、実際業務で使うとなると、なかなか Zero とはいきません。IE11用にトランスパイルが必要になったり、ソースマップのアップロードのために webpack の拡張が必要なるケースにおいては、next.config.js のカスタマイズが必要になります。 そういったカスタマイズをサポートし、設定のストレスから我々エンジニアを開放してくれるパッケージが世の中にはたくさんあります。ということで、自分以外の方々が next.config.js にどのようなプラグインを入れているか気になりました。 まずは、自分がどのようなプラグインを入れているかシェアしたいと思います。 「自分はこんなプラグイン入れていて便利ですよ」みたいなシェアを、Tw

修正(2021/06/17) ツイッターでご指摘をいただき、一部修正を加えました🙇 はじめに 2021/06/16 未明に Next.js の新メジャーバージョン v11 がリリースされました。 ほぼ同じタイミングで Next.js Conf (Next.js のカンファレンス)が開催されており、Zenn ユーザの中にはリアルタイムで見ていた人も多いのではないでしょうか。 Core Web Vitals をはじめとした 、パフォーマンス改善に関する話題や新機能が多く、Google のチームが Next.js で最適化のトライを行いながら、Nuxt や Angular に反映していくというのが印象的でした。最先端の取り組みが、普段メインで使用している Next.js で行われているということで、非常に嬉しい限りです。 Next.jd 11 全体のまとめは今後誰かが書いてくれると思いますので

追記 (2022/04/19) React18より、この記事で解説している内容はワーニングからエラーへ引き上げられました。 この記事で解説しているのは、React17の頃にワーニングレベルであったこの警告を「なぜ放置してはいけないか」ということについてです。 残念ながら 「どうやって解消すべきか」については触れていません ので、問題解決を急ぎたい方は、今すぐこの記事を閉じて他の記事を探してください。 Warning: Prop `XXX` did not match. Next.js で開発をしていると、このようなワーニングにたまに遭遇する。

はじめに ReactやVueが世の中を席巻している昨今、Webアプリケーションの世界ではコンポネント分割、宣言的UIが当たり前のように取り扱われるようになりました。 これまでのRailsのような一般的なMVCフレームワークの世界では、Viewは一つの大きなページを指し示していることが大半でしたが、現在ではいわゆる「見た目」は、小さなパーツに分割した状態で管理されることが大半です。 Webサイトの改善活動も、ページ単位での価値評価からコンポネント単位での評価へシフトしています。 Styled ComponentやCustom Hooksなど、「どのようなデザインであるか」、「どのような挙動をするか」などの情報をコンポネントに閉じ込め、そのコンポネントにまつわる興味関心が外にもれないようにする手法が多くあります。 ところで、これらの点に関してはどうでしょうか？ コンポネントがどんなデータを欲す

モチベーション Next.jsのデフォルトのダイナミックルーティングでは対応しづらい複雑なルーティングパターンに対応する。 別のフレームワークで動かしていた中規模以上のサービスを Next.js にリプレイスするというシーンではよく起こる。 例えば次のようなケース (都道府県 > 市区町村 > 物件ラベル のような構造で物件の一覧を表示するサイト) 各ディレクトリには識別子となるプレフィックスがついている ディレクトリデータによっては数字のみを許容するようなものもある 途中のディレクトリが省略されるようなケースが存在する (下の例の場合東京都の全市区町村内のワンルーム物件) デフォルトのダイナミックルーティングのみで対応する場合、 pages/[...paths]/list.tsx このようなディレクトリ構成で対応することができる。 しかし、各paramsからプレフィックス部分を取り除いた

追記(2022/01/21) こちらの記事は Next.js v10の頃の記事であり、現在のv12では同じ方法でIPによるアクセスブロックは行なえません。 しかし、v12ではmiddlewareによるアクセスブロックが可能です。 公式のmiddlewareのサンプルリストにIP制限の例がありますので、そちらに従って実装してみてください。 また、筆者はmiddlewareによるアクセスコントロールを統括するためのライブラリを開発しています。 公式のサンプルよりはかんたんに導入できるかと思いますので、ぜひ検討してみてください。 コントリビュートもお待ちしています。 下記サンプルは、/admin配下へのアクセスに対してIPアドレスのチェックを行い、許可リスト外のIPからのアクセスであればトップページにリダイレクトする場合のものです。 // /pages/admin/_middleware.ts