Redis

Next.jsのEdge Functions（エッジ関数）とは？なぜ重要なのか？本日、VercelチームがNext.jsの「Edge Functions（エッジ関数）」を発表しました。Edge Functionsを利用すると、開発者は世界各地に分散配置されたサーバー上でコードを実行できます。つまり、あなたのコードはユーザーから最も近いロケーションで実行されるということです。「CDNインフラ上で動作するサーバーレス関数」と捉えるとイメージしやすいでしょう。主なメリットは以下の2点です。グローバルな低レイテンシ：コードは世界中の多数の拠点（PoP：Points of Presence）に複製される

この記事では、Cloudflare WorkersとUpstash Redisを組み合わせて、Webサイト向けの待合室（Waiting Room）ページを実装する方法を解説します。 なぜ待合室が必要なのか？ Webサイトへの訪問者数が増えるのは本来喜ばしいことですが、必ずしもそうとは限りません。突発的な大量トラフィックはアプリケーションを容易に圧倒し、最悪の場合、サービス全体が停止してしまうこともあります。待合室は、トラフィック急増時にアクセスを制御し、リソースを保護するための有効なソリューションです。 Cloudflareには公式の「Waiting Room」機能がありますが、残念ながらBu

SvelteKitは、コンパイル時にアプリをビルドしてより小さく・高速なJavaScriptを生成するUIフレームワーク「Svelte」向けのフルスタックアプリケーションフレームワークです。SvelteKitではエンドポイントを使ってサーバーサイドのロジックを記述できますが、アプリケーションのデータをどのように永続化するかは開発者自身に委ねられています。 この記事では、SvelteKitアプリケーションでRedisを使ってデータを保存する方法を解説します。The Movie Database（TMDB） APIから取得した映画データをRedisでキャッシュし、さらにランダムな映画を表示する機能

チュートリアルシリーズ第2部へようこそ。第1部では、UpstashとServerless Framework、Redisを使ってREST APIを構築する方法を解説しました。 この第2部では、そのREST APIのエンドポイントを利用するモバイルアプリケーションをFlutterで構築していきます。 それでは始めましょう 🙃 事前準備 まず、お使いのコンピュータにFlutterがインストールされ、正常に動作している必要があります。 Flutter IDEで新しいFlutterプロジェクトを作成し、任意の名前を付けてください。 依存パッケージの追加 プロジェクトのルートディレクトリにあるpu

Nuxt 3とサーバーレスRedis（Upstash）で始めるページ訪問カウント実装 アプリケーションの利用状況を追跡したり、リソース利用を制限したり、キャッシュからデータを取得してパフォーマンスを向上させたりする必要がある場合、Redisがその答えとなります。Redisはインメモリのキー・バリュー型データベースであり、オープンソースで「Remote Dictionary Server」の略称です。 この記事では、サーバーレスRedisサービスであるUpstashと、Vue SSRフレームワークの最新ベータ版であるNuxt 3を組み合わせた基本的なアプリケーション構築を通じて、Redisの基礎

この記事では古いバージョンのFastly CLIを使用しています。最新の手順については、こちらの記事をご確認ください。 この記事では、Fastly Compute@Edge上で動作するシンプルなアプリケーションを作成します。このアプリケーションはUpstash Redisにアクセスし、ページビュー数を記録します。 モチベーション エッジコンピューティングは、近年最も注目されているトレンドのひとつです。CloudflareやFastlyといったCDNサービスは、ユーザーが自社のエッジインフラストラクチャ上でアプリケーションを実行できるようにしました。これにより、開発者はグローバルに分散した高

この記事では、Vercel Edge FunctionsとUpstash Redisを使用して、Next.jsアプリケーションに待合室（ウェイティングルーム）機能を実装する方法を解説します。 ソースコードとデモアプリも公開されています。 待合室とは？ 待合室は、Webサイトへの同時アクセス数を制限してリソースの過負荷を防ぎたい場合に有効です。 この実装では、最大アクティブ訪問者数を設定でき、トラフィックを制御する2つのパラメータがあります： 最大サイト容量（Max website capacity）：同時にサイトに滞在できる最大訪問者数 最大セッションタイムアウト（Max ses

この記事では、React Native、Serverless Framework、Upstashを組み合わせて、リーダーボード(ランキング)の閲覧・更新ができるモバイルアプリケーションを開発する方法を解説します。 モバイルアプリの開発にはReact Nativeを使用し、バックエンドはServerless Frameworkで構築します。バックエンドは、AWS Lambda上で動作するPython関数で構成されています。 1. Upstash Redisを活用する 一般的なリーダーボードアプリでは、ユーザー情報と各ユーザーのスコアを保存する必要があります。これらのデータはスコア順にソートされる

フルスタックWebフレームワークである Remix は、一般的なWebサーバーのユースケースに対応するためのAPIを提供しています。この記事では、セッション管理に焦点を当て、なぜそしてどのように Upstash Redis をセッションストアとして活用できるかを解説します。 セッションとは？ Remix公式ドキュメントにセッションの優れた入門ガイドがあります：https://remix.run/docs/en/v1/api/remix#sessions 簡単に言うと、セッションはサーバーとクライアント間でユーザーデータや状態を共有するための仕組みです。主な用途には、ユーザー認証状

Next.jsは、Reactをベースとした最も人気のあるフロントエンドフレームワークの一つです。静的なHTMLを生成できるだけでなく、クライアント側・サーバー側のどちらでも動的にレンダリングでき、この柔軟性によりあらゆる種類のアプリケーションやWebサイトに対応できる万能なツールとなっています。しかもオープンソースで、無料で利用できる点も大きな魅力です。 NextAuthは、Next.js向けのサードパーティライブラリで、さまざまなIDプロバイダーやデータベースとの統合を簡単に実現できます。ユーザーのサインアップの手間を省きながら、必要なアカウント情報を選択したデータベースに保存できます。Ne

モバイルアプリでは、重要なお知らせや警告、利用ガイドなどをエンドユーザーに届けたい場面がよくあります。その手段のひとつが「アプリ内アナウンス」です。本記事では、サーバーレスRedisを活用してユーザーへアナウンスを配信するモバイルアプリを実際に構築します。アプリ開発にはReact Nativeを使用し、サーバーレスRedisにはUpstashを採用して、アプリから直接接続する構成を実装します。アプリ内アナウンスとは？アプリ内アナウンスとは、重要な情報を伝えたり、ユーザーの操作について通知したり、特定の場所へ誘導したりするために、エンドユーザーへ送信されるメッセージのことです。この仕組みを使えば

Next.jsは、サーバーサイドレンダリング（SSR）機能により、開発者がフルスタックアプリケーションを構築できる強力なフレームワークです。さらにVercelやNetlifyといったプラットフォームを使えば、サーバーレス関数でバックエンドAPIも手軽に実装できます。では次に考えるべきは「Next.jsアプリに最適なデータベースは何か」という問題です。 この記事では、Next.jsコミュニティで人気の高いデータベースサービスを取り上げ、それぞれがサーバーレスモデルにどれだけ適合しているかを解説します。評価ポイントは主に以下の2つです。 サーバーレス対応の料金体系：従量課金制か？データベースを使

ユーザーフィードバックは、製品の改善や開発の方向性を決めるうえで非常に重要な情報源です。本記事では、ユーザーから手軽にフィードバックを収集できるウィジェットをご紹介します。これはNext.jsのAPIをバックエンドとして呼び出すReactコンポーネントで、バックエンド側のAPIは受け取ったフィードバックデータをUpstash Redisデータベースへ送信するだけのシンプルな構成になっています。送信されたデータは、Upstashコンソールの「Integrations」ページからいつでも確認・管理できます。 このコンポーネントをNext.jsのページに追加すると、画面右下にアイコンが表示されます。

はじめに Cloudflare Workersを使っているなら、データの保存先としてはUpstash Global RedisとWorkers KVが最有力候補になるでしょう。本記事では、Cloudflare Workersの関数向けデータストアとして、両者を機能・料金・パフォーマンスなどの観点から簡潔に比較します。 機能セット（API） Workers KVは、有効期限（TTL）指定に対応したシンプルなキーバリューストアAPIを提供します。 put(key, value, {expiration: secondsSinceEpoch}) get(key) delete(key) list(

はじめに先日、Netlifyは「Netlify Graph」という新機能を発表しました。同僚が以前から指摘していた不足していたピースに対して、Netlifyがソリューションへ向けて良い一歩を踏み出した形です。Netlify Graphは、開発者がWebアプリ向けのGraphQL API呼び出しを構築するのを支援する機能です。Netlifyダッシュボード上でGraphQLリクエストを準備すれば、ワンクリックでクライアントコードをプロジェクトに注入できます。Netlify Functionsとサードパーティサービスの課題Netlify Functionsをサードパーティサービスと組み合わせて使う場

この記事では、RemixとサーバーレスRedis（Upstash）を組み合わせて、シンプルなTODOアプリを作成する手順を解説します。 Remixは、ユーザーインターフェースに集中しながら、Webの基本原則に立ち返ることで、高速で滑らか、そして堅牢なユーザーエクスペリエンスを提供できるフルスタックWebフレームワークです。 Remixプロジェクトの作成 まず、以下のコマンドを実行します。 npx create-remix@latest プロジェクトの雛形が完成しました。続いて、依存パッケージをインストールし、開発サーバーを起動します。 npm install npm run dev ユーザーイ

この記事では、SvelteKitとUpstashが提供するサーバーレスRedisを組み合わせて、シンプルなTODOアプリを構築する手順を解説します。 SvelteKitは、あらゆる規模のWebアプリケーションを構築できるフレームワークです。快適な開発体験と、ファイルシステムベースの柔軟なルーティングが大きな魅力です。 プロジェクトの作成 まずは以下のコマンドでプロジェクトを新規作成します。 npm init svelte@next todo-app-with-redis プロジェクトの雛形ができたら、依存パッケージをインストールし、開発サーバーを起動しましょう。 npm install

本日、@upstash/redis v1.0.0を正式リリースしましたのでお知らせします。 @upstash/redisは、サーバーレス環境向けに設計されたコネクションレス（HTTPベース）のRedisクライアントで、Cloudflare WorkersやFastlyと互換性のある唯一のRedisクライアントです。 v1.0.0の主な新機能 v1.0.0は、従来のライブラリを完全に書き直したバージョンです。ユーザーの皆様から特に多かったご要望が「パイプラインのサポート」と「型安全性の向上」でした。これらの新機能の特性上、v1は後方互換性を持ちませんが、基盤となるREST API自体は変更されて

WebサイトやWebアプリを開発するとき、速度の最適化だけで何時間も費やしたい人はいませんよね。しかし問題は、高速なWebサイトが非常に重要であり、パフォーマンスがその成功を左右する決定的な要素になりがちだという点です。 Remix RunのようなWebフレームワークは、設定を最小限に抑えながら(いわゆる「ゼロコンフィグ」)Webパフォーマンスを最適化することを目標に生まれました。現在では、高速化を実現するためのフレームワークが数多く存在します。 残念ながら、どれほど優れたサイトの読み込み時間を実現しても、アプリ側のデータベースが高速でなければ意味がありません。 この記事では、優れたWebサイ

Renderは、即時デプロイやオートスケーリングなどの機能を備えた強力なインフラストラクチャプラットフォームです。この記事では、Upstashを使ってシンプルなNext.jsアプリケーションを作成し、それをRenderにデプロイする手順を解説します。 注意：このチュートリアルでは、UpstashでRedisインスタンスがすでに作成済みであることを前提としています。まだ作成していない場合は、Upstashコンソールから簡単に作成できます。 はじめに まず、新しいNext.jsアプリを作成し、そのディレクトリに移動しましょう。 npx create-next-app upstash-render