AWS Cloudfront分发多语言角度应用程序 [英] AWS Cloudfront distribute multilingual angular apps
问题描述
我有一个Angular应用程序，该应用程序存储在AWS S3存储桶中，并由Cloudfront分发。
I have an Angular app which is store in a AWS S3 bucket and distributed by Cloudfront.
现在我想用多种语言分发我的应用程序。我已经翻译了我的角度应用程序以及构建时使用的每种语言。
Now I want to distribute my app in multiple languages. I've already translated my angular app and for each language I have on build.
所以我的S3存储桶看起来像这样：
So my S3 bucket looks like this:
de
/index.html
/script.js
en
/index.html
/script.js
我想为每种语言提供其他应用程序。
For each language I want to serve another app.
在Cloudfront中，我创建了两个Origins，分别指向Origin Path / de 和 / en
In Cloudfront I created two Origins which points to Origin Path /de and /en
所以我的URL架构是这样的：
So my URL schema is like this:
<appname>.<mydomain>.com/:lang
但是我的问题是，我没有得到错误页面使用这些特定的语言文件夹。
我需要这些错误响应处理程序来在404发生时（由于重新加载）交付有角度的应用程序
But my problem is, I dont get the Error Pages to work with these specific language folders. I need these Error Response Handlers to deliver the angular app(s) when a 404 occurred (due to a reload)
有人知道我该如何解决这个？还是应该为每种语言再创建一个子域？因此看起来像这样：
Does anyone know how I can solve this? Or should i create one more subdomain for each language? So it looks like this:
<lang>.<appname>.<mydomain>.com
推荐答案
我最近遇到了同样的问题。我的情况：
I've recently bumped into the same problem. My situation:
- 我有一个Angular 5应用
- 我正在使用i18n两种语言（en& fr）
- S3用于网站托管，而Cloudfront用于CDN&自定义域名/ ssl证书
- 我的默认语言是EN，因此 https://example.com 重定向到 https://example.com/en/
- 当用户直接导航到路线时（例如 https://example.com/en/product/ 1234 ），它也应该起作用，而不考虑子文件夹的数量
- I have an Angular 5 app
- I'm using i18n for 2 languages (en & fr)
- S3 for website hosting and Cloudfront for CDN & custom domain name/ssl certificate
- My default language is EN, so https://example.com redirects to https://example.com/en/
- When a user navigates directly to a route (eg https://example.com/en/product/1234), it should also work, irrespectively of the number of subfolders
解决方案：
- 创建2个单独的部署，每种语言1个（zh，fr）。 Git bash倾向于用本地文件夹替换/ en /，因此请确保您的index.html文件包含正确的基本url
- Create 2 separate deployments, 1 for each language (en, fr). Git bash tends to replace the /en/ with a local folder, so make sure your index.html file contains the right base url
ng build -prod -aot --base-href / en / --i18nFile = src / locale / messages.en.xlf --i1nFormat = xlf --locale = en
ng build -prod -aot --base-href /en/ --i18nFile=src/locale/messages.en.xlf --i1nFormat=xlf --locale=en
- 将它们部署到S3存储桶根目录的/ en /和/ fr /文件夹中
- 创建新的CloudFront发行版。确保将默认根对象保留为空！
- 将存储桶添加为S3起源（否则会如此）。
- 现在，创建一个新的 Lambda函数，使用节点6.10。重要提示：选择US-EAST-1，因为这是Lambda @ Edge支持的唯一区域。代码：
- Deploy these into an /en/ and /fr/ folder at the root of your S3 bucket
- Create a new CloudFront distribution. Make sure to leave the Default Root Object empty!
- Add your bucket as an S3 origin (as you otherwise would).
- Now, create a new Lambda function, use Node 6.10. Important: select US-EAST-1, as this is the only region supported by Lambda@Edge. Code:
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->行为->默认行为
- 在Lambda函数关联中选择原始请求作为事件类型，然后粘贴Lambda函数的ARN。
- Next: publish this version (in the Action dropdown)
- Copy the ARN of this version, and go back to CloudFront -> Behaviors -> Default Behavior
- Select Origin Request as Event Type in the Lambda Function Associations, and paste the ARN of the Lambda function.
使用基本路径参数构建Angular将为Angular应用建立正确的子目录。重写将确保不会重写资源文件，但是所有路由都会重定向到index.html
Building Angular with the base path parameter will establish the right subdirectory for your Angular app. The rewrite will make sure that resource files will not be rewritten, but all your routes will be redirected to index.html
这篇关于AWS Cloudfront分发多语言角度应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
