AWS Cloudfront分发多语言角度应用程序

Posted 2021-04-17

我有一个Angular应用程序，它存储在AWS S3存储桶中并由Cloudfront分发。

现在我想用多种语言分发我的应用程序。我已经翻译了我的角度应用程序和我构建的每种语言。

所以我的S3桶看起来像这样：

de
   /index.html
   /script.js
en
   /index.html
   /script.js

我希望为每种语言提供另一个应用程序。

在Cloudfront中，我创建了两个Origins，它们指向Origin Path /de和/en

所以我的URL架构是这样的：

<appname>.<mydomain>.com/:lang

但我的问题是，我没有得到错误页面来使用这些特定的语言文件夹。我需要这些错误响应处理程序来在404发生时传递角度应用程序（由于重新加载）

有谁知道我怎么解决这个问题？或者我应该为每种语言再创建一个子域？所以它看起来像这样：

<lang>.<appname>.<mydomain>.com

答案

我最近碰到了同样的问题。我的情况：

• 我有一个Angular 5应用程序
• 我正在使用i18n 2种语言（en＆fr）
• S3用于网站托管和Cloudfront用于CDN和自定义域名/ ssl证书
• 我的默认语言是EN，所以https://example.com重定向到https://example.com/en/
• 当用户直接导航到路线（例如https://example.com/en/product/1234）时，它也应该工作，而不管子文件夹的数量

解：

• 创建2个单独的部署，每种语言1个（en，fr）。 Git bash倾向于将/ en /替换为本地文件夹，因此请确保index.html文件包含正确的基本URL

ng build -prod -aot --base-href / en / --i18nFile = src / locale / messages.en.xlf --i1nFormat = xlf --locale = en

• 将它们部署到S3存储桶根目录下的/ en /和/ fr /文件夹中
• 创建新的CloudFront分配。确保将默认根对象保留为空！
• 将您的存储桶添加为S3源（否则您将这样做）。
• 现在，创建一个新的Lambda函数，使用Node 6.10。重要提示：选择US-EAST-1，因为这是Lambda @ Edge支持的唯一区域。码：

const path = require('path')

exports.handler = (evt, ctx, cb) => {
  const { request } = evt.Records[0].cf

  if (!path.extname(request.uri)) {
      if (request.uri.startsWith('/fr'))
        request.uri = '/fr/index.html'
      else
        request.uri = '/en/index.html'
  }
  cb(null, request)
}

另一答案

我有同样的问题，但也希望自动重定向到最近的语言

<mydomain>.com/

使用Dries Van Hansewijck的解决方案和npm的语言环境包，您可以使用以下代码进行重定向：

const path = require('path');
const locale = require("locale");
const supportedLocales = new locale.Locales(['en', 'de']);
locale.Locale["default"] = new locale.Locales('de');

module.exports.pendixPortalI18n = (event, context, callback) => {
  const { request } = event.Records[0].cf;
  const locale = getBestLocale(request);
  if (!path.extname(request.uri)) {
    console.log(JSON.stringify(event, null, 2));
    if (request.uri.startsWith('/en')) {
      console.log('ENGLISH detected')
      request.uri = '/en/index.html';
    } else if (request.uri.startsWith('/de')) {
      console.log('GERMAN detected')
      request.uri = '/de/index.html';
    } else {
      console.log('Default matching locale is ' + locale);
      request.uri = `/${locale}/index.html`;
    }
  }
  callback(null, request)
};

function getBestLocale(request) {
  /* First we try to find the accept-language value */
  if (request && request.headers
    && request.headers['accept-language'] && request.headers['accept-language'].length > 0
    && request.headers['accept-language'][0].value) {
    const acceptLanguage = request.headers['accept-language'][0].value;
    const locales = new locale.Locales(acceptLanguage);
    const bestMatch = locales.best(supportedLocales);
    console.log("You asked for: " + JSON.stringify(acceptLanguage));
    console.log("We support: " + supportedLocales);
    console.log("Our default is: " + locale.Locale["default"]);
    console.log('best match is ' + bestMatch);
    return bestMatch;
  }
  return 'de';
}

在这里，我们尝试在支持的语言列表中查找用户的语言。为此，您需要将accept-language标头转发到cloudfront中的origin（在行为选项卡中）。如果用户的语言不在支持的语言列表中，我们将重定向到德语。

以上是关于AWS Cloudfront分发多语言角度应用程序的主要内容，如果未能解决你的问题，请参考以下文章

AWS CloudFront CNAME 和分发域名关系不明确

AWS Cloudfront 分发保持“进行中”55 分钟并计数

CloudFront 分发和 AWS 颁发的证书提供 SSL_ERROR_NO_CYPHER_OVERLAP

如何在 AWS Forgot Password 场景中支持多语言电子邮件

如何在单个 EXE 中嵌入多语言 *.resx（或 *.resources）文件？

AWS Cloudfront 导致 CSRF 令牌不匹配异常