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

Question

我有一个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

Answer 1

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

• 我有一个Angular 5应用
• 我正在将i18n用于2种语言（英语和法语）
• S3用于网站托管，而Cloudfront用于CDN和自定义域名/ ssl证书
• 我的默认语言是EN，因此https://example.com重定向到https://example.com/en/
• 当用户直接导航到某条路线时（例如https://example.com/en/product/1234），无论子文件夹的数量如何，它也都可以工作

解：

• 创建2个单独的部署，每种语言（en，fr）1个。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原始地址（否则将添加）。
• 现在，使用Node 6.10 创建一个新的Lambda函数。重要提示：选择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)
}

• 下一步：发布此版本（在“操作”下拉列表中）
• 复制此版本的ARN，然后返回CloudFront-> Behaviors-> Default Behavior
• 在Lambda函数关联中选择“ 原始请求”作为事件类型，然后粘贴Lambda函数的ARN。

使用基本路径参数构建Angular将为Angular应用建立正确的子目录。重写将确保不会重写资源文件，但是所有路由都会重定向到index.html