使用重定向 - AWS Amplify 托管

本文属于机器翻译版本。若本译文内容与英语原文存在差异,则一律以英文原文为准。

使用重定向

重定向使 Web 服务器能够将导航从一个网址重新路由到另一个网址。使用重定向的常见原因包括:自定义网址的外观、避开失效链接、移动应用程序或站点的托管位置而不更改其地址以及将所请求的网址更改为 Web 应用程序需要的形式。

重定向类型

Amplify 在控制台中支持以下重定向类型。

永久重定向 (301)

301 重定向旨在持续更改 Web 地址的目标。原始地址的搜索引擎排名历史记录应用于新目标地址。重定向发生在客户端上,因此浏览器导航栏在重定向后显示目标地址。

使用 301 重定向的常见原因包括:

  • 为在页面地址更改时避开失效链接。

  • 为在用户在地址中出现可预测拼写错误时避开失效链接。

临时重定向 (302)

302 重定向旨在临时更改 Web 地址的目标。原始地址的搜索引擎排名历史记录不应用于新目标地址。重定向发生在客户端上,因此浏览器导航栏在重定向后显示目标地址。

使用 302 重定向的常见原因包括:

  • 为提供绕道目标,同时对原始地址进行修复。

  • 为用户界面的 A/B 比较提供测试页面。

    注意

    如果您的应用程序返回意外的 302 响应,则该错误很可能是由于您对应用程序的重定向和自定义标头配置所做的更改所致。要解决此问题,请验证您的自定义标头是否有效,然后为您的应用程序重新启用默认 404 重写规则。

重写 (200)

200 重定向(重写)旨在显示来自目标地址的内容,就像它是从原始地址提供的一样。搜索引擎排名历史记录继续应用于原始地址。重定向发生在服务器端上,因此浏览器导航栏在重定向后显示原始地址。使用 200 重定向的常见原因包括:

  • 为将整个站点重定向到新的托管位置而不更改站点的地址。

  • 为将流向单页 Web 应用程序 (SPA) 的所有流量重定向到其 index.html 页面以由客户端路由器功能处理。

找不到 (404)

当请求指向的地址不存在时,会发生 404 重定向。将显示目标页面 404,而不显示请求的页面。发生 404 重定向的常见原因包括:

  • 为在用户输入错误网址时避开失效链接消息。

  • 为使对不存在的 Web 应用程序页面的请求指向其 index.html 页面以由客户端路由器功能处理。

创建和编辑重定向

您可以在 Amplify 控制台中为应用程序创建和编辑重定向。在开始之前,您将需要有关重定向各个部分的以下信息。

原始地址

用户请求的地址。

目标地址

实际提供用户看到的内容的地址。

重定向类型

类型包括永久重定向 (301)、临时重定向 (302)、重写 (200) 或找不到 (404)。

一个由两个字母组成的国家/地区代码(可选)

这个值可以用于按地理区域细分用户对应用程序的体验。

在 Amplify 控制台中创建重定向
  1. 登录 AWS Management Console 并打开 Amplify 控制台。

  2. 选择要为其创建重定向的应用程序。

  3. 在导航窗格中,选择托管,然后选择重写和重定向。

  4. 在 “重写和重定向” 页面上,选择 “管理重定向”。

  5. 添加重定向的过程会有所不同,具体取决于您是要单独添加规则还是要进行批量编辑:

    • 要创建单个重定向,请选择添加重写

      1. 对于原始地址,输入用户请求的地址。

      2. 对于目标地址,请输入向用户呈现内容的目标地址。

      3. 对于类型,请从列表中选择重定向的类型。

      4. (可选)对于国家/地区代码,请输入一个由两个字母组成的国家/地区代码条件。

    • 要在 JSON 编辑器中批量编辑重定向,请选择打开文本编辑器

      1. 在重写和重定向 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.htmldifferent-filename.html 的重定向:

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

查询参数

您可以使用查询参数来更好地控制网址匹配。Amplify 会将所有查询参数转发到 301 和 302 重定向的目标路径,但以下情况除外:

  • 如果原始地址包含设置为特定值的查询字符串,则 Amplify 不会转发查询参数。在这种情况下,重定向仅适用于向具有指定查询值的目标网址发出的请求。

  • 如果匹配规则的目标地址包含查询参数,则不会转发查询参数。例如,如果重定向的目标地址为 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}]

单页 Web 应用程序 (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}]

结尾斜杠和清洁网址

为创建清洁网址结构(如 about 而不是 about.html),静态站点生成器(如 Hugo)会为具有 index.html (/about/index.html) 的页面生成目录。Amplify 通过在需要时添加结尾斜杠来自动创建清洁网址。下表重点介绍了几种不同情景:

用户在浏览器中的输入 地址栏中的网址 提供的文档

/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)

以下两个示例演示了使用通配符表达式的无效重定向。

原始地址 目标地址 重定向类型 国家/地区代码

/docs/<*>/content

/documents/<*>/content

permanent redirect (301)

/docs/<*>/content/<*>

/documents/<*>/content/<*>

permanent redirect (301)