AWS Amplify 重定向配置异常导致Angular多语言应用静态资源加载错误

我完全懂你现在的困扰——Angular多语言构建后部署到AWS Amplify，明明/de路径下的页面能正常打开，但像main.js这类静态资源却被错误返回index.html，这肯定是重定向规则的顺序和匹配逻辑出了问题。

咱们先拆解下你现有配置里的问题：你设置的/de/<*>规则会匹配/de路径下的所有请求，包括静态资源文件。当浏览器请求www.my-app.com/de/main.js时，这个规则先被命中，直接返回了/de/index.html，而不是让Amplify返回实际的静态资源文件。

要解决这个问题，核心思路是优先放行静态资源请求，只对非静态资源的SPA路由请求做重定向处理。下面是调整后的完整重定向配置：

[
  {
    "source": "https://my-app.com",
    "status": "302",
    "target": "https://www.my-app.com"
  },
  {
    "source": "/<*>.{css,gif,ico,jpg,js,png,txt,svg,woff,ttf,map,json}",
    "status": "200",
    "target": "/<*>.{css,gif,ico,jpg,js,png,txt,svg,woff,ttf,map,json}"
  },
  {
    "source": "/de/<*>.{css,gif,ico,jpg,js,png,txt,svg,woff,ttf,map,json}",
    "status": "200",
    "target": "/de/<*>.{css,gif,ico,jpg,js,png,txt,svg,woff,ttf,map,json}"
  },
  {
    "source": "/de/<*>",
    "status": "404-200",
    "target": "/de/index.html"
  },
  {
    "source": "/<*>",
    "status": "404-200",
    "target": "/index.html"
  }
]

我来给你解释下每个规则的作用：

• 第一条规则保持不变，处理根域名到www域名的跳转
• 第二条规则：匹配根路径下的所有静态资源文件，直接返回对应的资源，不做重定向
• 第三条规则：匹配/de路径下的所有静态资源文件，同样直接返回对应的资源
• 第四条规则：只对/de路径下非静态资源的SPA路由请求，重定向到/de/index.html（404-200状态码用于SPA的客户端路由）
• 第五条规则：处理根路径下的SPA路由请求，重定向到/index.html

这样调整后，当浏览器请求www.my-app.com/de/main.js时，会先匹配到第三条规则，直接返回正确的main.js文件；而访问www.my-app.com/de/some-route这类路由时，才会触发第四条规则，返回/de/index.html来支持Angular的客户端路由。

另外要注意，Amplify的重定向规则是从上到下匹配的，所以一定要把静态资源的放行规则放在最前面，避免被后面的SPA路由规则覆盖。

内容来源于stack exchange