URL 正規化処理を Lambda@Edge から CloudFront Functions に移行した話 /jawsug-asa-21-session

# JAWS UG 朝会 #21 の セッション資料です。
https://jawsug-asa.connpass.com/event/211381/

# スライドの詳細ブログ
CloudFront Functions を AWS CLI で触る ― ついでにブログの URL 正規化を Lambda@Edge から移行した - michimani.net
https://michimani.net/post/aws-normalize-url-using-cloudfront-functions/

CloudFront Functions でサポートされているランタイムについて調べてみた - michimani.net
https://michimani.net/post/aws-about-runtime-of-cloudfront-functions/

Transcript

1. 2021.05.27 @michimani210 URL Lambda@Edge CloudFront Functions [JAWS-UG #21] #jawsug_asa
2. # # AWS AWS CLI AWS Certificate Manager # : https://michimani.net / Yoshihiro Ito @michimani210
3. 0. 1. URL 2. CloudFront Functions 3. Lambda@Edge 4. AWS CLI 5.
4. 0.
5. CloudFront + S3 0. CloudFront S3 index.html about/index.html post/hoge/index.html post/fuga/index.html
6. Lambda@Edge 0. Lambda@Edge Viewer Request Viewer Response Origin Request Origin Response
7. Lambda@Edge 0. Lambda@Edge Viewer Request Viewer Response Origin Request Origin Response Viewer Request
8. 1. URL
9. 1. URL URL 1 URL S3 index.html /
10. 1. URL : S3 CloudFront + S3 index.html https://michimani.net/about/index.html https://michimani.net/about/ 403
11. 1. URL : S3 CloudFront + S3 index.html https://michimani.net/about/index.html https://michimani.net/about/ 403 index.html S3 about/index.html index.html http://michimani.net/
12. 1. URL : index.html URL https://michimani.net/about/ https://michimani.net/about/index.html
13. 1. URL : index.html URL https://michimani.net/about/ https://michimani.net/about/index.html 301 https://michimani.net/about/ HTTP/1.1 301 Found Location: https://michimani.net/about/
14. 1. URL : / CloudFront + S3 / https://michimani.net/about/ https://michimani.net/about 403
15. 1. URL : / CloudFront + S3 / https://michimani.net/about/ https://michimani.net/about 403 301 https://michimani.net/about/ HTTP/1.1 301 Found Location: https://michimani.net/about/ ( ) / http://michimani.net
16. 1. URL URL https://michimani.net/about/index.html https://michimani.net/about/ https://michimani.net/about https://michimani.net/about/ 1 URL
17. 2. CloudFront Functions
18. 2. CloudFront Functions Lambda@Edge (13 ) CloudFront Functions CloudFront (215 ) Amazon CloudFront CloudFront Functions https://aws.amazon.com/jp/about-aws/whats-new/2021/05/cloudfront-functions/
19. 2. CloudFront Functions Lambda@Edge ( ) () Origin CloudFront Functions Lambda@Edge JavaScript (ES 5.1 ) Node.js/Python 10 KB 1 MB (50 MB) 2 MB 128 MB (10 GB) 1ms 5 s (30 s)
20. 2. CloudFront Functions Lambda@Edge ( ) () Origin SSR CloudFront Functions Lambda@Edge JavaScript (ES 5.1 ) Node.js/Python 10 KB 1 MB (50 MB) 2 MB 128 MB (10 GB) 1ms 5 s (30 s)
21. 3. Lambda@Edge
22. 3. Lambda@Edge 
 Node.js JavaScript 
 991.0 byte 
 2 MB 
 Lamba@Edge
23. 3. Lambda@Edge : Lambda Build Duration ( ) Duration ( )
24. 3. Lambda@Edge : Lambda Build Duration ( ) Duration ( ) 0.7333 ms
25. 4. AWS CLI
26. 4. AWS CLI CloudFront aws cloudfront ・create-function ・delete-function ・describe-function ・get-function ・list-functions ・publish-function ・test-function ・update-function v1 1.19.64 v2 2.2.2 (2021/05/27 06:30 JST) 1.19.81 2.2.6
27. 4. AWS CLI 1. Function を作成 2. 作成した Function を確認 3. Function をテスト 4. Function を公開 5. Function を Distribution に紐付け 6. Function の状態を確認 ※このスライド内に記載しているコマンドは v1 での実行を想定しています
28. 4. AWS CLI Function : Function (cf2.js)
29. 4. AWS CLI Function : Function (cf2.js) Origin (S3)
30. 4. AWS CLI Function : Function (cf2.js) Origin (S3) / index.html / Viewer 301 HTTP
31. 4. AWS CLI Function : Function (cf2.js) Origin (S3) / index.html / Viewer 301 HTTP Viewer URI index.html Origin (S3)
32. 4. AWS CLI : create-function 1. Functions
33. 4. AWS CLI : create-function 1. Functions cloudfront-js-1.0
34. 4. AWS CLI : describe-function 2. Function
35. 4. AWS CLI : describe-function 2. Function
36. 4. AWS CLI : (test-event.json)
37. 4. AWS CLI : (test-event.json) /about /about/ 301
38. 4. AWS CLI : test-function 3. Function
39. 4. AWS CLI : test-function 3. Function —if-match ETag describe-function ETag
40. 4. AWS CLI : test-function 3. Function —if-match ETag describe-function ETag TestResult.FunctionOutput JSON
41. 4. AWS CLI : test-function 3. Function —if-match ETag describe-function ETag TestResult.FunctionOutput JSON jq
42. 4. AWS CLI : test-function 3. Function
43. 4. AWS CLI : publish-function 4. Function
44. 4. AWS CLI : publish-function 4. Function —if-match ETag describe-function ETag
45. 4. AWS CLI 5. Function Distribution 新しいコマンドを使うのではなく、update-distribution i. describe-distribution ii. FunctionAssociations iii. update-distribution
46. 4. AWS CLI 5. Function Distribution :
47. 4. AWS CLI 5. Function Distribution : Lambda@Edge
48. 4. AWS CLI 5. Function Distribution :
49. 4. AWS CLI 5. Function Distribution : Function ARN aws cloudfront describe-function \ —name “${FN_NAME}” \ —query “FunctionSummary.FunctionMetadata.FunctionARN” \ —output text
50. 4. AWS CLI 5. Function Distribution :
51. 4. AWS CLI 6. Function
52. 4. AWS CLI 6. Function DEPLOYED OK
53. 5. URL CloudFront CloudFront Functions Lambda@Edge Lambda@Edge AWS CLI # CloudFront Functions AWS CLI URL Lambda@Edge https://michimani.net/post/aws-normalize-url-using-cloudfront-functions/ CloudFront Functions https://michimani.net/post/aws-about-runtime-of-cloudfront-functions/
54. #jawsug_asa