使用AWS CloudFront与S3托管Angular客户端的URL重写配置问询

我之前也折腾过类似的场景，CloudFront的配置确实得结合Lambda@Edge才能灵活搞定这类路由需求，官方文档有时候讲得太散，我给你拆解下两个需求的具体实现方式：

需求一：将Query参数转换为友好路径（如domain.com?lang=en&fun=no → domain.com/en/no） #

这个需求本质是客户端路由的友好化，需要CloudFront和Angular路由配合，同时用Lambda@Edge做请求转发处理：

• 先在Angular里配置路由规则，把/en/no这类路径映射到对应组件，直接提取lang和fun作为路由参数：

  const routes: Routes = [
    { path: ':lang/:fun', component: YourMainComponent },
    // 其他路由规则...
  ];
  

• 然后在CloudFront里配置Viewer Request触发器的Lambda@Edge函数，核心作用是：当用户访问domain.com/en/no这类非静态资源路径时，确保请求转发到S3的index.html（毕竟Angular是单页应用，所有路由请求都得指向入口文件）。Lambda函数的核心逻辑大概是这样（Node.js示例）：

  exports.handler = async (event) => {
    const request = event.Records[0].cf.request;
    const uri = request.uri;
  
    // 如果请求的不是静态资源（比如.js/.css/.png等），就转发到index.html
    if (!uri.match(/\.[a-zA-Z0-9]{2,4}$/)) {
      request.uri = '/index.html';
    }
  
    return request;
  };
  

• 最后记得把S3桶的静态网站托管设置里，默认索引页和错误页都设为index.html——这样404请求会自动转发到Angular路由处理，避免友好路径返回404。

这样用户访问domain.com/en/no时，CloudFront会把请求转发到index.html，Angular路由直接解析路径里的lang=en和fun=no，实现友好路由的效果。

需求二：访问domain.com/en时指向domain.com但客户端知晓lang=en #

这个需求可以通过Lambda@Edge的Origin Request触发器来实现，核心是让Angular在初始化时能获取到lang=en的参数：

写一个Lambda函数，当请求路径是/en（或者其他语言路径）时，把请求转发到index.html，同时在查询字符串里添加lang=en参数：

exports.handler = async (event) => {
  const request = event.Records[0].cf.request;
  const uri = request.uri;

  // 匹配/lang格式的路径（支持带/结尾的情况）
  const langMatch = uri.match(/^\/([a-z]{2})\/?$/);
  if (langMatch) {
    const lang = langMatch[1];
    // 往查询参数里添加lang字段
    request.querystring = request.querystring ? `${request.querystring}&lang=${lang}` : `lang=${lang}`;
    // 转发到index.html
    request.uri = '/index.html';
  } else if (!uri.match(/\.[a-zA-Z0-9]{2,4}$/)) {
    // 其他非静态资源请求也转发到index.html
    request.uri = '/index.html';
  }

  return request;
};

之后在Angular里，初始化时读取URL的lang查询参数，设置对应的语言环境就行。

另外要注意，不管用哪种方案，都得配置好CloudFront的缓存策略，避免缓存了带特定语言参数的页面，导致不同语言的用户拿到错误的缓存内容。

内容的提问来源于stack exchange，提问作者Ori Refael