CloudflareとUpstashRedisでリミックスを使ったBlazingFastWebサイト

選択したフォルダに移動して実行します

npx create-remix@latest

RemixRunアプリのセットアップを案内するダイアログが表示されます。

必ずCloudflareワーカーを選択してください 展開ターゲットとして。このウォークスルーでは、 JavaScriptを進めます。 アプリですが、TypeScriptを自由に選択してください。設定は次のようになります。

R E M I X - v1.2.3

💿 Welcome to Remix! Let's get you set up with a new project.

? Where would you like to create your app? upstash-remix
? Where do you want to deploy? Choose Remix if you're unsure, it's easy to chang
e deployment targets. Cloudflare Workers
? TypeScript or JavaScript? JavaScript
? Do you want me to run `npm install`? Yes

分割払いが終了したら、新しく作成したフォルダをコードエディタで開きます。

UpstashRedisグローバルデータベースを作成する

Upstash Redisグローバルデータベースについては、https：//upstash.com/にアクセスして、ログインするか、アカウントを作成してください。コンソールで、[データベースの作成]をクリックし、名前を入力して、データベースの種類として[グローバル]を選択します。最後に[作成]をクリックして、データベースが作成されるのを待ちます。次に、UPSTASH_REDIS_REST_URLをコピーします。 およびUPSTASH_REDIS_REST_TOKEN 。

プロジェクトで、.envというファイルを作成します プロジェクトルートに、次のように両方の変数を追加します。

UPSTASH_REDIS_REST_TOKEN=<INSERT YOUR UPSTASH_REDIS_REST_TOKEN HERE>
UPSTASH_REDIS_REST_URL=<INSERT YOUR UPSTASH_REDIS_REST_URL HERE>

データベースを操作するために、@upstash/redisをインストールしましょう。 npm install @upstash/redisを含むnpmパッケージ 。

RemixRunアプリケーションの作成

データベースが設定されたので、ファイルapp/routes/index.jsxを開きます。 、ボイラープレートコードを削除し、次のように入力します。

import { json, redirect, useLoaderData } from "remix";
import redis from "../utils/redis.server";

export const loader = async () => {
  const start = new Date();
  const count = await redis.get("counter");
  return json({ count, loadingTime: new Date() - start });
};

export const action = async () => {
  await redis.incr("counter");
  return redirect("/");
};

export default function Index() {
  const { count, loadingTime } = useLoaderData();

  return (
    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
      <h1>Record speeds with Remix on Cloudflare and Upstash Redis</h1>
      <p>The button below was clicked {count} times already.</p>
      <form method="post" action="/?index">
        <button type="submit">Click me!</button>
      </form>
      <p>
        It took <b>{loadingTime} ms</b> to read the number of button clicks from{" "}
        <a href="https://upstash.com/redis">Upstash Redis</a>{" "}
        <a href="https://docs.upstash.com/redis/features/globaldatabase">
          Global Database
        </a>
        .
      </p>
    </div>
  );
}

さらに、ファイルapp/utils/redis.server.jsを作成します と

// app/utils/redis.server.js

import { Redis } from "@upstash/redis/cloudflare";

export default Redis.fromEnv();

これは2つのことを行います。両方を見てみましょう。

1。 useLoaderDataを使用したサーバー側のレンダリングデータ

一番下のreturnステートメントには、表示されるシンプルなユーザーインターフェイスがあります

• countと呼ばれるカウンター変数 および
• loadingTimeという変数 。

もう少し上を見ると、これら2つの変数はuseLoaderData()からのものであることがわかります。 針。このRemixRun固有のフックは、loaderと一緒に使用されます 上部の関数。そこで、キーcounterを読み取ります。 データベースから、かかる時間を測定し、両方をuseLoaderData()に返します。 function.loader その後、Remix Runアプリをロードするたびに関数が実行されるため、誰かがWebサイトを要求するたびに、現在のcounterが読み取られます。 価値、サーバー側はWebサイトをレンダリングし、クライアントに送り返します。

2。誰かが「Clickme！」をクリックしたときにカウンター変数をインクリメントします。ボタン。

Remix Runを使用すると、ビルドフォームを非常に簡単に作成できます。 JSXには、<form/>があります。 POSTを送信するタグ /?indexへのリクエスト 誰かが送信ボタンをクリックしたとき。 Remix Runの素晴らしい点は、actionを追加するだけでよいことです。 ファイルに対して機能し、APIを明示的に作成しなくてもフロントエンドとバックエンドの相互作用を準備できます。action 関数の場合、カウンターをインクリメントし、変更を反映するためにWebサイトをリロードするようにクライアントに指示します。

🥳準備はできています

wrangler secret put UPSTASH_REDIS_REST_TOKEN
...

wrangler secret put UPSTASH_REDIS_REST_URL
...

npm run deploy