アプリケーションのテスト

プロジェクトをデプロイする前に、以下のコマンドを使用して React アプリをローカルサーバーで自動的にコンパイルおよびテストできます：

プロジェクト “Catly” がローカルで実行されることを確認するために、プロジェクトディレクトリのルートから以下のコマンドを実行します：

Catly アプリケーションが Catalyst React プラグインを使用して React アプリケーションとして配信されます。React アプリケーションは Hot Module Replacement(HMR) 機能を実装しており、サーブセッション中に変更が加えられた際に、プロジェクト全体を再コンパイルして再読み込みすることなく、特定のモジュールのみを更新して再読み込みします。Catalyst CLI を通じてアプリケーションを配信する場合、HMR はデフォルトで有効になっています。

クライアントコンポーネントのローカル URL をブラウザで開いて、Cat.ly アプリケーションにアクセスできます。

URL を短縮してアプリケーションをテストしましょう。テキストボックスに URL を入力し、Shrink をクリックします。セットアップが正しく動作していれば、Cat.ly が URL を短縮し、元の URL とともに短縮版（/server/catly/ショート ID）を Web ページに表示します。URL カウントが 1 に増加します。

元の URL とそのショート ID が Data Store と Cache コンポーネントに追加されたか確認しましょう。

Catalyst コンソールで Catly プロジェクトの Data Store を開きます。UrlShorten テーブルにレコードが格納されているはずです。

次に、Catalyst コンソールで Cache コンポーネントを開きます。セグメントにキャッシュアイテムが自動的に作成されているはずです。

先ほど説明したとおり、キャッシュアイテムのキーはショート ID で、バリューはショート ID、元の URL、テーブルのメタ情報を含む文字列です。キャッシュアイテムの有効期限はデフォルトで 2 日間に設定されています。

キャッシュアイテムは、元の URL を取得する GET 操作が実行されるたびに上書きされます。POST 操作を通じてキャッシュアイテムに新しい有効期限が書き込まれ、最後にアクセスされた時点から 2 日間に設定されます。つまり、URL がアクセスされるたびに、キャッシュアイテムは期限が切れるまでさらに 2 日間 shortUrl セグメントに保存されます。

URL が 2 日間アクセスされなかった場合、キャッシュから削除されます。2 日経過後にアクセスされた場合は、Data Store の UrlShorten テーブルからデータが取得され、新しいキャッシュアイテムとして再度キャッシュに書き込まれます。

次に、URL にアクセスしてリダイレクトを確認しましょう。

Cat.ly のフロントエンドで短縮版の横にある矢印、またはリストアイテムの任意の場所をクリックします。ブラウザが Catalyst によって元の URL にリダイレクトされます。

このセットアップが正しく動作していれば、アプリケーションを本番環境にデプロイできます。