DEV Community

Cover image for Apidogで共有クラウドモックサーバーを構築する方法
Akira
Akira

Posted on • Originally published at apidog.com

Apidogで共有クラウドモックサーバーを構築する方法

フロントエンドチームがブロックされています。デザインは承認され、画面は半分構築済みですが、唯一の障害は、まだ存在しないAPIです。バックエンドは開発スプリントの途中で、UIから実際に呼び出す先がありません。ローカルモックは手軽な応急処置になりますが、ラップトップを閉じれば利用できなくなります。別のタイムゾーンにいるチームメイトが使っていたエンドポイントも止まります。

今すぐApidogを試す

Apidog の Cloud Mock は、このギャップを埋めるための機能です。1台のマシンだけで動くモックとは異なり、mock.apidog.com でホストされる公開URLを提供します。フロントエンド、QA、パートナー開発者は、バックエンドコードがリリースされる前から現実的なエンドポイントを利用できます。

モックの役割を整理したい場合は、APIモックとは何か、いつ使用するかを参照してください。公開モックURLがリクエスト処理にどう関わるかを確認するには、HTTPリクエスト/レスポンスモデルに関するMDNリファレンスも役立ちます。

https://www.youtube.com/embed/UMl4Vo_RwkU?si=NcqL2Sz2ckCxX4iX

Cloud Mockとは何か、なぜローカルモックでは不十分なのか

Apidogは、設計したAPIごとにモックエンドポイントを生成します。デフォルトのローカルモックは、Apidogを実行しているマシン上でのみ応答します。マシンをシャットダウンすると、エンドポイントも停止します。

単独でのデバッグには十分でも、次のようなチーム開発には不向きです。

  • フロントエンドが別環境からAPIを呼び出す
  • QAが継続的にテストを実行する
  • パートナーがクライアント実装を進める
  • 複数タイムゾーンで作業する

Cloud Mock は、個々のマシンに依存しないモックエンドポイントです。チームメイトのPCがスリープ中でも、自分のラップトップを閉じていても、クラウド上のモックURLはリクエストに応答し続けます。

実運用では、次の流れにすると引き継ぎがスムーズです。

  1. API契約を設計する
  2. Cloud Mockを有効にする
  3. 生成されたURLを共有する
  4. フロントエンド、QA、パートナーが同じ契約を使う

地域をまたぐチームでの運用については、グローバルチームとモックサーバーおよび環境を共有するも参照してください。

Cloud Mockを有効にして公開URLを取得する

ここでは、顧客レコード一覧を返す GET /users を例に、共有可能なクラウドモックを作成します。

ステップ1：Cloud Mockを有効にする

Apidogで対象プロジェクトを開き、次の画面に移動します。

プロジェクト設定 > 機能設定 > モック設定
Enter fullscreen mode Exit fullscreen mode

Cloud Mock をオンにします。

この設定はプロジェクトごとに一度行えば十分です。有効化すると、プロジェクト内の各エンドポイントでローカルモックURLに加えてクラウドモックURLを利用できます。

Cloud Mockの設定画面

ステップ2：クラウドモックURLをコピーする

共有したいエンドポイントを開きます。今回は GET /users です。

  1. エンドポイントの モック タブを開く
  2. クラウドモックURLをコピーする
  3. フロントエンドやQAに共有する

URLは次のようになります。

https://mock.apidog.com/m1/2689726-0-default/users?apidogToken=GdfNrEm6lxM9nDGGIMCWC1OPSiZ6hGOi
Enter fullscreen mode Exit fullscreen mode

URLのパスは mock.apidog.com/m1/.../ の形式になりますが、手動で組み立てないでください。Apidogが生成したURLをそのままコピーして使うことが安全です。

ステップ3：Apidog内でモックをテストする

共有前に、期待するレスポンスが返ることを確認します。

同じ モック タブからテストリクエストを送信し、レスポンスを確認してください。GET /users の場合、例えば次のようなJSONが返ります。

[
  {
    "id": 1,
    "name": "Amelia Turner",
    "email": "amelia.turner@example.com",
    "city": "Portland"
  },
  {
    "id": 2,
    "name": "Marcus Bell",
    "email": "marcus.bell@example.com",
    "city": "Austin"
  }
]
Enter fullscreen mode Exit fullscreen mode

これらは固定値ではありません。Apidogはスキーマのフィールド名と型を読み取り、それに対応するもっともらしいデータを生成します。

そのため、フロントエンドでは実際のUIに近い状態で次を検証できます。

  • テーブルの列幅
  • 長い文字列の折り返しや省略
  • メールアドレスや住所の表示
  • 空状態やリスト表示の実装

ステップ4：ブラウザまたはcurlで確認する

GETリクエストなら、クラウドモックURLをブラウザのアドレスバーに貼り付けてJSONレスポンスを確認できます。

ターミナルから確認する場合は、curl を使います。

curl "https://mock.apidog.com/m1/2689726-0-default/users?apidogToken=GdfNrEm6lxM9nDGGIMCWC1OPSiZ6hGOi"
Enter fullscreen mode Exit fullscreen mode

これで、バックエンド実装を待たずにフロントエンドを進められます。

トークン認証でモックを保護する

公開URLは便利ですが、未リリース機能やパートナー連携の情報を含む場合はアクセスを制限したいことがあります。

次の画面でアクセス許可を トークン認証 に設定します。

プロジェクト設定 > 機能設定 > モック設定
Enter fullscreen mode Exit fullscreen mode

有効化すると、すべてのリクエストに有効な apidogToken が必要になります。トークンは3つの方法で渡せます。

クエリパラメーターで渡す 

curl "https://mock.apidog.com/m1/2689726-0-default/users?apidogToken=GdfNrEm6lxM9nDGGIMCWC1OPSiZ6hGOi"
Enter fullscreen mode Exit fullscreen mode

ブラウザでGETリクエストを確認する場合に便利です。

リクエストヘッダーで渡す

URLやサーバーログにトークンを残したくない場合は、ヘッダーを使います。

curl "https://mock.apidog.com/m1/2689726-0-default/users" \
  -H "apidogToken: GdfNrEm6lxM9nDGGIMCWC1OPSiZ6hGOi"
Enter fullscreen mode Exit fullscreen mode

フロントエンドコードでもヘッダー方式を使うと、リソースURLと認証情報を分離できます。

const res = await fetch(
  "https://mock.apidog.com/m1/2689726-0-default/users",
  {
    headers: {
      apidogToken: "GdfNrEm6lxM9nDGGIMCWC1OPSiZ6hGOi"
    }
  }
);

const users = await res.json();
Enter fullscreen mode Exit fullscreen mode

リクエストボディで渡す

form-data または x-www-form-urlencoded を送るクライアントでは、ボディパラメーターとして apidogToken を指定できます。

すでにトークンなしのURLを共有している場合は注意してください。あとからトークン認証を有効にすると、既存の呼び出しは失敗します。QA、フロントエンド、パートナーへ切り替えタイミングを共有しましょう。

ロケールで現実的かつ地域に合わせたデータを生成する

すべてのレコードに "name": "string" を返すモックでは、UI上の問題を十分に検出できません。

実際の名前、住所、電話番号に近いデータがあれば、実データの到着前に次の問題を見つけやすくなります。

  • 非ラテン文字によるレイアウト崩れ
  • 住所表記の違い
  • 長い氏名やメールアドレスのオーバーフロー
  • 地域ごとの日付・時刻表示

Apidogは内部で Faker.js を使用してモックデータを生成します。

デフォルトロケールを設定する

デフォルトでは、Fakerはプロジェクトの言語設定に従います。

プロジェクト設定 > 基本設定
Enter fullscreen mode Exit fullscreen mode

ここで設定した言語が、生成するモック値のデフォルトロケールになります。たとえばプロジェクトをフランス語に設定すると、名前や住所もフランス語圏に近い形式で生成されます。

プロジェクト全体のロケールを上書きする

プロジェクトの表示言語とは別のロケールでモックデータを作りたい場合は、次の画面で設定します。

プロジェクト設定 > 機能設定 > モック設定
Enter fullscreen mode Exit fullscreen mode

Fakerロケールを選択すると、その設定がプロジェクト全体のモック値に適用されます。

たとえば日本向けのUIを検証する場合、日本のロケールを設定することで、名前・住所・電話番号が日本向けの形式に近づきます。

スキーマからモックデータを生成する仕組みは、Apidogのスマートモックとそのスキーマ読み込み方法で詳しく確認できます。

フィールド単位でロケールを上書きする

一部のフィールドだけ別のロケールにしたい場合は、モック表現で locale パラメーターを指定します。

{{$person.fullName(locale='ja')}}
Enter fullscreen mode Exit fullscreen mode

この指定をしたフィールドだけ、日本語の名前が生成されます。

田中 太郎
Enter fullscreen mode Exit fullscreen mode

ロケールの優先順位は次のとおりです。

  1. フィールドレベルの locale
  2. プロジェクトレベルのFakerロケール
  3. 基本設定のプロジェクト言語

基本はプロジェクト全体のデフォルトを設定し、例外が必要なフィールドだけ個別指定する運用がおすすめです。

サポートされるロケールコードを使う前に、Apidogのモックドキュメントで確認してください。Faker側の規約は Faker.jsロケールリファレンスにあります。

タイムゾーンも合わせる

時刻データを扱う場合は、タイムゾーンも設定します。

プロジェクトレベルのデフォルトは次の画面にあります。

プロジェクト設定 > 機能設定 > モック設定
Enter fullscreen mode Exit fullscreen mode

フィールド単位では、モック表現の timeZone パラメーターで上書きできます。

createdAt や予約日時をUIに表示する場合、対象地域に合わせたタイムゾーンを設定しておくと、日時フォーマットや日付境界に関する問題を早期に発見できます。

ロケールとタイムゾーンを組み合わせると、同じスキーマから日本、ドイツ、または複数地域のユーザーを想定したモックを作れます。より広い活用例は、実用的なAPIモックのユースケースを参照してください。

Cloud Mockとセルフホスト型モックの比較

Cloud MockはApidogのホスト型モック機能です。セットアップの手間を抑えつつ、共有可能なモックURLをすぐに使いたいチームに向いています。

一方、データ所在地の規制や、テストトラフィックを外部クラウド経由にできないポリシーがある場合は、独自インフラストラクチャでモックサービスを運用する選択肢もあります。

選択肢 向いているケース トレードオフ
Cloud Mock すぐ共有したい、常時利用可能なURLが必要 ホスト型サービスを利用する
セルフホスト ネットワークや配置先を自組織で制御したい 運用・保守が必要

セルフホストが必要な場合は、Apidogモックサーバーのセルフホスティングを確認してください。オンラインAPIモックツールの比較も選定の参考になります。

プランや利用可能な機能は、ブログ記事の記載だけで判断せず、実際のアカウントで確認してください。Apidogをダウンロードして、ワークスペースでエンドツーエンドのフローを試すのが確実です。

Apidog CLIでワークフローを自動化する

Cloud MockはGUIとクラウド側で提供される機能です。CLIからモックサーバーを起動するものではありません。

ただし、Apidog CLIは、モックの入力になるAPI仕様を最新に保つために役立ちます。

CLIやCursor、Claude CodeのようなAIコーディングエージェントでエンドポイントやスキーマを更新すると、Cloud Mockは更新後のスキーマをもとにモックデータを生成します。

バックエンドがデプロイされた後は、同じプロジェクトで定義したテストシナリオをCLIから実行できます。

apidog run -t <scenario_id> -e <env_id> -r cli
Enter fullscreen mode Exit fullscreen mode

このコマンドは保存済みのテストシナリオを指定環境に対して実行し、結果を出力します。

実行時は、Apidogで対象シナリオを開き、あらかじめ生成されたコマンドをコピーしてください。-t のシナリオIDや -e の環境IDを手入力する必要はありません。

CI/CDへの組み込みは、CI/CDパイプラインでApidogを実行するで確認できます。

よくある質問

Apidogを閉じてもクラウドモックURLは動作し続けますか？

はい。Cloud MockはApidogのホスト型インフラストラクチャから提供されるため、自分のPCやApidogアプリが起動している必要はありません。

クラウドモックURLをブラウザで直接使用できますか？

GETリクエストであれば可能です。apidogToken を含む完全なURLをブラウザに貼り付けると、JSONレスポンスを確認できます。

トークンをURL履歴に残したくない場合や、GET以外のメソッドを使う場合は、curl やフロントエンドクライアントからヘッダーでトークンを渡してください。

トークンを含まないリクエストはどうなりますか？

アクセス許可をトークン認証に設定している場合、有効な apidogToken を含まないリクエストは拒否されます。

トークンは以下のいずれかで渡せます。

  • クエリパラメーター
  • リクエストヘッダー
  • フォームリクエストのボディパラメーター

特定の国に一致するモックデータを取得するにはどうすればよいですか？

次のいずれかで設定します。

  • 基本設定でプロジェクトのロケールを設定する
  • モック設定でプロジェクト全体のFakerロケールを上書きする
  • モック表現の locale パラメーターでフィールド単位に指定する

例：

{{$person.fullName(locale='ja')}}
Enter fullscreen mode Exit fullscreen mode

フィールド設定はプロジェクト設定より優先されます。スマートモックのウォークスルーも参照してください。

Cloud Mockとヘッドレスモックツールのどちらを使用すべきですか？

Cloud Mockは、API設計に紐付いたホスト型エンドポイントをすぐ共有したいチームに適しています。

GUIを使わない自動ビルド内でモックを運用する必要がある場合は、ヘッドレスモックツールの調査を確認してください。多くのツールは OpenAPI Initiative の仕様を基盤としているため、どの方法を選んでもAPI仕様を明確に保つことが重要です。

まとめ

ローカルマシンでしか動かないモックは、チーム全体の開発を支えられません。Cloud Mockを使うと、API設計から共有可能な mock.apidog.com URLを生成できます。

実装手順はシンプルです。

  1. APIエンドポイントとスキーマを設計する
  2. Cloud Mockを有効にする
  3. 生成されたURLをテストする
  4. フロントエンド、QA、パートナーへ共有する
  5. 必要に応じてトークン認証、ロケール、タイムゾーンを設定する

バックエンドの完成を待たずに、フロントエンドとQAを進められるようになります。Apidogをダウンロードして、最初の共有可能なクラウドモックを設定してみてください。

https://www.youtube.com/embed/UMl4Vo_RwkU?si=NcqL2Sz2ckCxX4iX

Top comments (0)