Integrating Momento Cache with Fastly Compute@Edge

Compute@Edgeは、サーバーレスにコードをデプロイして実行するためのFastlyのプラットフォームです。

このチュートリアルでは、JavaScript SDK の example を見ていきます。このチュートリアルでは、Fastly Compute@Edgeプロジェクトを作成し、HTTP APIを介してMomento Cacheと対話し、データの取得、設定、削除を行います。

HTTP API は軽量で、Fastly が要求する以上の依存関係を必要とせず、標準の fetch HTTP クライアントメソッドを使用することができます。ただし、get、set、delete などの Momento API の基本的なサブセットしか提供されておらず、現在のところ AWS をクラウドプロバイダーとして使用している場合にのみ利用可能です。

前提条件

このアプリをデプロイして実行するには、以下のものが必要です：

• GitHub、GitLab、BitbucketなどのGitプロバイダーのアカウント。
• Fastlyのアカウント。
• 個人リポジトリにある Momento JavaScript SDK のコピーまたはフォーク。

Momentoをセットアップ

Git プロバイダーのアカウントに Momento JavaScript SDK のコピーまたはフォークがあれば、Momento コンソール を使って Momento 側を設定する準備が整います。コンソールにアカウントを作成するには、メールアドレスを入力するか、既存の Google または GitHub アカウントをリンクします。コンソールにログインしたら、ページの右上にある Create Cache ボタンをクリックします：

AWSを使ってworkerというキャッシュを作成します。現在、Momento HTTP APIはAWSでのみサポートされていますが、サポートされているAWSリージョンであればどのリージョンでもキャッシュを作成することができます。

Createボタンを押すと、利用可能なキャッシュのリストに新しいworkerキャッシュが表示されます。

キャッシュを作成した地域もキャッシュのリストに表示されていることに注意してください。次のステップでMomento APIキーを生成する際に、同じリージョンを選択していることを確認する必要があります。

API keysページに移動し、キャッシュの作成に使用したクラウドプロバイダとリージョンを選択します。キャッシュはすでに作成されているので、ワーカーにキャッシュからの読み込みとキャッシュへの書き込みを許可し、キャッシュの作成や削除などのコントロールプレーン操作を許可しない、 fine-grained keyを使用します。これは特に、コントロールプレーンとデータプレーンの操作のセキュリティを別々に管理したい場合に便利です。

Fine-Grained Access Key キータイプを選択し、ドロップダウンリストから Cache Name として worker を選択し、Role Type として readwrite を選択する。Super User Key はコントロールプレーンの操作を管理するために使用します。Momento 認証の詳細については こちら を参照してください。その後、Generate API Key ボタンを押します。

API Key と HTTP Endpoint をコピーして安全な場所に保存します。後でFastly Compute@Edgeのデプロイメントを構成するために使用する必要があります。

Fastly のセットアップ

Fastlyアカウントを作成したら、Fastlyコンソールを使ってFastly側の設定を行います。ログインしたら、右上のアカウント名をクリックし、「アカウント」を選択します。サイドバーのPersonal profileセクションで、API tokensを選択します。右上のCreate Tokenボタンをクリックし、Fastlyの指示に従ってユーザーAPIトークンを作成します。このAPIトークンは必ず安全な場所に保存してください。

次に、Fastly CLIをインストールし、コマンドラインプロンプトに従って、先ほど作成したAPIトークンを提供します：

brew install fastly/tap/fastly
fastly profile create

Fastlyへのデプロイ

次に、アプリケーションを設定し、Fastly アカウントにデプロイします。前述したように、リポジトリで利用可能な Momento JavaScript SDK のコピーが必要です。 この例では、オリジナル からフォークした GitHub リポジトリからデプロイします。

このリポジトリには examples の下に fastly-compute というディレクトリがあり、Momento HTTP API を使って Momento Cache とやり取りするためのサンプルコードが含まれています。

Fastly Compute@Edgeは、fastly.tomlというファイルを使用して、エッジコードのローカルおよびデプロイされた実行環境を設定します。Compute@Edgeの設定についての詳細は、彼らのウェブサイトを参照してください。

まず、関連するexampleディレクトリに移動し、依存関係をインストールします:

cd client-sdk-javascript/examples/fastly-compute
npm install

次に、以下の内容のsecrets.jsonファイルを作成します：

{
    "MOMENTO_HTTP_ENDPOINT": "<YOUR-HTTP-ENDPOINT>",
    "MOMENTO_BACKEND": "<YOUR-MOMENTO-BACKEND-NAME>",
    "MOMENTO_CACHE": "<YOUR-CACHE-NAME>",
    "MOMENTO_API_KEY": "<YOUR-MOMENTO-API-KEY>"
}

変数 MOMENTO_BACKEND には任意の文字列を設定できます。HTTP エンドポイントが Momento Cache を作成したリージョンに対応していることを確認します。これは、Momento Console の Generate API Key の出力からコピーした HTTP エンドポイントの値です。

Note*: 本番環境では、Momento APIキーはFastly Secret Storeに保存する必要があります。しかし、これは現在ベータ版ユーザーに制限されている機能なので、この例ではAPIキーをsecrets.jsonファイルで指定された他の値と共にConfig Storeに保存します。

次に、secrets.json ファイルの内容が fastly.toml ファイルの内容と一致していることを確認します。

具体的には、HTTP エンドポイントとバックエンド名が [local_server] という見出しの下に記述されていることを確認します。ローカルの実行環境では、この見出しの下に提供された情報を使用して、開発中に適切なバックエンドと config ストアを localhost サーバーに設定します。

[local_server]

  [local_server.backends]

    [local_server.backends.<YOUR-MOMENTO-BACKEND-NAME>]
      url = "https://<YOUR-HTTP-ENDPOINT>"

  [local_server.config_stores]

    [local_server.config_stores.secrets]
      file = "secrets.json"
      format = "json"

最後に、secrets.json ファイルにある 4 つの変数が、[setup] の項目にコピーされていることを確認します。Fastly はこの見出しで提供された情報を使用して、実行環境に適切なバックエンドと設定ストアのリソースを作成し、初期化します。

[setup]

  [setup.backends]

    [setup.backends.<YOUR-MOMENTO-BACKEND-NAME>]
      address = "<YOUR-HTTP-ENDPOINT>"
      port = 443

  [setup.config_stores]

    [setup.config_stores.secrets]

      [setup.config_stores.secrets.items]

        [setup.config_stores.secrets.items.MOMENTO_BACKEND]
          value = "<YOUR-MOMENTO-BACKEND-NAME>"

        [setup.config_stores.secrets.items.MOMENTO_CACHE]
          value = "<YOUR-CACHE-NAME>"

        [setup.config_stores.secrets.items.MOMENTO_HTTP_ENDPOINT]
          value = "<YOUR-HTTP-ENDPOINT>"

        [setup.config_stores.secrets.items.MOMENTO_TOKEN]
          value = ""<YOUR-MOMENTO-API-KEY>""

次に、開発サーバーを起動し、localhost:7676に移動して動作していることを確認します。

fastly compute serve

この例のコードでは、キャッシュにアイテムを設定し、それを取得し、削除し、HTML レスポンスを返します。 これは MomentoFetcher class を使用しています。このクラスは、Momento HTTP API の基本的な取得呼び出しにエラー処理を追加する小さなラッパーです。

    const momento = new MomentoFetcher(authToken, httpEndpoint, backend);

    const getResp = await momento.get(cacheName, key);
    console.log(`Fetching the key when the cache is empty: ${getResp}`);

    await momento.set(cacheName, key, value, 10);
    console.log(`Set the key-value pair in the cache ${cacheName}`);

    const getRespAfterSet = await momento.get(cacheName, key);
    console.log(`Fetching the key after setting the value: ${getRespAfterSet}`);

    await momento.delete(cacheName, key);
    console.log(`Deleted the key-value pair from the cache ${cacheName}`);

    return new Response(`Tested the Momento cache using: <br /> Key: ${key} | Value: ${value}`, {
      status: 200,
      headers: new Headers({'Content-Type': 'text/html; charset=utf-8'}),
    });

表示されるのは、一致するシンプルなテキストの応答です。：

Fastlyでプロジェクトを実行する準備ができたら、このコマンドを実行してビルドとデプロイを行います：

fastly compute publish

デプロイしたサービスのログを見たい場合は、fastly.tomlがあるのと同じディレクトリからログの尾行を有効にすることができます：

fastly log-tail

Fastlyへのデプロイに関する詳細はこちらを参照してください。また、Fastly Compute@Edgeプロジェクトのログとモニタリングに関する詳細は、こちらを参照してください。

結論

この簡単なチュートリアルで、Fastly Compute@Edgeを使ってMomentoを搭載したアプリケーションをデプロイすることがいかにシンプルで簡単であるかをご理解いただけたと思います。もちろん、サンプルコード もご覧ください。インフラストラクチャを管理したりプロビジョニングしたりする必要がないので、Momento Cacheのシンプルさを楽しんでいただければと思います。