レート制限の基本: 仕組みと使用方法

レート制限は、Web 開発において重要な概念です。これにより、サーバーの安定性、効率的なリソース割り当て、悪意のある攻撃からの保護が保証されます。そこでこの記事では、レート制限の本質、その重要性、さまざまな実装方法、およびその機能を示す実践的な例について詳しく説明します。早速入ってみましょう?

レート制限とは何ですか?

レート制限は、Web サービスまたはサーバーへの受信リクエストまたはトラフィックの量を制御するために使用される戦略です。これは、アプリケーションを悪用から保護し、公平なリソース配分を保証し、サービスの安定性を維持するのに役立ちます。

レート制限を使用する理由

レート制限を使用する必要がある理由をいくつか示します??

• 悪用の防止: ボットや悪意のあるユーザーがサーバーにリクエストを大量に送信するのを防ぎます。
• リソース管理: すべてのユーザー間でリソースが公平に使用されるようにします。
• セキュリティ: アプリケーション内の一部のエンドポイントの試行を制限することで、ブルート フォース攻撃を防止します。
• コスト管理: 過剰な API 呼び出しによる予期せぬ請求を防止します。
• パフォーマンス: サーバーの応答性を維持し、ダウンタイムのリスクを軽減します。

レート制限の種類

1. 固定ウィンドウ (または単純) レート制限: このメソッドは、固定時間ウィンドウ内のリクエストを制限します。例: 「1 分あたり 100 リクエスト。」
2. スライディング ウィンドウ レート制限: 過去数分または数秒など、最近の期間にわたるリクエストを追跡し、制限する動的な時間枠です。
3. トークン バケット アルゴリズム: このメソッドは、トークンで満たされた「バケット」を使用してリクエストを管理します。受信リクエストごとにトークンが消費され、バケットは設定された間隔で補充されます。このアプローチでは、全体的なレート制限を維持しながら、トラフィックのバーストが可能になります。
4. リーキーバケットアルゴリズム: トークンバケットに似ていますが、ひねりが加えられています。バケットがいっぱいになると、過剰なリクエストが「漏洩」するか破棄され、安定したフローが維持されます。

? 私は、トークン バケット アルゴリズムとリーキー バケット アルゴリズムについては、現在のプロジェクトでは必要としていないので、あまり知りません。嘘をつくつもりもありません。ただし、固定窓と引き違い窓が最も一般的なタイプです。たとえば、OpenAI の GPT-4 は段階的な制限を持つ固定ウィンドウ レート制限を使用しています。最初の段階では 1 分あたり 500 リクエストが許可されます。ユーザーがウィンドウがリセットされる直前に制限に達する可能性があるため、このアプローチではバースト トラフィックが発生する可能性があります。

レート制限の仕組み

このプロセスには通常、以下が含まれます:

1. 追跡: 特定の期間内にユーザー (主に userId) または IP が行ったリクエストの数を監視します。
2. しきい値: 制限を定義します (例: 1 時間あたり 100 リクエスト)。
3. レスポンス: 制限を超えた場合、警告を送信するか、さらなるリクエストをブロックします (通常、HTTP ステータス コード 429 Too Many Requests が表示されます)。

レート制限の実装: 実践例

レート制限とその仕組みの基本を理解できたので、これから作成するプロジェクトにレート制限を実装してみましょう。

レート制限を示す 2 つのプロジェクトを作成します。

1. GET リクエストの例
2. POST リクエストの例

技術スタック

• フロントエンド: React (Vite を使用)
• バックエンド: Express (Node.js フレームワーク)

GET リクエストの例

任意の名前でフォルダーを作成し、VS コードまたは使用するコード エディターでそれを開きます。

作成したフォルダー内に、frontend と backend という名前のフォルダーをさらに 2 つ作成します。

その後、バックエンド フォルダーに移動し、コマンド npm init -y を入力して package.json ファイルを初期化します

その後、以下の npm パッケージをバックエンド フォルダー内にインストールします ??

npm install express cors express-rate-limit

npm install -D nodemon

これらの機能:

• Express: Web サーバーを作成し、API ルートを処理します
• cors: フロントエンドがバックエンドと安全に通信できるようにします
• Express-rate-limit: 過剰なリクエストから API を保護します
• nodemon: 開発中にサーバーを自動再起動します (これが D を使用する理由です)

その後、レート リミッターの設定に使用するため、index.js ファイルを作成します (任意に作成できます)。

このコードをコピーして貼り付けたら、後で説明します

const express = require("express");
const rateLimit = require("express-rate-limit");

const app = express();

// Set up rate limiter: 100 requests per 15 minutes
const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 5, // Limit each IP to 5 requests per `window` (here, per 15 minutes)
  message: "Too many requests from this IP, please try again later.",
});

// Apply the rate limiting middleware to all requests
app.use(limiter);

app.get("/api/data", (req, res) => {
  res.send("Welcome to the API!");
});

app.listen(5000, () => {
  console.log("Server running on http://localhost:5000");
});

各部分の機能は次のとおりです:

1. 最初の 2 行は必要なパッケージをインポートします
2. app =express() はサーバーを作成します
3. リミッターは次のように構成されます。
   • windowMs: 15 分の時間ウィンドウ (15 × 60 × 1000 ミリ秒) を設定します
   • 最大: そのウィンドウで IP アドレスごとに 5 つのリクエストを許可します
   • message: ユーザーが制限を超えたときに表示されるエラー メッセージ

その後:

1. app.use(limiter) はレート制限をすべてのルートに適用します
2. ウェルカムメッセージを送信する簡単なテストルートを「/api/data」に作成します
3. 最後に、ポート 5000 でサーバーを起動します

ユーザーが同じ IP から 15 分間に 100 回を超えて API にアクセスすると、API にアクセスする代わりにエラー メッセージが表示されます。

仕組みがわかったので、package.json に追加して自動再起動を有効にします??

 {
  "scripts": {
    "dev": "nodemon index.js"
  }
}

バックエンドについては以上です。

フロントエンドをセットアップします。

• 新しいターミナルを開いてフロントエンドフォルダーに移動し、?? を実行します。

npm install express cors express-rate-limit

npm install -D nodemon

• 次の手順に従ってください。typescript がわからない場合は、JavaScript を選択することをお勧めします
• 不要なファイルを削除することで、少しクリーンアップできます。これが私の外観です

• 完了したら、App.jsx を開いて、これから説明するこのコードを貼り付けます。

const express = require("express");
const rateLimit = require("express-rate-limit");

const app = express();

// Set up rate limiter: 100 requests per 15 minutes
const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 5, // Limit each IP to 5 requests per `window` (here, per 15 minutes)
  message: "Too many requests from this IP, please try again later.",
});

// Apply the rate limiting middleware to all requests
app.use(limiter);

app.get("/api/data", (req, res) => {
  res.send("Welcome to the API!");
});

app.listen(5000, () => {
  console.log("Server running on http://localhost:5000");
});

何が起こっているかは次のとおりです:

1. データ管理のために useState をインポートし、API リクエストを行うために axios をインポートします
2. 2 つの状態変数を作成します。
   • 応答: 成功した API 応答を保存します
   • error: エラー メッセージを保存します
3. fetchData 関数:
   • ボタンがクリックされると呼び出されます
   • API からデータを取得しようとします
   • 応答またはエラー状態を更新します
   • try/catch を使用して成功とエラーを処理します
4. UI には以下が表示されます。
   • タイトル
   • リクエストをトリガーするボタン
   • API 応答 (成功した場合)
   • 赤色のエラーメッセージ (リクエストが失敗した場合) 15 分以内にボタンをクリックしすぎると、バックエンド制限のため、レート制限エラー メッセージが表示されます。

GET リクエストの例については以上です。次の例に進みましょう

POSTリクエストの例

この例では、最初の例のコードをコメントアウトして、このコードを貼り付けることができます??

 {
  "scripts": {
    "dev": "nodemon index.js"
  }
}

ほとんどのコードは最初の例と同じであることがわかりますが、重要な違いがいくつかあります??

• フォームデータを処理するために bodyParser を追加しました
• フォームの送信を処理する POST エンドポイントを作成します

このコードをフロントエンドにも貼り付けます

  npm create vite@latest .

ここでは、フォームを通じてサーバーにリクエストを行っているだけです。これが GET の例とどのように異なるかを見てみましょう:

1. 単一のボタンの代わりにフォームを使用します
2. formData でフォームの状態を管理します
3. handleInputChange を使用して入力の変更を処理します
4. GET の代わりに POST リクエストを使用します
5. 成功メッセージを緑色で表示します

フォームでは 15 分間に 5 件の送信が可能です。その後、ユーザーにはレート制限エラー メッセージが表示されます。

結論

さて皆さん、この記事を最後までお読みいただけましたでしょうか?レート制限がどのように機能するのか、そして特にお金が関係する大規模なプロジェクトに取り組んでいる場合に、レート制限をプロジェクトで使用する必要がある理由について理解していただけたと思います。ご質問がございましたら、お気軽にコメントでお問い合わせください。コーディングを楽しんでください?

以上がレート制限の基本: 仕組みと使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。