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/

YoshihiroITO

May 27, 2021
Tweet

More Decks by YoshihiroITO

Other Decks in Technology

Transcript

  1. 2021.05.27
    @michimani210
    URL Lambda@Edge
    CloudFront Functions
    [JAWS-UG #21]
    #jawsug_asa

    View full-size slide

  2. #
    # AWS
    AWS CLI
    AWS Certificate Manager
    #
    : https://michimani.net
    / Yoshihiro Ito
    @michimani210

    View full-size slide

  3. 0.
    1. URL
    2. CloudFront Functions
    3. Lambda@Edge
    4. AWS CLI
    5.

    View full-size slide

  4. CloudFront + S3
    0.
    CloudFront S3
    index.html
    about/index.html
    post/hoge/index.html
    post/fuga/index.html

    View full-size slide

  5. Lambda@Edge
    0.
    Lambda@Edge
    Viewer Request
    Viewer Response
    Origin Request
    Origin Response

    View full-size slide

  6. Lambda@Edge
    0.
    Lambda@Edge
    Viewer Request
    Viewer Response
    Origin Request
    Origin Response
    Viewer Request

    View full-size slide

  7. 1. URL
    URL 1 URL
    S3
    index.html
    /

    View full-size slide

  8. 1. URL : S3
    CloudFront + S3 index.html
    https://michimani.net/about/index.html
    https://michimani.net/about/ 403

    View full-size slide

  9. 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/

    View full-size slide

  10. 1. URL : index.html
    URL
    https://michimani.net/about/
    https://michimani.net/about/index.html

    View full-size slide

  11. 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/

    View full-size slide

  12. 1. URL : /
    CloudFront + S3 /
    https://michimani.net/about/
    https://michimani.net/about 403

    View full-size slide

  13. 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

    View full-size slide

  14. 1. URL
    URL
    https://michimani.net/about/index.html
    https://michimani.net/about/
    https://michimani.net/about
    https://michimani.net/about/
    1 URL

    View full-size slide

  15. 2. CloudFront Functions

    View full-size slide

  16. 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/

    View full-size slide

  17. 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)

    View full-size slide

  18. 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)

    View full-size slide

  19. 3. Lambda@Edge

    View full-size slide

  20. 3. Lambda@Edge

    Node.js JavaScript

    991.0 byte

    2 MB

    Lamba@Edge

    View full-size slide

  21. 3. Lambda@Edge :
    Lambda
    Build Duration ( ) Duration ( )

    View full-size slide

  22. 3. Lambda@Edge :
    Lambda
    Build Duration ( ) Duration ( )
    0.7333 ms

    View full-size slide

  23. 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

    View full-size slide

  24. 4. AWS CLI
    1. Function を作成


    2. 作成した Function を確認


    3. Function をテスト


    4. Function を公開


    5. Function を Distribution に紐付け


    6. Function の状態を確認


    ※このスライド内に記載しているコマンドは v1 での実行を想定しています

    View full-size slide

  25. 4. AWS CLI
    Function : Function (cf2.js)

    View full-size slide

  26. 4. AWS CLI
    Function : Function (cf2.js)
    Origin (S3)

    View full-size slide

  27. 4. AWS CLI
    Function : Function (cf2.js)
    Origin (S3)
    / index.html
    /
    Viewer 301 HTTP

    View full-size slide

  28. 4. AWS CLI
    Function : Function (cf2.js)
    Origin (S3)
    / index.html
    /
    Viewer 301 HTTP
    Viewer URI index.html
    Origin (S3)

    View full-size slide

  29. 4. AWS CLI : create-function
    1. Functions

    View full-size slide

  30. 4. AWS CLI : create-function
    1. Functions
    cloudfront-js-1.0

    View full-size slide

  31. 4. AWS CLI : describe-function
    2. Function

    View full-size slide

  32. 4. AWS CLI : describe-function
    2. Function

    View full-size slide

  33. 4. AWS CLI
    : (test-event.json)

    View full-size slide

  34. 4. AWS CLI
    : (test-event.json)
    /about
    /about/ 301

    View full-size slide

  35. 4. AWS CLI : test-function
    3. Function

    View full-size slide

  36. 4. AWS CLI : test-function
    3. Function
    —if-match ETag
    describe-function ETag

    View full-size slide

  37. 4. AWS CLI : test-function
    3. Function
    —if-match ETag
    describe-function ETag
    TestResult.FunctionOutput
    JSON

    View full-size slide

  38. 4. AWS CLI : test-function
    3. Function
    —if-match ETag
    describe-function ETag
    TestResult.FunctionOutput
    JSON
    jq

    View full-size slide

  39. 4. AWS CLI : test-function
    3. Function

    View full-size slide

  40. 4. AWS CLI : publish-function
    4. Function

    View full-size slide

  41. 4. AWS CLI : publish-function
    4. Function
    —if-match ETag
    describe-function ETag

    View full-size slide

  42. 4. AWS CLI
    5. Function Distribution
    新しいコマンドを使うのではなく、update-distribution
    i. describe-distribution
    ii. FunctionAssociations
    iii. update-distribution

    View full-size slide

  43. 4. AWS CLI
    5. Function Distribution :

    View full-size slide

  44. 4. AWS CLI
    5. Function Distribution :
    Lambda@Edge

    View full-size slide

  45. 4. AWS CLI
    5. Function Distribution :

    View full-size slide

  46. 4. AWS CLI
    5. Function Distribution :
    Function ARN


    aws cloudfront describe-function \


    —name “${FN_NAME}” \


    —query “FunctionSummary.FunctionMetadata.FunctionARN” \


    —output text


    View full-size slide

  47. 4. AWS CLI
    5. Function Distribution :

    View full-size slide

  48. 4. AWS CLI
    6. Function

    View full-size slide

  49. 4. AWS CLI
    6. Function
    DEPLOYED OK

    View full-size slide

  50. 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/

    View full-size slide