リダイレクトを使用する

リダイレクトを使用すると、ウェブサーバーで 1 つの URL から別の URL にナビゲーションを再ルートすることができます。リダイレクトは一般的に、URL の外観をカスタマイズする、リンクが壊れないようにする、アドレスを変更せずにアプリまたはサイトのホスティング場所を移動する、ウェブアプリで必要なフォームへの URL を変更するといった理由で使用されます。

リダイレクトの種類

Amplify は、コンソールで次のリダイレクトタイプをサポートしています。

恒久的なリダイレクト (301)

301 リダイレクトは、ウェブアドレスの送信先への恒久的な変更を目的としています。新しい送信先アドレスには、元のアドレスの検索エンジンのランキング履歴が適用されます。リダイレクトはクライアント側で行われるため、ブラウザのナビゲーションバーには、リダイレクト後の送信先アドレスが表示されます。

301 リダイレクトを使用する一般的な理由を以下に示します。

• ページのアドレスが変更されたときにリンク切れを回避する。

• ユーザーがアドレスに予測可能なタイプミスをしたときにリンクが壊れるのを防ぐ。

一時的なダイレクト (302)

302 リダイレクトは、ウェブアドレスの送信先への一時的な変更を目的としています。新しい送信先アドレスには、元のアドレスの検索エンジンのランキング履歴は適用されません。リダイレクトはクライアント側で行われるため、ブラウザのナビゲーションバーには、リダイレクト後の送信先アドレスが表示されます。

302 リダイレクトを使用する一般的な理由を以下に示します。

• 元のアドレスの修正中に迂回先を提供する。

• ユーザーインターフェイスの A/B 比較用のテストページを提供する。

  注記

  アプリが予期しない 302 レスポンスを返す場合、エラーの原因はアプリのリダイレクトとカスタムヘッダーの設定を変更したことが原因と考えられます。この問題を解決するには、カスタムヘッダーが有効であることを確認し、アプリのデフォルトの 404 リライトルールを再度有効にします。

書き換え (200)

200 リダイレクト (書き換え) は、まるで元のアドレスから配信されたかのように、送信アドレスからのコンテンツを表示することを目的としています。検索エンジンのランキング履歴は、引き続き元のアドレスに適用されます。リダイレクトはサーバー側で行われるため、ブラウザのナビゲーションバーには、リダイレクト後の元のアドレスが表示されます。200 リダイレクトを使用する一般的な理由を以下に示します。

• サイトのアドレスを変更せずに、サイト全体を新しいホスティング場所にリダイレクトする。

• 単一ページのウェブアプリケーション (SPA) へのすべてのトラフィックを index.html ページにリダイレクトし、クライアント側のルーター機能で処理する。

Not Found (404)

404 リダイレクトは、リクエストが存在しないアドレスを指している場合に発生します。リクエストされたページではなく、404 の送信先ページが表示されます。404 リダイレクトが発生する一般的な理由を以下に示します。

• ユーザーが誤った URL を入力したときにリンク切れメッセージが表示されないようにする。

• ウェブアプリケーションの存在しないページへのリクエストをクライアント側のルーター機能で処理する index.html ページに向けること。

リダイレクトの作成と編集

Amplify コンソールで、アプリのリダイレクトを作成および編集できます。開始する前に、リダイレクトの構成要素に関する以下の情報が必要です。

元のアドレス

ユーザーがリクエストしたアドレス。

送信先アドレス

ユーザーに表示されるコンテンツを実際に提供するアドレス。

リダイレクトの種類

タイプには、恒久的なリダイレクト (301)、一時的なリダイレクト (302)、書き換え (200)、または not found (404) などがあります。

2 文字の国コード (オプション)

アプリのユーザーエクスペリエンスを地域別にセグメント化するために含めることができる値。

Amplify コンソールでリダイレクトを作成するには

1. にサインイン AWS Management Console し、Amplify コンソール を開きます。

2. リダイレクトを作成するアプリを選択します。

3. ナビゲーションペインで、ホスティング を選択し、書き込みとリダイレクト を選択します。

4. 「書き換えとリダイレクト」ページで、「リダイレクトの管理」を選択します。

5. リダイレクトを追加する手順は、ルールを個別に追加するか、一括編集するかによって異なります。

   • 個々のリダイレクトを作成するには、「書き換えを追加」を選択します。

     1. 元のアドレスには、ユーザーがリクエストした元のアドレスを入力します。

     2. [ターゲットアドレス] には、コンテンツをユーザーにレンダリングする宛先アドレスを入力します。

     3. [タイプ] には、一覧からリダイレクトの種類を選択します。

     4. (オプション) 国コードには、2 文字の国コード条件を入力します。

   • リダイレクトを一括編集するには、[テキストエディタを開く] を選択します。

     1. Rewrites and redirects JSON エディタでリダイレクトを手動で追加または更新します。

6. [保存] を選択します。

リダイレクトの順序

リダイレクトはリストの上部から下に適用されます。順序に、意図した効果があることを確認してください。例えば、次のリダイレクト順序では、/docs/ 以下の特定のパスに対するすべてのリクエストが /documents/の下の同じパスにリダイレクトされます。ただし/docs/specific-filename.htmlは/documents/different-filename.htmlにリダイレクトされます。

/docs/specific-filename.html /documents/different-filename.html 301
/docs/<*> /documents/<*>

次のリダイレクト順序では、specific-filename.html から different-filename.html へのリダイレクトは無視されます。

/docs/<*> /documents/<*>
/docs/specific-filename.html /documents/different-filename.html 301

クエリパラメータ

クエリパラメータを使用して、URL の一致をより詳細に制御できます。Amplify は、以下の例外を除いて、301 および302 リダイレクトのすべてのクエリパラメータを宛先パスに転送します。

• 元のアドレスに特定の値に設定されたクエリ文字列が含まれている場合、Amplify はクエリパラメータを転送しません。この場合、リダイレクトは指定されたクエリ値を持つ宛先 URL へのリクエストにのみ適用されます。

• マッチングルールの宛先アドレスにクエリパラメータがある場合、クエリパラメータは転送されません。たとえば、リダイレクトの宛先アドレスがhttps://example-target.com?q=someParamの場合、クエリパラメータは渡されません。

シンプルなリダイレクトと書き換え

このセクションには、一般的なリダイレクトシナリオのサンプルコードが含まれています。

注記

元のアドレスのドメイン照合では、大文字と小文字は区別されません。

次のサンプルコードを使用して、特定のページを新しいアドレスに恒久的にリダイレクトすることができます。

元のアドレス	送信先アドレス	リダイレクトの種類	国コード
/original.html	/destination.html	permanent redirect (301)

^{JSON [{"source": "/original.html", "status": "301", "target": "/destination.html", "condition": null}]}

次のサンプルコードを使用して、フォルダ内の任意のパスを別のフォルダ内の同じパスにリダイレクトできます。

元のアドレス	送信先アドレス	リダイレクトの種類	国コード
/docs/<*>	/documents/<*>	permanent redirect (301)

^{JSON [{"source": "/docs/<*>", "status": "301", "target": "/documents/<*>", "condition": null}]}

次のサンプルコードを使用して、書き換えとしてすべてのトラフィックを index.html にリダイレクトすることができます。このシナリオでは、書き換えによって元のアドレスに到達したようにユーザーに表示されます。

元のアドレス	送信先アドレス	リダイレクトの種類	国コード
/<*>	/index.html	rewrite (200)

^{JSON [{"source": "/<*>", "status": "200", "target": "/index.html", "condition": null}]}

次のサンプルコードを使用して、書き換えによって、ユーザーに表示されるサブドメインを変更することができます。

元のアドレス	送信先アドレス	リダイレクトの種類	国コード
https://mydomain.com	https://www.mydomain.com	rewrite (200)

^{JSON [{"source": "https://mydomain.com", "status": "200", "target": "https://www.mydomain.com", "condition": null}]}

次のコード例を使用して、パスプレフィックスを付けた別のドメインにリダイレクトできます。

元のアドレス	送信先アドレス	リダイレクトの種類	国コード
https://mydomain.com	https://www.mydomain.com/documents	temporary redirect (302)

^{JSON [{"source": "https://mydomain.com", "status": "302", "target": "https://www.mydomain.com/documents/", "condition": null}]}

次のサンプルコードを使用して、見つからないフォルダのパスをカスタムの 404 ページにリダイレクトすることができます。

元のアドレス	送信先アドレス	リダイレクトの種類	国コード
/<*>	/404.html	not found (404)

^{JSON [{"source": "/<*>", "status": "404", "target": "/404.html", "condition": null}]}

単一ページのウェブアプリケーション (SPA) のリダイレクト

ほとんどの SPA フレームワークは、サーバーリクエストを開始せずにブラウザの場所を変更するための HTML5 history.pushState () をサポートしています。この方法は、ユーザーがルート (または /index.html) から作業を開始する問題ありませんが、他のページに直接ナビゲートする場合は失敗します。

次の例では、正規表現を使用して、正規表現で指定されている特定のファイル拡張子を除き、すべてのファイルをindex.html に200回書き換えるように設定します。

元のアドレス	送信先アドレス	リダイレクトの種類	国コード
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/>	/index.html	200

^{JSON [{"source": "</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|webp)$)([^.]+$)/>", "status": "200", "target": "/index.html", "condition": null}]}

リバースプロキシの書き換え

次の例では、ドメインが変更されていないように見えるように、別の場所からプロキシコンテンツへの書き換えを使用しています。

元のアドレス	送信先アドレス	リダイレクトの種類	国コード
/images/<*>	https://images.otherdomain.com/<*>	rewrite (200)

^{JSON [{"source": "/images/<*>", "status": "200", "target": "https://images.otherdomain.com/<*>", "condition": null}]}

末尾のスラッシュとクリーン URL

about.htmlの代わりにaboutのようなきれいな URL 構造を作成するために、Hugo などの静的サイトジェネレーターは index.html (/about/index.html) を含むページのディレクトリを生成します。Amplify では、必要に応じて末尾のスラッシュを追加することによって、クリーン URL を自動的に作成します。以下の表は、さまざまなシナリオをまとめたものです。

ブラウザでのユーザー入力	アドレスバーの URL	提供されたドキュメント
/about	/about	/about.html
/about (when about.html returns 404)	/about/	/about/index.html
/about/	/about/	/about/index.html

プレースホルダー

次のサンプルコードを使用して、フォルダ構造内のパスを別のフォルダ内の一致する構造にリダイレクトすることができます。

元のアドレス	送信先アドレス	リダイレクトの種類	国コード
/docs/<year>/<month>/<date>/<itemid>	/documents/<year>/<month>/<date>/<itemid>	permanent redirect (301)

^{JSON [{"source": "/docs/<year>/<month>/<date>/<itemid>", "status": "301", "target": "/documents/<year>/<month>/<date>/<itemid>", "condition": null}]}

クエリ文字列とパスパラメータ

次のサンプルコードを使用して、元のアドレスのクエリ文字列要素の値と一致する名前のパスをフォルダにリダイレクトできます。

元のアドレス	送信先アドレス	リダイレクトの種類	国コード
/docs?id=<my-blog-id-value	/documents/<my-blog-post-id-value>	permanent redirect (301)

^{JSON [{"source": "/docs?id=<my-blog-id-value>", "status": "301", "target": "/documents/<my-blog-id-value>", "condition": null}]}

注記

Amplify は、すべてのクエリ文字列パラメータを 301 および 302 リダイレクトの宛先パスに転送します。ただし、この例のように、元のアドレスに特定の値に設定されたクエリ文字列が含まれている場合、Amplify はクエリパラメータを転送しません。この場合、リダイレクトは指定されたクエリ値idを持つ宛先アドレスへのリクエストにのみ適用されます。

次のサンプルコードを使用して、特定レベルのフォルダ構造で見つからないパスをすべて、指定フォルダ内の index.html にリダイレクトすることができます。

元のアドレス	送信先アドレス	リダイレクトの種類	国コード
/documents/<folder>/<child-folder>/<grand-child-folder>	/documents/index.html	not found (404)

^{JSON [{"source": "/documents/<x>/<y>/<z>", "status": "404", "target": "/documents/index.html", "condition": null}]}

リージョンベースのリダイレクト

次のサンプルコードを使用して、リージョンに基づきリクエストをリダイレクトできます。

元のアドレス	送信先アドレス	リダイレクトの種類	国コード
/documents	/documents/us/	temporary redirect (302)	<US>

^{JSON [{"source": "/documents", "status": "302", "target": "/documents/us/", "condition": "<US>"}]}

リダイレクトと書き換えのワイルドカード式

ワイルドカード式 は<*>、リダイレクトまたは書き換えの元のアドレスで使用できます。式は元のアドレスの末尾に配置し、一意である必要があります。Amplify は、複数のワイルドカード式を含む元のアドレスを無視するか、別の場所で使用します。

以下は、ワイルドカード式を使用した有効なリダイレクトの例です。

元のアドレス	送信先アドレス	リダイレクトの種類	国コード
/docs/<*>	/documents/<*>	permanent redirect (301)

次の 2 つの例は、ワイルドカード式を使用した無効なリダイレクトを示しています。

元のアドレス	送信先アドレス	リダイレクトの種類	国コード
/docs/<*>/content	/documents/<*>/content	permanent redirect (301)
/docs/<*>/content/<*>	/documents/<*>/content/<*>	permanent redirect (301)