Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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/

573d75e1a72107ff5c806d7e70a9e67d?s=128

YoshihiroITO

May 27, 2021
Tweet

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