Lecture 173: Hands On: CloudFront Functions
- 课程:[NEW] AWS Certified Advanced Networking Specialty 2026
- 视频时长:08:17
- 来源:Udemy Lecture 28556171
- Slide 数量:10
- 画面切换:00:56、02:18、02:49、03:13、05:25、06:06、06:49、07:40、07:54
扫描说明
逐条读取了 Udemy 页面中的 195 条英文 Transcript cue,并按时间轴扫描全长约 08:17 的视频。依据 EC2 多语言源站、CloudFront Cache Policy、Distribution 配置、Origin 验证、Function 代码、Test Event、发布关联,以及 France/Germany/默认国家三类结果划分为 10 个小节。截图均在侧栏关闭、播放器控件隐藏后截取,统一为 1364×770。
Transcript 来自 Udemy 页面自带的英文自动字幕,没有使用 ASR。下面保留页面原文,包括其中的语法或识别错误。
1. 创建包含三种语言路径的 EC2 Origin
时间范围:00:00–00:56
总结 / Summary
中文
先启动 Amazon Linux 2、t2.micro 的 EC2 Instance,并通过 User Data 安装简单 Web Server。源站提供 /en、/fr 和 /de 三个路径,分别返回 English、French 与 German 版本,为后续按国家重定向建立测试数据。
English
The demo starts an Amazon Linux 2 t2.micro EC2 instance and uses user data to install a simple web server. The origin exposes /en, /fr, and /de paths returning English, French, and German versions for country-based redirect testing.
Transcript
00:00 Okay, so let's practice using CloudFront functions.
00:03 So to do so, I'm going to go and create an EC2 instance.
00:06 So let me terminate this one from before.
00:09 And I'm going to launch an instance, Amazon Linux 2.
00:13 It's going to be a T2 micro.
00:15 I will configure the instance details.
00:17 And for these data,
00:18 I'm going to use the user data from the functions directory.
00:22 And what this does is it will create again, a web server.
00:25 And this time we'll have three folders.
00:26 We have EN for English, FR for French,
00:29 and DE for Dutch.
00:31 So the idea is that you're going to have
00:33 three versions of index.html,
00:35 one in English, one in French and one in German.
00:38 So we are going to paste this
00:44 into here and click on Add Storage,
00:46 Add Tags, and then Configure Security Group.
00:49 We'll add SSH and then HTTP on port 80.
00:53 Review and Launch.
00:53 Launch. And we are good to go.
2. 创建 CloudFront Distribution 与 Cache Policy
时间范围:00:56–02:18
总结 / Summary
中文
以 EC2 Public DNS 作为 Custom Origin 创建 CloudFront Distribution。自定义 Cache Policy 把 CloudFront-Viewer-Country Header 纳入 Cache Key,使不同国家的请求可以缓存为不同对象;同时保持合适的 TTL、Cookie 和 Query String 设置。
English
A CloudFront distribution is created with the EC2 public DNS name as a custom origin. A custom cache policy includes the CloudFront-Viewer-Country header in the cache key so requests from different countries can be cached separately, alongside the chosen TTL, cookie, and query-string settings.
Transcript
00:56 So this EC2 instance will have three different,
00:58 obviously, languages.
01:00 And what we want to do is to have CloudFront redirect
01:02 to the correct language based on the user location.
01:05 So to do so, what I'm going to do
01:06 is that I'm going to get the public IP for DNS,
01:09 and we're going to create a new CloudFront distribution.
01:12 So we'll create this distribution right now.
01:14 The origin domain is right here, we're going to use this.
01:17 It's HTTP.
01:19 And then in terms of path, we're good to go.
01:21 Name, we're good to go.
01:22 Custom headers, we're good to go.
01:23 And I will go to additional settings.
01:27 Scroll down a bit more and under
01:29 "Cache Key and Origin Requests",
01:32 we're going to use a cache key policy
01:34 and origin request policy.
01:35 And we need to create our own cache policy.
01:38 So let's create a policy,
01:41 and I'll call this one "DemoPolicy."
01:43 And what we want to do is to have access
01:45 to a CloudFront header,
01:46 which represents the country, and cache on this.
01:49 So for headers, I'm going to include the following header.
01:52 And I want us to have the CloudFront-Viewer-Country.
01:57 And this country is going to give us information
02:01 around which country is the requests originating from.
02:04 And we're going to be able to cache
02:05 based on the value of this country.
02:07 So let's go ahead and then save this cache policy,
02:12 my demo policy.
02:13 And in here,
02:14 I'm going to be refreshing and use the demo policy.
3. 配置 Default Cache Behavior
时间范围:02:18–02:49
总结 / Summary
中文
Distribution 使用自定义 Cache Policy,并把 Viewer Protocol Policy 设置为 Redirect HTTP to HTTPS。默认 Root Object 与其他选项保持简化配置,以便专注 Function 的 Viewer Request 重定向。
English
The distribution uses the custom cache policy and sets the viewer protocol policy to Redirect HTTP to HTTPS. Other settings remain simple so the exercise can focus on viewer-request redirects performed by the function.
Transcript
02:18 Okay, great.
02:20 And for function associations, we'll see this later on,
02:23 this is if we want to use CloudFront functions
02:25 around that edge, we will set this up right after.
02:27 So let me scroll down.
02:29 And what I want to do though,
02:30 is to set up a default root object,
02:31 which is what happens in case you're just requesting
02:34 the root URL instead of a specific object.
02:37 And I want it to be /en/index.html.
02:41 So we want the default to redirect
02:43 to the index.html of my English language.
02:45 Okay, let's create this distribution.
02:48 And it's deploying.
4. 直接验证 Origin 的语言页面
时间范围:02:49–03:13
总结 / Summary
中文
在部署 Function 前,先使用 EC2 Public DNS 直接访问 /en、/fr 和 /de,确认源站确实能返回三种语言页面。这样可以把后续错误范围限定在 CloudFront 配置或 Function 逻辑。
English
Before deploying a function, the EC2 public DNS name is used to test /en, /fr, and /de directly. Confirming all three language pages at the origin isolates later problems to CloudFront configuration or function logic.
Transcript
02:49 So now let's go back into our EC2 instance.
02:52 We're going to copy the DNS.
02:54 And if I do /en/index.html,
02:58 I'm going to get the English version of the website.
03:00 If I do /fr/index.html,
03:03 I'm getting the French version of the website.
03:05 And then I'll get the less version of the websites, okay?
03:09 So this is perfect.
03:10 We have our web server set up correctly.
5. 编写基于 CloudFront-Viewer-Country 的 Function
时间范围:03:13–05:25
总结 / Summary
中文
创建 DemoFunction,并在 Viewer Request 中读取 CloudFront-Viewer-Country Header。若国家代码为 FR 或 DE,则把 URL 重定向到 /fr 或 /de;其他或缺失国家代码使用 /en。Function 返回 HTTP 302 和包含目标语言路径的 Location,逻辑在 Edge 执行,避免请求到达 Origin 后再处理。
English
DemoFunction reads the CloudFront-Viewer-Country header during the viewer request. FR and DE are redirected to /fr and /de, while other or missing country codes use /en. The function returns HTTP 302 with a Location containing the language path, performing the logic at the edge before the request reaches the origin.
Transcript
03:13 And now let's deploy some functions
03:16 onto our CloudFront distribution.
03:18 So to do so, on the left hand side there is functions.
03:21 And we're going to create a function,
03:23 and I'll call this one "DemoFunction."
03:25 And this function will take a request.
03:28 And based on the country it receives,
03:30 will redirect to the proper version of the websites.
03:34 So these are a bit of code, okay.
03:35 So we need to copy some code.
03:37 So the code is in function.js,
03:40 and you can have a look at the code in details later on,
03:42 but this is not necessary for this hands-on.
03:44 But the idea is that if we don't have any information
03:47 around the country that is assigned to the request,
03:50 means there is no country requested,
03:52 then we're going to do a lookup
03:54 of the CloudFront-Viewer-Country header.
03:57 And in case the header does include
03:59 one of the country codes from above,
04:01 so FR or DE, then redirect to this,
04:04 else, redirect to the default of English.
04:08 And then use a redirect status code to say
04:10 that you should go instead to a URL
04:12 that contains the full /en or /fr.
04:15 So this is just a bit of code,
04:17 but this code executes at the edge.
04:19 And the idea is that this code is performing
04:21 a very, very simple lookup of the URL and some headers,
04:26 to understand whether or not the request should be changed,
04:29 and perform a little bit of logic that could be annoying
04:31 to perform all the way into our origin.
04:35 So we're going to save these changes for our function.
04:38 And then we can test it,
04:40 so we can test "Viewer Request" and "Development."
04:42 And if the URL is
04:47 /index.html for example, from this IP address.
04:51 And then in terms of request header,
04:52 so let's set some headers that could be going into
04:55 the headers themselves.
04:56 So we'll do the host header to be...
05:01 Example, ww.example.com and just have it all lower case.
05:05 Then we're going to add a new header,
05:07 so we're going to say the accept header
05:09 is going to be text/html.
05:14 And finally, one last header,
05:15 which is the CloudFront added header.
05:17 So cloudfront-viewer-country,
05:21 which is going to be fr, lowercase as well.
6. 使用 Test Event 验证 Redirect
时间范围:05:25–06:06
总结 / Summary
中文
在 Development Stage 构造 Viewer Request Test Event,加入 Host、Accept 与 CloudFront-Viewer-Country Headers。FR 应返回 /fr/index.html,DE 返回 /de/index.html,其他国家如 PL 返回默认 /en/index.html,从而验证 Status 302 与 Location 逻辑。
English
A development-stage viewer-request test event supplies Host, Accept, and CloudFront-Viewer-Country headers. FR should return /fr/index.html, DE should return /de/index.html, and another country such as PL should return the default /en/index.html, validating the 302 status and Location logic.
Transcript
05:25 So let's test this function.
05:30 And as you can see, the response is saying, yes,
05:32 do a 302 and be redirected from the /index.html
05:38 into the /fr/index.html,
05:41 because it turns out that your country was FR.
05:45 If your country is DE,
05:47 and I test again the function,
05:48 it's going to do /de/index.html.
05:52 If there is another country,
05:54 for example, a PL,
05:56 and test this function, as you can see,
05:58 the return value is /en/index.html,
06:01 because this is the default value.
06:03 Okay, so our function seems to be working correctly.
7. Publish 并关联 Viewer Request
时间范围:06:06–06:49
总结 / Summary
中文
测试通过后 Publish Function,并在 Associated Distributions 中把它关联到目标 Distribution 的 Viewer Request Event。此后每个 Viewer Request 都会先经过国家代码检查和路径重定向。
English
After successful tests, the function is published and associated with the target distribution on the viewer-request event. Every viewer request now passes through the country-code check and path redirect.
Transcript
06:06 So what I'm going to do
06:06 is that I'm going to publish this function.
06:12 And now we're going to associate it
06:13 with a specific distribution.
06:16 So we're going to add an association.
06:18 We select the distribution, and I need to remember the name,
06:23 the ID of my distribution.
06:25 So it's one of these,
06:27 and I believe it is the one right here.
06:30 Okay, that's perfect. This is the one.
06:32 We're going to copy the distribution ID.
06:34 So this is E9.
06:38 Then it's going to act on viewer request.
06:41 And the cache behavior is going to be default.
06:43 Let's add this association.
06:45 So now my function is associated with my distribution.
8. France 请求重定向到 French 版本
时间范围:06:49–07:40
总结 / Summary
中文
未使用 VPN 时首先看到默认 English 页面。连接 France VPN 后,为避免浏览器缓存影响,在 Private Window 访问 Distribution Root URL;CloudFront 注入 FR 国家代码,Function 将请求重定向到 /fr,返回 French 页面。
English
Without a VPN, the default English page is shown. After connecting through France and using a private window to avoid browser cache, CloudFront injects the FR country code and the function redirects the root URL to /fr, returning the French page.
Transcript
06:49 And so what happens is that if I go to my website
06:52 through CloudFront,
06:53 so let's look at the CloudFront distribution name right now,
06:56 and press enter.
06:58 Right now, I am in the English version of the website.
07:02 And that is the case because I access my website
07:04 from a country that is not France or not Germany.
07:08 So if I use my VPN though, and I try to connect to France...
07:12 I'm connected to France, now.
07:15 (computer dings)
07:16 I'm connected.
07:17 And I try again to remove,
07:18 so the /en, to remove I just press enter.
07:21 And I probably need to use a incognito webpage
07:24 because right now, I guess the English version
07:27 is cached for me.
07:28 So let me open an incognito webpage or private window.
07:32 Now I am in private mode, and if I enter the URL, okay,
07:35 the same as before, the root URL, and I press enter,
07:37 I get redirected to the French version of my website,
9. Germany 请求重定向到 German 版本
时间范围:07:40–07:54
总结 / Summary
中文
把 VPN 切换到 Germany 后再次访问 Root URL,国家代码变为 DE,Function 将请求重定向到 /de 并返回 German 页面。
English
After switching the VPN to Germany, the country code becomes DE. The function redirects the root URL to /de and returns the German page.
Transcript
07:40 and this is great.
07:40 And then if I try again to change to Germany
07:43 this time using my VPN...
07:46 (computer dings) And I'm in Germany now,
07:47 and open the URL and try again.
07:50 Well, I am on the German version of my websites.
10. 其他国家使用默认 English 版本
时间范围:07:54–08:17
总结 / Summary
中文
对于 Canada 等未映射到专属语言路径的国家,Function 执行 Default Branch,重定向到 /en 并返回 English 页面。该测试完成 FR、DE 与默认路径三种分支验证。
English
For a country such as Canada that has no dedicated language mapping, the function follows the default branch, redirects to /en, and returns the English page. This validates the FR, DE, and default branches end to end.
Transcript
07:54 Okay?
07:54 And if I try another country,
07:56 for example, a random country in this list,
07:59 let's say for example, Canada.
08:02 (computer dings)
08:03 And try to open the URL again, press enter.
08:07 I get redirected by default to the English version
08:10 of the website, okay?
08:11 So that's it for this cool hands-on,
08:12 it's a nice way to demonstrate functions.
08:14 I hope you liked it,
08:15 and I will see you in the next lecture.
整讲总结 / Overall Summary
中文
本实验用 CloudFront Function 在 Viewer Request 阶段读取 CloudFront-Viewer-Country Header,并通过 302 Redirect 把用户导向 /fr、/de 或默认 /en。Cache Policy 必须包含国家 Header,Function 需要先在 Development Stage 测试,再 Publish 并关联 Distribution。France、Germany 和 Canada 的 VPN 验证说明逻辑在 Edge 正确执行,同时避免把简单地域路由负担交给 Origin。
English
This exercise uses a CloudFront Function at the viewer-request event to read CloudFront-Viewer-Country and issue a 302 redirect to /fr, /de, or the default /en path. The cache policy includes the country header, and the function is tested in development before publishing and associating it with the distribution. VPN tests from France, Germany, and Canada confirm that the edge logic works and keeps simple geographic routing away from the origin.
返回顶部 ↑