Vercel から Momento Cache と Topics を触ってみた
先日Momento社とVercel社からそれぞれVercelがMomentoに対応したと発表がされていましたので試してみました。
この記事の対象
VercelのDeployは外部レポジトリとしてGitHubやGitLab, Bitbucketなどを必要とします。また公式で共有されているサンプルレポジトリはGitHubですので、この記事では以下を理解している人を対象にしています。
・GitHub（この記事ではブラウザからの操作のみでOK
・Vercel Getting Started
では早速やってみる
手順はこちらです。
GitHub レポジトリのFork
まず最初にGitHubレポジトリを自分のGitHubアカウントにForkします。
ここにあります。
VercelでNew Projectの作成
先ほどのレポジトリをImportします。
Root Directoryを/examples/web/nextjs-chatに設定します。
（Momentoの手順書の画像）
次に環境変数をセットします。手順書だとMOMENTO_AUTH_TOKENになっていますがどうも最近MOMENTO_API_KEYに変わったようです。Cloudflare エバンジェリストの亀田さんも以下の記事でそんなことを書いていました。
値はMomentoマネージメントコンソールからコピーします。
同様にNEXT_PUBLIC_MOMENTO_CACHE_NAMEにchatとセットしてDeployを押します。
Deployが完了したらデフォルトドメインでサイトにアクセスします。
以下の通りChatアプリが表示されればDeploy完了です。チャットルームに入室しても以下のように何も表示されない場合
Momentoの管理コンソールでchatという名前のキャッシュを作ってからアプリを再読み込みしてみてください。
Topicsで流れるデータの確認方法
今サンプルアプリでは起動時に指定した環境変数の値のCacheで動作します。（Cacheを自動で作成する機能は無いようなので自分で作る必要があります）
Chatルームの名前に設定した文字列がTopicsになるようです。管理コンソールでは以下のように流れるデータを確認可能です。
ValueがJSON形式になっていることがわかります。
Momentoでは生のバイト文字列のほかに複数のデータ型をサポートしています。
この辺りはまた別の機会で触っていきたいと思います。
今後の作業予定
今回の手順はあくまで普通にMomentoのJavaScript SDKをVercel上で実装しただけですので、Vercelから発表されているMomento Integrationとは別物です。
Verelから別途発表されている以下は試してみたところ動作をさせる方法が一部わかりませんでした（私のVercel力の問題です。サービスの問題ではなく）ので現在調査中です。わかり次第記事に上げたいと思います。
Discussion