Fastly ComputeでUpstash Redisを活用する方法

• この記事では古いバージョンのFastly CLIを使用しています。最新の手順については、こちらの記事をご確認ください。

この記事では、Fastly Compute@Edge上で動作するシンプルなアプリケーションを作成します。このアプリケーションはUpstash Redisにアクセスし、ページビュー数を記録します。

モチベーション

エッジコンピューティングは、近年最も注目されているトレンドのひとつです。CloudflareやFastlyといったCDNサービスは、ユーザーが自社のエッジインフラストラクチャ上でアプリケーションを実行できるようにしました。これにより、開発者はグローバルに分散した高性能なアプリケーションを構築できるようになっています。

Compute@EdgeはFastlyが提供するサーバーレスプラットフォームです。Rust、AssemblyScript、JavaScriptでコードを書き、Fastlyのエッジネットワーク上で実行できます。ただし、Fastly Computeの関数はステートレスであるため、アプリケーションの状態は外部ストレージに保持する必要があります。さらに、FastlyはWebAssemblyを関数のランタイムとして採用しており、TCP接続が許可されていません。そこで役立つのがUpstash Redisです。REST API、グローバルレプリケーション、サーバーレス向けの従量課金を備えたUpstash Redisは、Fastly Compute関数にとって理想的なソリューションと言えます。

サンプルコードとデモもぜひご覧ください。

プロジェクトのセットアップ

まず、Upstashコンソールでデータベースを作成します。エッジロケーションからの低レイテンシを実現するため、グローバルデータベースを選択することをおすすめします。

Fastly CLIをインストールします:

brew install fastly/tap/fastly

CLIをFastlyアカウントで設定します:

fastly configure

作業用フォルダを作成し、その中でfastly compute initを実行してプロジェクトを初期化します:

➜  using-fastly-compute git:(master) ✗ fastly compute init

Creating a new Compute@Edge project.

Press ^C at any time to quit.
Name: [using-fastly-compute]

Description:

Author: [enes@upstash.com]
Language:

[1] Rust
[2] AssemblyScript (beta)
[3] JavaScript (beta)
[4] Other ('bring your own' Wasm binary)

Choose option: [1] 3

Starter kit:
[1] Default starter for JavaScript
    A basic starter kit that demonstrates routing, simple synthetic responses and
    overriding caching rules.
    https://github.com/fastly/compute-starter-kit-javascript-default
Choose option or paste git URL: [1]

✓ Initializing...
✓ Fetching package template...
✓ Updating package manifest...
✓ Initializing package...

Initialized package using-fastly-compute to:

	/Users/enes/dev/examples/using-fastly-compute

To publish the package (build and deploy), run:
	fastly compute publish
To learn about deploying Compute@Edge projects using third-party orchestration tools, visit:
	https://developer.fastly.com/learning/integrations/orchestration/
SUCCESS: Initialized package using-fastly-compute

続いて、upstash-redisとflight-pathをインストールします:

npm install @upstash/redis flight-path

webpack.config.jsを開き、以下のプラグインを追加します:

plugins: [
    // Polyfills go here.
    // Used for, e.g., any cross-platform WHATWG,
    // or core nodejs modules needed for your application.
    new webpack.ProvidePlugin({
        URL: "core-js/web/url",
    }),
],

fastly.tomlファイルを以下のように更新します:

authors = ["enes@upstash.com"]
description = "Example of using Upstash with Fastly Compute@Edge"
language = "javascript"
manifest_version = 2
name = "fastly-upstash"
service_id = "PASTE_YOUR_SERVICE_ID"

[local_server.backends.upstash-db]
url = "https://eu1-liberal-cat-30162.upstash.io"

Fastly Computeサービスを作成し、発行されたサービスIDを上記のservice_idに貼り付けてください。

また、UpstashのREST URLをバックエンドとしてFastly Computeサービスに登録する必要があります。Fastly Computeでは、外部ネットワークへの接続はすべてバックエンドとして登録することが求められます。サービス画面で「Edit Configuration」>「Clone version x to edit」>「Origins」>「Create a host」の順にクリックしてください。

ホストを追加したら、編集アイコンをクリックしてホスト名を設定します。ここではupstash-dbという名前を付けます。この名前は、後ほどupstash-redisクライアントを設定する際のbackendオプションの値と一致させる必要があります。URLからはhttps://の部分を削除してください。最後に、画面右上の「Activate」ボタンをクリックして、現在のデプロイメントに対して設定を有効化します。

local_server.backends.upstash-dbの設定は、関数をローカル環境で実行するために必要です。urlには、ご自身のUpstashデータベースのREST URLを指定してください。

実装

src/index.jsがサーバーレス関数の本体となります。以下のようにコードを編集しましょう:

import { Router } from "flight-path";
import { Redis } from "@upstash/redis/fastly";

const router = new Router();

const redis = new Redis({
  url: "PASTE_YOUR_UPSTASH_REST_URL",
  token: "PASTE_YOUR_UPSTASH_TOKEN",
  backend: "upstash-db",
});

router.get("/", async (req, res) => {
  const count = await redis.incr("count");
  res.send(`Fastly with Upstash! Count: ${count}`);
});

router.listen();

UpstashコンソールからREST URLとトークンをコピーして、それぞれ該当箇所に貼り付けてください。

処理内容はシンプルです。upstash-redisクライアントでUpstashに接続し、カウンターをインクリメントして、その結果をレスポンスとして返しています。

なお、一般的なRedisクライアントはTCP接続を使用するため、Fastly Computeでは利用できません。必ずREST APIベースのupstash-redisクライアントを使用してください。

また、auth()で認証を行う際は、追加のリクエストオプションとしてbackend: upstash-dbを指定する必要があります。前述のとおり、Fastly Computeでは外部ネットワーク接続をすべてバックエンドとして登録しなければならないためです。

ローカルでの実行

次のコマンドで、関数をローカル環境で実行できます:

fastly compute serve

ビルドとデプロイ

次のコマンドで、関数をビルドしてデプロイします:

fastly compute publish

アプリケーションはFastlyによって自動的にビルド・デプロイされます。コマンド実行後にURLが出力されるので、実際にアクセスして動作を確認してみましょう:

https://horribly-organic-spider.edgecompute.app

まとめ

この記事では、UpstashとFastly Compute at Edgeを組み合わせて、エッジ上で動作するシンプルなアプリケーションを作成しました。皆さまからのフィードバックをもとに、Upstashおよびコンテンツの改善に継続的に取り組んでいます。ご意見がありましたら、TwitterやDiscordでお気軽にお知らせください。

外部リンク

https://developer.fastly.com/learning/compute/

https://developer.fastly.com/learning/compute/javascript/