使用重新導向 - AWS Amplify

本文為英文版的機器翻譯版本,如內容有任何歧義或不一致之處,概以英文版為準。

使用重新導向

重新導向可讓 Web 伺服器將導覽從一個 URL 重新路由到另一個 URL。使用重新導向的常見原因包括:自訂 URL 的外觀以避免中斷的連結、移動應用程式或網站的託管位置而無需變更其地址,以及將請求的 URL 變更為 Web 應用程式所需的格式。

重新導向類型

支援特定案例的重新導向有數種類型。

永久重新導向 (301)

301 重新導向預期用於網址目的地的持續變更。原始地址的搜尋引擎排名歷史記錄會套用到新目的地地址。重新導向會在用戶端上進行,因此瀏覽器導覽列會在重新導向後顯示目的地地址。使用 301 重新導向的常見原因包括:

  • 為了避免頁面的地址變更時造成連結中斷。

  • 為了避免當使用者在地址中提供了可預測的錯字時造成連結中斷。

暫時重新導向 (302)

302 重新導向預期用於網址目的地的暫時變更。原始地址的搜尋引擎排名歷史記錄不會套用到新目的地地址。重新導向會在用戶端上進行,因此瀏覽器導覽列會在重新導向後顯示目的地地址。使用 302 重新導向的常見原因包括:

  • 為了在對原始地址進行修復時提供繞道目的地。

  • 為了提供使用者界面 A/B 比較的測試頁面。

重寫 (200)

200 重新導向 (重寫) 是為了就好像是從原始地址提供一般,顯示來自目的地地址的內容。搜尋引擎排名歷史記錄會繼續套用到原始地址。重新導向會在伺服器端上進行,因此瀏覽器導覽列會在重新導向後顯示原始地址。使用 200 重新導向的常見原因包括:

  • 為了將整個網站重新導向到新的託管位置,而不變更網站的地址。

  • 為了將對單一頁面 Web 應用程式 (SPA) 的所有流量重新導向其 index.html 頁面,以由用戶端路由器功能處理。

找不到 (404)

當請求指向的地址不存在時會發生 404 重新導向。會顯示 404 目的地頁面,而不是請求的頁面。404 重新導向發生的常見原因包括:

  • 為了避免使用者輸入錯誤的 URL 時的中斷連結訊息。

  • 為了將 Web 應用程式不存在頁面的請求指向其 index.html 頁面,以由用戶端路由器功能處理。

重新導向的部分

重新導向包含下列項目:

  • 一個原始地址 - 使用者請求的地址。

  • 一個目的地地址 - 實際上為使用者提供所看到內容的地址。

  • 重新導向類型 - 類型包括永久重新導向 (301)、暫時重新導向 (302)、重寫 (200) 或找不到 (404)。

  • 兩個字母的國家代碼 (選擇性)-您可以包含以依區域劃分應用程式使用者體驗的值。

若要建立和編輯重新導向,請選擇左側導覽窗格中的重寫和重新導向設定

若要在 JSON 編輯器中大量編輯重新導向,請選擇開啟文字編輯器

重新導向的順序

重新導向會從清單的上方往下執行。請確定您的排序具有預期的效果。例如,下列重新導向順序會造成將 /docs/ 下指定路徑的所有請求重新導向到 /documents/ 下的相同路徑,/docs/specific-filename.html 除外,它會重新導向至 /documents/different-filename.html

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

以下重新導向順序會忽略 specific-filename.htmldifferent-filename.html 的重新導向:

/docs/<*> /documents/<*> /docs/specific-filename.html /documents/different-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}]

單頁 Web 應用程式的重新導向 (SPA)

大多數 SPA 架構支援使用 HTML5 history.pushState() 來變更瀏覽器位置,而不需觸發伺服器請求。這對於從根目錄 (或 /index.html) 開始導覽的使用者有效,但對於直接導覽至任何其他頁面的使用者則無效。使用規則表達式,以下範例會為連至 index.html 的所有檔案設定 200 重寫,規則表達式中指定的特定副檔名除外。

原始地址 目的地地址 重新導向類型 國家代碼

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

/index.html

200

JSON [{"來源」:「</^ [^。] +$|\。(?! (css | 禮物 | 圖像 | 日本 |「200",「target」:「index.html」,「status」: null}]

反向代理重寫

以下範例會使用重寫,以代理來自另一個位置的內容,讓使用者看起來網域未變更:

原始地址 目的地地址 重新導向類型 國家代碼

/images

https://images.otherdomain.com

rewrite (200)

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

結尾斜線和乾淨的 URL

若要建立乾淨的 URL 結構,像是 about 而不是 about.html,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

Placeholders

您可以使用以下範例程式碼,將資料夾結構中的路徑重新導向到另一個資料夾中的相符結構。

原始地址 目的地地址 重新導向類型 國家代碼

/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 /documents/」,「status」: 「<US>「}]