> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ale.run/llms.txt
> Use this file to discover all available pages before exploring further.

# リバースプロキシ

<Frame>
  <img className="block rounded-md" src="https://files.cloudtype.io/ale-docs/developers/images/ja/reverse01.png" />
</Frame>

> エールは別途Nginxの設定なく、上記のようなリバースプロキシが動作する機能をサポートしており、ReactなどのWeb Applicationをプリセットとして使用するスタティックサイトに簡単に適用できます。

***

## 準備事項

> リバースプロキシ機能を適用しようとするReactなどのフロントエンドサービスのコードの中で、外部の**API URLを呼び出す部分を自身を呼び出すように記述**する必要があります。この部分はデプロイ過程で`Rewrite`フィールド値入力を通じてリバースプロキシで処理されます。

## リバースプロキシ適用(Rewrites)

<Frame>
  <img className="block rounded-md" src="https://files.cloudtype.io/ale-docs/developers/images/ja/reverse02.png" />
</Frame>

> ReactなどWeb applicationをプリセットとして使用するフロントエンドサービスのデプロイ設定画面で、**Rewrites**フィールドを以下の規則で入力してリバースプロキシを適用できます。

* **左側フィールド** ：コードに記述された呼び出しパス

* **右側フィールド** ：実際に呼び出すべきパス

<Info>
  ドロップダウンメニューから同一環境にあるサービスを選択し、パスを追加するか、URLを直接入力できます。
</Info>