# Map Remote

> Proxyman の Map Remote を使うと、一致する HTTP、HTTPS、WebSocket のリクエストを、localhost やステージング環境などの別のホスト、ポート、パスにリダイレクトできます。

## 1. 概要 {#1-whats-it}

Map Remote（**⌥⌘R**）は、ルールに基づいて HTTP リクエストの送信先を新しいサーバーに変更します。クライアントは、何も変わっていないかのように新しいサーバーからレスポンスを受け取ります。

Map Remote は、HTTP から HTTPS へ、またその逆へのマッピングにも対応しています。

![Localhost to Production、Staging to Production、正規表現ルールが表示された Proxyman の Map Remote ウィンドウ](https://proxyman.com/docs/assets/proxyman-map-remote-rules.jpg)

_Map Remote のルール_

> **備考:** HTTP <-> HTTPS の間でマッピングする場合は、一般的な [Map Remote の設定例](https://proxyman.com/docs/ja/advanced-features/map-remote#7-common-usages) をご覧ください。

> **備考:** Proxyman 4.3.0 以降では、Map Remote は WebSocket と Secure WebSocket に対応しています。

## 2. メリット {#2-benefits}

* ソースコードを変更せずに、開発環境の Web サイトで一部のエンドポイントに本番環境のエンドポイントを使用できます。
* 本番環境の Web サイトで開発環境のエンドポイントを使用できます。
* 特定のリクエスト URL を別の送信先に送れます。
* Protocol、Host、Port、Path、Query などのリクエストの構成要素を、その場で置き換えられます。

> **備考:** 簡単な JavaScript を書くだけで Map Remote と同じ結果を得たい場合は、[Scripting 機能](https://proxyman.com/docs/ja/scripting/script#1-whats-it) を使えます。
>
> たとえば、[本番環境から localhost サーバーに変更する Snippet Code](https://proxyman.com/docs/ja/scripting/snippet-code#change-request-destination-scheme-host-port-path) があります。

## 3. GraphQL リクエストで Map Remote を使う {#3-map-remote-with-graphql-requests}

Proxyman 2.27.0 以降では、特定の QueryName を指定して、Map Remote で GraphQL リクエストを扱えます。詳しくは以下の GraphQL のドキュメントをご覧ください。

- [Proxyman での GraphQL デバッグ](https://proxyman.com/docs/ja/advanced-features/graphql)

## 4. Scripting で Map Remote を実現する ✅ {#4-using-scripting-as-map-remote-}

Map Remote のルールの設定が難しい場合は、[Scripting Tool](https://proxyman.com/docs/ja/scripting/script#1-whats-it) を使うと簡単に設定できます。

Scripting を使って Map Remote と同じ結果を得る方法は、[Map Remote の Snippet Code](https://proxyman.com/docs/ja/scripting/snippet-code#8-map-remote-with-scripting) をご覧ください。

たとえば、Scripting で次のような処理も簡単に行えます。

* v1 のエンドポイントを v2 にマッピングする
* 本番環境を localhost にマッピングする
* localhost を本番環境にマッピングする
* ...

## 5. マッチングルール {#5-matching-rule}

> **備考:** Proxyman 2.3.0 以降では、[正規表現](https://developer.apple.com/documentation/foundation/nsregularexpression#1965590) とワイルドカードに対応しています。[ワイルドカードと正規表現の使い方](https://proxyman.com/docs/ja/basic-features/regex) をご覧ください。

マッチングルールは、[ワイルドカードまたは正規表現](https://proxyman.com/docs/ja/basic-features/regex) を使って定義できます。

一致したリクエストに対して、Proxyman は次の処理を試みます：

* 設定されている場合、Protocol、Host、Port、Path、Query を置き換える
* 構成要素が空欄の場合、一致したリクエストのその構成要素は変更しない

![http://localhost:3000/* を https://httpbin.proxyman.app にマッピングする Proxyman Map Remote のルールエディタ](https://proxyman.com/docs/assets/proxyman-map-remote-rule-editor.jpg)

_Map Remote ルールエディタ_

> **備考:**
>
> * テキストフィールドを空欄にすると、一致したリクエストのその部分は変更されません
> * Map To のフィールドではワイルドカードは使用できません

### デバッグ {#debugging}

URL にどの Map Remote ルールが一致しているかを確認するには、リクエストの Summary タブを開きます：

1. リクエストを選択します
2. **Summary** タブ -> **Debugging Tools**
3. マッピング後の URL を確認します

### Host ヘッダーを保持する {#preserve-host-header}

デフォルトでは、Proxyman は Map Remote で指定した新しいホストに合わせて Host ヘッダーを上書きします。ほとんどのリクエストを成功させるには、この動作が必要です。

元の Host ヘッダーを保持したい場合は、新しいエントリを作成するときに「Preserve Host Header」チェックボックスをオンにします。Proxyman は Host の値をそのまま保持します。

## 6. 使い方 {#6-how-to-use}

* 選択したリクエストを右クリックし、**Tools** -> **Map Remote…** を選択します。Proxyman は選択したリクエストから必要なデータを自動で入力します。

![リクエストから Map Remote ルールを作成する](https://proxyman.com/docs/assets/proxyman-map-remote-context-menu.jpg)

_リクエストから Map Remote ルールを作成する_

## 7. よくある使い方 {#7-common-usages}

### 7.1 localhost（HTTP）から本番環境（HTTPS）へマッピングする {#71-map-localhost-http-to-production-https}

**結果：**

| 元の URL                                            | 変換後の URL                                      |
| --------------------------------------------------- | ------------------------------------------------- |
| http://localhost:3000                               | https://proxyman.io                               |
| http://localhost:3000/pricing                       | https://proxyman.io/pricing                       |
| http://localhost:3000/v1/user?id=123\&name=proxyman | https://proxyman.io/v1/user?id=123\&name=proxyman |
| **POST** http://localhost:3000/login                | **POST** https://proxyman.io/login                |

### 7.2 本番環境（HTTPS）から localhost（HTTP）へマッピングする {#72-map-production-https-to-localhost-http}

| 元の URL                                          | 変換後の URL                                        |
| ------------------------------------------------- | --------------------------------------------------- |
| https://proxyman.io                               | http://localhost:3000                               |
| https://proxyman.io/v1/user?id=123\&name=proxyman | http://localhost:3000/v1/user?id=123\&name=proxyman |
| **POST** https://proxyman.io/login                | **POST** http://localhost:3000/login                |

### 7.3 特定の URL を別のホストへマッピングする {#73-map-certain-url-to-another-host}

* ルール：**https://proxyman.io/v1/user**（例）
* **Any** と **Wildcard** を選択します
* **「Include all subpaths of this URL」のチェックを外す：** チェックを外すと、他のサブパスはマッピングされません

**Map To：**

* Protocol：**https**
* Host：新しいホスト（例：staging.proxyman.io）
* Port：**443**（ローカルのポート）
* Path と Query は空欄のままにします

**結果：**

| 元の URL                                          | 変換後の URL                                              |
| ------------------------------------------------- | --------------------------------------------------------- |
| https://proxyman.io                               | https://proxyman.io（ルールは適用されない）               |
| https://proxyman.io/v2/setting                    | https://proxyman.io/v2/setting（ルールは適用されない）    |
| https://proxyman.io/v1/user?id=123\&name=proxyman | https://staging.proxyman.io/v1/user?id=123\&name=proxyman |

### 7.4 localhost から本番環境へ WebSocket をマッピングする {#74-map-websocket-from-localhost-to-production}

| 元の URL                      | 変換後の URL                        |
| ----------------------------- | ----------------------------------- |
| ws://localhost:4000           | wss://ws.postman-echo.com           |
| ws://localhost:4000/websocket | wss://ws.postman-echo.com/websocket |

### 7.5 本番環境から localhost へ WebSocket をマッピングする {#75-map-websocket-from-production-to-localhost}

| 元の URL                            | 変換後の URL                  |
| ----------------------------------- | ----------------------------- |
| wss://ws.postman-echo.com           | ws://localhost:3000           |
| wss://ws.postman-echo.com/websocket | ws://localhost:3000/websocket |

## さらに詳しく {#learn-more}

* [テスト用に API エンドポイントを本番環境から localhost 環境に切り替える](https://proxyman.com/posts/2025-01-10-switch-api-endpoint-from-localhost-to-production-environment)