AWS Amplify
コンソールユーザーガイド

リダイレクトを使用する

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

リダイレクトの種類

特定のシナリオをサポートするリダイレクトにはいくつかの種類があります。

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

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

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

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

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

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

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

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

書き換え (200)

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

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

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

Not Found (404)

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

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

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

リダイレクトのパーツ

リダイレクトは、次の内容で構成されます。

  • 元のアドレス - ユーザーがリクエストしたアドレス。

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

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

  • 2 文字の国コード (オプション) - アプリのユーザーエクスペリエンスをリージョン別に分割するために含めることができる値

リダイレクトを作成および編集するには、左ナビゲーションペインの [Rewrites and redirects settings (書き換えとリダイレクトの設定)] を選択します。

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

リダイレクトの順序

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

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

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

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

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

このセクションでは、一般的なリダイレクトシナリオのサンプルコードを紹介します。

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

元のアドレス

送信先アドレス

リダイレクトの種類

国コード

/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}]

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

元のアドレス

送信先アドレス

リダイレクトの種類

国コード

/<*>

/404.html

not found (404)

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

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

SPA フレームワークは通常、HTML5 history.pushState() をサポートしており、サーバーリクエストをトリガーせずに、ブラウザの場所を変更できます。この方法は、ユーザーがルート (または /index.html) から作業を開始する問題ありませんが、他のページに直接ナビゲートする場合は失敗します。次の例では、正規表現を使用して、正規表現で指定されている特定のファイル拡張子を除き、すべてのファイルに対して、書き換え (200) を index.html に設定します。

元のアドレス

送信先アドレス

リダイレクトの種類

国コード

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>

/index.html

200

JSON [{"source": "</^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>", "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-post-id-value>", "condition": null}]

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

元のアドレス

送信先アドレス

リダイレクトの種類

国コード

/documents/<folder>/<child-folder>/<grand-child-folder>

/documents/index.html

404

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

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

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

元のアドレス

送信先アドレス

リダイレクトの種類

国コード

/documents

/documents/us/

302

<US>

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