シンプルなリダイレクトと書き換え単一ページのウェブアプリケーション (SPA) のリダイレクトリバースプロキシの書き換え末尾のスラッシュとクリーン URL プレースホルダークエリ文字列とパスパラメータリージョンベースのリダイレクトリダイレクトと書き換えでのワイルドカード式の使用

サンプルリファレンスをリダイレクトして書き換える

このセクションでは、一般的なリダイレクトのさまざまなシナリオに対するサンプルコードについて説明します。これらの例を使用すれば、独自のリダイレクトと書き換えを作成するための構文を理解できるようになります。

注記

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

トピック

シンプルなリダイレクトと書き換え
単一ページのウェブアプリケーション (SPA) のリダイレクト
リバースプロキシの書き換え
末尾のスラッシュとクリーン URL
プレースホルダー
クエリ文字列とパスパラメータ
リージョンベースのリダイレクト
リダイレクトと書き換えでのワイルドカード式の使用

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

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

元のアドレス	送信先アドレス	リダイレクトの種類	国コード
`/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)`

ブラウザで JavaScript が無効になっているか、使用できません。

AWS ドキュメントを使用するには、JavaScript を有効にする必要があります。手順については、使用するブラウザのヘルプページを参照してください。

ドキュメントの表記規則

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

アプリへのアクセスの制限