Upstash Redis と Fly.io でリアルタイム エッジ リーダーボードを作成する

Upstash Redis と Fly.io を使用してエッジでリーダーボードを構築する

ダイナミックで魅力的な Web アプリケーションでは、リーダーボードは競争とユーザー エンゲージメントを促進するための強力なツールです。このチュートリアルでは、Upstash Redis を使用してリアルタイム リーダーボードを構築する旅に乗り出します。 バックエンド ストレージとして使用し、Fly.io を使用してエッジに展開します。 。この動的なデュオは、サーバーレス Redis サービスの効率性と Fly.io のグローバル配信機能を組み合わせ、世界中のユーザーの低遅延アクセスを保証します。

Upstash Redis について

Upstash はクラウド サービスです シンプルさ、拡張性、使いやすさに重点を置いたフルマネージド Redis サービスを提供します。多用途性と高性能のインメモリ データ ストア機能で知られる Redis は、Upstash と組み合わせることでさらに魅力的になります。 Upstash を使用すると、開発者は、インフラストラクチャ管理に伴う運用の複雑さを感じることなく、さまざまなユースケースに合わせて Redis をシームレスにデプロイおよび拡張できます。

Upstash Redis の主な機能は次のとおりです。

• 導入の容易さ: Upstash は導入プロセスを大幅に簡素化し、インフラストラクチャに関連する運用の複雑さを軽減したい開発者にとって優れた選択肢となります。

• 高いパフォーマンス: Redis は超高速のデータ取得で知られており、このチュートリアルで説明するタスク キューイング、メッセージ パッシング、リアルタイム リーダーボードの処理に適しています。 Upstash を使用すると、クラウド インフラストラクチャを利用してシームレスにスケーリングできるため、アプリケーションがさまざまなワークロードを効率的に処理できるようになります。

• スケーラビリティ: Redis は拡張性が高く、Upstash を使用すると、需要に基づいて自動的に拡張できます。これにより、アプリケーションは常にさまざまなレベルの負荷を処理できるようになり、動的でスケーラブルなアプリケーションにとって理想的な選択肢となります。

• データ ストアの統合: Redis はメッセージ ブローカーと結果ストアの両方として機能し、管理する必要があるコンポーネントの数を減らすことでアーキテクチャを合理化します。

Upstash Redis をリアルタイム リーダーボード アプリケーションに組み込むことで、Fly.io のグローバル配信機能を補完するフルマネージド Redis サービスの力を活用し、堅牢で応答性の高い Web アプリケーション アーキテクチャを実現します。実装の詳細を見て、Fly.io を使用した Upstash Redis がどのようにプロジェクトを新たな高みに引き上げることができるかを紹介しましょう。

前提条件

旅を始める前に、次の前提条件を満たしていることを確認してください。

• Fly.io アカウント。

• Flask と Python の基本的な知識。

Fly.io アカウントと Redis データベースをセットアップする

まずFly.io でアカウントを作成します。 次に、Fly CLI をインストールします。

 # Linux
 curl -L https://fly.io/install.sh | sh
 
 # Other type of installation: https://fly.io/docs/hands-on/install-flyctl/

インストール後、端末から Fly でログインします。

fly auth login

これによりブラウザが開き、作成したアカウントでのログインを承認するよう求められます。これで、ターミナルから Fly と対話できるようになります。

Fly を設定したので、Redis を作成しましょう。 リーダーボードを構築するために使用するデータベース:

これで、Fly.io を通じて 1 つのコマンドで作成した Upstash Redis データベースが完成しました。これで、出力から、またはターミナルのコマンドを使用して REDIS_URL を表示できるようになります。

 flyctl redis status upstash-fly-leaderboard
 # Or open the upstash dashboard
 fly redis dashboard <your_org_name | personal>

private_url を取得します。 それを必要に応じてFlask_APPに保存します。

Flask アプリケーションを開発する

リーダーボードを作成するには、Flask を使用します。 Flask は、Web アプリケーションを構築するための最小限の Python フレームワークです。それでは、依存関係をインストールすることから始めましょう。

 # flask - for as a web application framework
 # redis - A wrapper to connect and interact with Redis
 # gunicorn - wsgi server for running Python web applications
 
 $ pip install flask redis gunicorn
 
 # export the dependencies to requirements.txt
 $ pip freeze > requirements.txt

それでは、Flask アプリの基礎を築きましょう。まずモジュール app.py を作成し、Flask アプリケーションを開始してUpstash Redis に接続するための最小限のコードを記述しましょう。

import os
 
from flask import Flask, render_template, request, redirect, url_for
import redis
 
app = Flask(__name__)
 
# Read the connection string from the environment variable
UPSTASH_FLY_REDIS_CONNECTION_STRING = os.getenv('REDIS_URL')
LEADERBOARD_KEY = 'leaderboard'
 
# Initiate a connection to Upstash Redis Instance using the connection string
redis_client = redis.from_url(UPSTASH_FLY_REDIS_CONNECTION_STRING)
 

したがって、私たちは次のようにします。

• Flask アプリを開始しました

• 環境変数から REDIS_URL を読み取ります

• Fly.io で作成した Upstash Redis データベースと対話するために redis_client を初期化しました

次に、プレーヤーをリーダーボードに追加し、それぞれのスコアを持つプレーヤーをリーダーボードから取得する関数を定義しましょう。

def add_score(player_id, score):
 # Add or update the score for the player in the leaderboard
 redis_client.zadd(LEADERBOARD_KEY, {player_id: score})
 
 
def get_leaderboard():
 leaderboard = redis_client.zrevrange(LEADERBOARD_KEY, 0, 9, withscores=True)
 
 formatted_leaderboard = [{'player_id': player_id.decode('utf-8'), 'score': int(score)} for player_id, score in
 leaderboard]
 
 return formatted_leaderboard
 

関数add_score player_id を取得します そしてスコア そしてそれをリーダーボードに追加します。 ザッド は、スコアを持つ 1 つ以上のメンバーをソートされたセットに追加するために使用される Redis のコマンドです。

2 番目の関数 get_leaderboard() Redis ソート セット (リーダーボード) からスコアを含む上位 10 件のエントリを取得し、プレーヤー ID とそれに対応するスコアを含むフォーマットされたリストで返します。

それでは、Upstash Redis データベースと対話するための 3 つのエンドポイントを追加しましょう。

• [GET] / — リーダーボードを取得します

• POST /submit_score — リーダーボードにスコアを送信します

• GET /clear_table — リーダーボードをクリアします

@app.route('/')
def leaderboard():
 # Retrieve the top 10 players from the leaderboard and redirect to the leaderboard page with the data
 leaderboard = get_leaderboard()
 return render_template('leaderboard.html', leaderboard=leaderboard)
 
 
@app.route('/submit_score', methods=['POST'])
def submit_score():
 player_id = request.form['player_id']
 score = int(request.form['score'])
 
 # Call the function to add or update the score for the player in the leaderboard
 add_score(player_id, score)
 
 return redirect(url_for('leaderboard'))
 
 
@app.route('/clear_table', methods=['GET'])
def clear_table():
 # Delete all the data from the leaderboard
 redis_client.delete(LEADERBOARD_KEY)
 
 return redirect(url_for('leaderboard'))

ご覧のとおり、これをよりインタラクティブかつリアルタイムにするために、フロントエンド ページの leaderboard.html もレンダリングしています。プロジェクトのルートで、フォルダー templates を作成し、その中に次のコードを含むファイル Leaderboard.html を作成します。

完璧です。これをターミナルでローカルにテストするには、環境変数をロードします。

 # Linux
 export REDIS_URL='YOUR_UPSTASH_FLY_REDIS_CONNECTION_STRING'
 
 # Windows
 set REDIS_URL='YOUR_UPSTASH_FLY_REDIS_CONNECTION_STRING'
 
 # After that run:
 $ flask run

アプリケーションには、リーダーボードと、リーダーボードにレコードを追加する方法が用意されている必要があります。

結果を追加すると、結果が更新されて保存され、リアルタイムで並べ替えられることが簡単にわかります。これはまさに私たちが望んでいることです。 🎉

Fly.io にデプロイ

次に、Flask アプリをFly.io にデプロイして、新たな高みに引き上げましょう。 コードベースのルートから、以下を実行します。

flyctl launch
 
Scanning source code
Detected a Python app
Using the following build configuration:
 Builder: paketobuildpacks/builder:base
Creating app in /home/valon/code/upstash-fly-leaderboard
We're about to launch your Python app on Fly.io. Here's what you're getting:
 
Organization: <MyOrg> (fly launch defaults to the personal org)
Name: upstash-leaderboard (derived from your directory name)
Region: Amsterdam, Netherlands (this is the fastest region for you)
App Machines: shared-cpu-1x, 1GB RAM (most apps need about 1GB of RAM)
Postgres: <none> (not requested)
Redis: <none> (not requested)
 
? Do you want to tweak these settings before proceeding? (y/N) : N

これによりコードベースが検出され、アプリケーション名やコードなどに基づいてデフォルト設定が適用されます。デフォルト設定を使用するので、N で続行します。 .

これでfly.tomlが生成されます。 とプロファイル :

app = "upstash-fly-leaderboard"
primary_region = "otp" #
 
[build]
 builder = "paketobuildpacks/builder:base"
 
[env]
 PORT = "8080"
 
[http_service]
 internal_port = 8080 # Port where the app runs
 force_https = true
 auto_stop_machines = true
 auto_start_machines = true
 min_machines_running = 0
 processes = ["app"]
 
[[vm]]
 cpu_kind = "shared"
 cpus = 1
 memory_mb = 1024

otp に変更するリージョンを除いて、すべてをデフォルトのままにしました。次に、Procfile を更新しましょう。 , ここで実行コマンドが定義されており、 それをgunicorn で実行させます。 8080 で ポート。

web: gunicorn -b 0.0.0.0:8080 app:app

アプリの場所 はモジュール名と他のアプリです。 は、Flask アプリを定義したモジュールで定義された変数です。これでほとんどの作業は完了しましたが、コードに REDIS_URL を追加したことを覚えておいてください。 環境変数として値を設定し、Fly CLI を使用して作成した Upstash Redis に値をローカルに設定します。 、これを fly.io でシークレットとして設定しましょう。

 fly secrets set --app upstash-fly-leaderboard REDIS_URL=<>

準備が整ったので、アプリを fly.io にデプロイしましょう。 今:

 fly deploy --ha=false

出力には、新しくデプロイしたアプリケーションにアクセスするための URL が表示されます。

Watch your deployment at https://fly.io/apps/<app_name>/monitoring
 
-------
Updating existing machines in '<app_name>' with rolling strategy
 
-------
 ✔ Machine <machine_id> [app] update succeeded
-------
 
Visit your newly deployed app at https://<app_name>.fly.dev/

結論

このチュートリアルでは、Upstash Redis のシームレスな統合を確認しました。 とFly.io リアルタイムのリーダーボードを作成します。サーバーレス Redis サービスの効率性と Fly.io のグローバル配信機能を組み合わせることで、世界中のユーザーが低遅延のアクセスを体験できるようになりました。

ユーザー認証、追加の統計、またはアプリケーションのニーズに合ったその他の機能を追加して、リーダーボード アプリケーションを自由にさらに強化してください。 Upstash Redis のパワーと Fly.io の世界的な展開によって推進される、魅力的で応答性の高い Web アプリケーションの未来がここにあります。

この記事の完全なソース コードは、手順とともに GitHub リポジトリで見つけることができます。

https://github.com/vjanz/upstash-fly-redis-leaderboard

ご質問がございましたら、お気軽にお問い合わせください。また、LinkedIn や GitHub で私とつながることもできます

参考文献

アップスタッシュ
https://redis.io
https://fly.io/