サーバーレスRedisを使用したSvelteKitアプリケーションの構築

スターターリポジトリのクローンを作成します。 main ブランチに最終結果があるので、initialをチェックアウトします この投稿に沿ってフォローするブランチ。変更をプッシュする場合は、最初にリポジトリをフォークします。

git clone https://github.com/geoffrich/movie-search-redis.git
cd movie-search-redis
git checkout initial

これは、TMDB APIを使用して映画を検索し、その詳細を表示できる小さなSvelteKitアプリケーションです。 TypeScriptを使用してAPI応答との対話を容易にしますが、これはRedisまたはSvelteKitを使用するための要件ではありません。次のルートがすでに存在します（src/routesのファイルに対応） ）：

• / ホームページをレンダリングします
• /search 検索結果のリストを表示します。 queryが必要です およびpage クエリパラメータとして、例えば?query=star wars&page=3 「スターウォーズ」の結果の3ページ目を示しています
• /search.json TMDB APIを照会し、結果のリストを返すサーバーエンドポイントです。 /searchと同じクエリパラメータを取ります
• /movie/[id] 指定されたIDの映画の詳細をレンダリングします。 /movie/11
• /movie/[id].json TMDBAPIから映画の詳細を返すサーバーエンドポイントです。 TMDB応答はページで使用するよりも多くのデータを返すため、データのサブセットを返すように応答を調整します。

Netlifyで実行されているデモを見ることができます。

TMDB API呼び出しは、サーバーエンドポイントでのみ発生することに注意してください。これは、APIキーがクライアントに公開されないようにするためです。

デモをローカルで実行するには、.envを作成します プロジェクトのルートにファイルを追加し、TMDB APIキーとRedis接続文字列を追加します（以下のサンプル）。次に、npm installを実行します 依存関係をインストールしてnpm run devを実行するには アプリを実行します。

TMDB_API_KEY=KEY_GOES_HERE
REDIS_CONNECTION=CONNECTION_GOES_HERE

実行時に、process.env['TMDB_API_KEY']を使用してこれらの値にアクセスできます。 またはprocess.env['REDIS_CONNECTION'] 。値は.envから読み取られます hooks.tsでdotenvを使用するファイル 。

RedisでのAPI応答のキャッシュ

既存のプロジェクトに対して行うことができる1つの改善は、Redisの個々の映画のAPI応答をキャッシュすることです。現在、アプリはムービーページが読み込まれるたびにTMDBAPIにリクエストを送信します。最初にリクエストを行うときに、APIレスポンスをRedisに保存できるため、TMDBにデータをリクエストし続ける必要がありません。

TMDB APIは高速であり、必ずしもキャッシュする必要はありませんが、これは、応答に時間がかかるAPIや要求制限があるAPIにとって便利な手法です。また、APIがダウンした場合の回復力のレベルも提供します。

依存関係としてioredisをすでに追加しました。これは、ノード用のRedisクライアントであり、Redisデータベースとのやり取りに役立ちます。

ファイルsrc/lib/redis.tsを作成します 。このファイルは、Redisクライアントを初期化し、他の関数で使用できるようにエクスポートします。また、キーを取得するためのいくつかのヘルパー関数も含まれています。以下のコードをファイルに追加します。

import Redis from "ioredis";

const connectionString = process.env["REDIS_CONNECTION"];

export const MOVIE_IDS_KEY = "movie_ids";

/** Return the key used to store movie details for a given ID in Redis */
export function getMovieKey(id): string {
  return `movie:${id}`;
}

export default connectionString ? new Redis(connectionString) : new Redis();

この実装では、サーバーレスインスタンスごとに1つのRedisクライアントが作成されることに注意してください。もう1つのオプションは、リクエストごとにRedis接続を作成して閉じることです。 Upstashには、Redis接続を初期化する必要のないRESTAPIもあります。最適なオプションは、アプリのレイテンシとメモリ要件によって異なります。

/src/routes/movie/[id].json.tsに移動します ファイル。 RedisクライアントとgetMovieKeyをインポートします redis.tsからの関数 。

import redis, { getMovieKey } from "$lib/redis";

getMovieDetailsFromApiをご覧ください 関数。 TMDB APIを呼び出して、映画の詳細とクレジットを取得し、それらを返します。データを返す前に、Redisキャッシュに保存して、次回APIを呼び出す代わりにキャッシュされたバージョンを取得できるようにします。新しいcacheMovieResponseを追加します ファイルに関数を適用して、Redisにデータをキャッシュします。

async function cacheMovieResponse(id: number, movie, credits) {
  try {
    const cache: MovieDetails = {
      movie,
      credits,
    };
    // store movie response for 24 hours
    await redis.set(getMovieKey(id), JSON.stringify(cache), "EX", 24 * 60 * 60);
  } catch (e) {
    console.log("Unable to cache", id, e);
  }
}

各映画IDは異なるキーの下に保存されます。たとえば、ID 11の映画に関する情報を取得する場合、キーはmovie:11になります。 。 redis.setの最後の2つの引数 データをキャッシュするのは24時間（86400秒）だけだと言います。データを永久にキャッシュするべきではありません。利用規約に違反しているため、データは最終的に古くなります。

JSオブジェクトをキャッシュに保存する前に、JSオブジェクトを文字列化する必要があることに注意してください。また、エンドポイントの復元力を高めるために、この操作中にスローされた例外をキャッチします。データをキャッシュできない場合でも、未処理の例外をスローするのではなく、APIからデータを返す必要があります。

これで、新しいcacheMovieResponseを使用できます getMovieDetailsFromApi内の関数 API応答をキャッシュに保存します。

async function getMovieDetailsFromApi(id: number) {
  const [movieResponse, creditsResponse] = await Promise.all([
    getMovieDetails(id),
    getCredits(id),
  ]);
  if (movieResponse.ok) {
    const movie = await movieResponse.json();
    const credits = await creditsResponse.json();

    // add this line
    await cacheMovieResponse(id, movie, credits);

    return {
      movie,
      credits,
    };
  }

  return {
    status: movieResponse.status,
  };
}

これでデータがキャッシュに保存されましたが、キャッシュされたデータを取得する必要があります。キャッシュから映画の詳細を読み取る関数を追加しましょう。

async function getMovieDetailsFromCache(
  id: number
): Promise<MovieDetails | Record<string, never>> {
  try {
    const cached: string = await redis.get(getMovieKey(id));
    if (cached) {
      const parsed: MovieDetails = JSON.parse(cached);
      console.log(`Found ${id} in cache`);
      return parsed;
    }
  } catch (e) {
    console.log("Unable to retrieve from cache", id, e);
  }
  return {};
}

データは文字列として保存されているため、使用できるようにするには、データをオブジェクトに解析する必要があります。前の関数と同様に、例外をログに記録しますが、キャッシング関数をエスケープすることはできません。 APIからのデータの取得にいつでもフォールバックできます。

最後に、メインのリクエストハンドラでキャッシュ関数を呼び出すことができます。キャッシュ内のデータが見つかった場合は、すぐに返します。それ以外の場合は、以前と同じようにAPIから読み取ります。

export const get: RequestHandler = async function ({ params }) {
	const { id: rawId } = params;
	// validate and sanitize the input
	const id = parseInt(rawId);
	if (isNaN(id)) {
		return {
			status: 400
		};
	}

	// add these lines
	const { movie, credits } = await getMovieDetailsFromCache(id);
	if (movie && credits) {
		return {
			body: adaptResponse(movie, credits)
		};
	}

	// fallback to the API
	const result = await getMovieDetailsFromApi(id);

このエンドポイントの最終的なコードは、デモリポジトリで確認できます。

これらの変更を加えて、映画のページに移動してみてください。ページを更新すると、コンソールログに「キャッシュ内のIDが見つかりました」と表示され、そのムービーがキャッシュに正常に保存および取得されたことを示します。

import type { RequestHandler } from "@sveltejs/kit";
import type { SearchResponse } from "$lib/types/tmdb";
import redis, { MOVIE_IDS_KEY } from "$lib/redis";

const VOTE_THRESHOLD = 20;

export const get: RequestHandler = async function ({ query }) {
  const searchQuery = query.get("query");
  const page = query.get("page") ?? 1;
  const response = await fetch(
    `https://api.themoviedb.org/3/search/movie?api_key=${process.env["TMDB_API_KEY"]}&page=${page}&include_adult=false&query=${searchQuery}`
  );
  const parsed: SearchResponse = await response.json();

  // add these lines
  const filteredMovies = parsed.results.filter(
    (movie) => movie.vote_count >= VOTE_THRESHOLD
  );
  if (filteredMovies.length > 0) {
    try {
      await redis.sadd(MOVIE_IDS_KEY, ...filteredMovies.map((r) => r.id));
    } catch (e) {
      console.log(e);
    }
  }

  return {
    body: parsed,
  };
};

import type { RequestHandler } from "@sveltejs/kit";
import redis, { MOVIE_IDS_KEY } from "$lib/redis";

export const get: RequestHandler = async function () {
  const randomId = await redis.srandmember(MOVIE_IDS_KEY);
  return {
    body: randomId,
  };
};

<script context="module" lang="ts">
  import type { Load } from "@sveltejs/kit";

  export const load: Load = async function ({ fetch }) {
    const result = await fetch(`/movie/random.json`);
    if (result.ok) {
      const id = await result.json();
      return {
        redirect: `/movie/${id}`,
        status: 303,
      };
    }

    return {
      status: result.status,
      error: new Error("Could not retrieve random id"),
    };
  };
</script>

<header>
  <nav>
    <a href="/">Search</a>
    <a href="/movie/random">Random</a>
  </nav>
</header>