cloudfront 中特定于语言的 404 错误页面

Question

我有一个为 s3 存储桶提供服务的 Cloudfront 发行版。为了使页面多语言，我添加了lambda@edge函数，该函数分析Accept-Language标头并将

/<page>

重定向到

/en/<page>

或

/de/<page>

。

重定向发生时返回代码为 303，以便用户将

/en/<page>

作为浏览器中显示的路径，并且可以通过转到

/de/<page>

来切换语言。

有效！但是如果出现 404 错误又会怎样呢？如果我在 S3 或 Cloudfront 中配置自定义 404 页面并且用户请求

/de/<non-existing-page>

，他会被重定向到自定义 404 页面（例如

/error-pages/404

）。但该页面未翻译！

有没有办法让404页面语言具体化？取决于用户来自

/en/<page>

还是

/de/<page>

？

Answer 1

我找到了解决方案。

1. 使用 2 个 S3 存储桶（或任意数量，取决于您的语言），每种语言一个，并将每种语言的文件放入相应的存储桶中
2. 将每个存储桶的

   ErrorDocument

   配置到特定于语言的 404 页面
3. 在您的 CloudFront 分配中，为每种语言配置源和行为，以便

   PathPattern

   /<language>/*

   定向到从 s3 存储桶获取语言的源

   <language>

Answer 2

另一种解决方案是使用根错误页面来重定向到更具体的错误页面。这是根错误页面中的 JavaScript 逻辑示例，默认为英语错误页面。

let languageFromUrlPath = window.location.pathname.split('/')[1];
const errorPagePath = `/${languageFromUrlPath}/404`;
try {
    const response = await fetch(errorPagePath);
    languageFromUrlPath = response.status === 200 ? languageFromUrlPath : 'en';
} catch (error) {
    languageFromUrlPath = 'en';
}
window.location.href = `/${languageFromUrlPath}/404`;

我想这不是最佳实践解决方案，但对于简单的用例来说可能没问题，因为它不需要任何设置或 DevOps 流程更改。