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

Lambda@EdgeからCloudFront Functionsへの移行と CI / CDパイプラインの整備 / aws-dev-days-2021

Lambda@EdgeからCloudFront Functionsへの移行と CI / CDパイプラインの整備 / aws-dev-days-2021

75486cbfd37125f121cf4a6c5614601c?s=128

Hidetaka Okamoto
PRO

September 30, 2021
Tweet

Transcript

  1. © 2021, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Lambda@Edge͔ΒCloudFront Functions΁ͷҠߦͱ CI / CDύΠϓϥΠϯͷ੔උ Speaker Name Ԭຊ लߴ גࣜձࣾσδλϧΩϡʔϒ H - 2
  2. © 2021, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. • Shifterʹ͓͚ΔΤοδίϯϐϡʔςΟϯά • େن໛ϗεςΟϯάαʔϏεʹ͓͚ΔLambda@Edgeͷӡ༻ • CloudFront FunctionsಋೖʹΑΔӡ༻ͷޮ཰Խ • Lambda@Edge / CloudFront Functionsͷ࢖͍෼͚ͱซ༻ Agenda
  3. © 2021, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Shifterʹ͓͚Δ ΤοδίϯϐϡʔςΟϯά
  4. https://getshifter.io/ja/

  5. © 2021, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. • ΞϚκϯ ΢Σϒ αʔϏε(AWS)্ʹΠϯϑϥΛߏங • WordPressͰߏங͞ΕͨαΠτΛɺ੩తԽͯ͠഑৴Ͱ͖Δ • Amazon Simple Storage Service(S3) + Amazon CloudFrontͰ഑৴ • શͯͷCloudFront DistributionʹLambda@edgeΛෳ਺ઃఆ Shifter = WordPress޲͚੩తαΠτϗεςΟϯάαʔϏε
  6. © 2021, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. • URLͷਖ਼نԽʢ/blog/΁ͷΞΫηεΛ/blog/index.htmlʹͳ͕͢ͳͲʣ • BasicೝূͳͲͷΞΫηε੍ݶ • Ϩεϙϯεϔομʔͷ௥ՃɾΧελϚΠζ S3 + CloudFrontͷ੩తαΠτϗεςΟϯάͰൃੜ͢Δ՝୊ʢҰྫʣ
  7. © 2021, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. • ઌड़ͷ՝୊͸Amplify ConsoleͷϗεςΟϯάͰղܾ͢Δ • 2018೥ౙొ৔ͷͨΊɺϩʔϯν࣌(2017೥ౙ)ʹ͸ଘࡏ͠ͳ͔ͬͨ • 2017೥౰࣌ͷղܾࡦ͸Lambda@EdgeͷΈ AWS Amplify ConsoleΛ࢖͍ͬͯͳ͍ཧ༝
  8. © 2021, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. • URLͷਖ਼نԽʢ/blog/΁ͷΞΫηεΛ/blog/index.htmlʹͳ͕͢ͳͲʣ • Basicೝূͷઃఆ • ະ෷͍΍ϓϥϯ্ݶ௒աʹΑΔαΠτͷΞΫηε੍ݶ • Ϩεϙϯεϔομʔͷ௥ՃɾΧελϚΠζ Shifterʹ͓͚ΔLambda@EdgeͷϢʔεέʔε
  9. © 2021, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. 'use strict’; exports.handler = (event, context, callback) => { context.callbackWaitsForEmptyEventLoop = false; const request = event.Records[0].cf.request; const httpVersion = request.httpVersion; const uri = request.uri; var path = uri.split('?')[0]; // check either index.html or / if (!path.endsWith('html') && !path.endsWith('/')) { callback(null, request); return; }; • Lambda@Edge࣮૷ྫ: ڧ੍తʹαΠτΛHTTP509ʹ͢Δ const body = '<html>\n' + '<head><title>509 Bandwidth Limit Exceeded</title></head>\n' + '<body>\n' + '<b>509 Bandwidth Limit Exceeded</b>\n' + '</body>\n' + '</html>' const response = { status: '509', statusDescription: 'HTTP 509', httpVersion: httpVersion, body: body, }; callback(null, response); return; };
  10. © 2021, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. • ௨ৗͳΒ͹αʔόʔଆͰॲཧ͢Δཁ͕݅த৺ • CloudFront + S3Ͱ࣮ݱͰ͖ΔαʔϏεͱͯ͠Lambda@EdgeΛ࠾༻ • Amplify Console (Hosting)Ͱ͋Δఔ౓ରԠͰ͖ΔͷͰɺ
 ࠓ͔Β࡞ΔͳΒ͹࠾༻͍͔ͯͨ͠΋͠Εͳ͍ ServerlessͰʮαʔόʔଆॲཧʯΛ࣮ݱ͢ΔͨΊͷLambda@Edge
  11. © 2021, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. େن໛ϗεςΟϯάαʔϏεͰͷ Lambda@Edgeӡ༻
  12. © 2021, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. • CloudFrontΛ৽نͰ࡞Δͱ͋Δఔ౓ͷ͕࣌ؒඞཁͱͳΔ • ଎΍͔ʹαʔϏε͕࢖͑ΔΑ͏ʹ͢ΔͨΊɺࣄલʹελοΫΛ࡞੒ • ຊ൪ / ։ൃ؀ڥͰ4,000 DistributionҎ্͕Քಇ ※ຊ൪ՔಇதαΠτ: 2,500 Distributionఔ౓ ੩తϗεςΟϯά؀ڥͷࣄલߏஙʢࡏݿ࡞੒ʣ
  13. © 2021, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. • Lambda@Edgeͷߋ৽͸ɺCloudFront:UpdateDistribution APIΛ࢖͏ • 1DistributionຖʹAPIΛݺͼग़͢ඞཁ͕͋Γɺ౎߹4,000 API Call͕ൃੜ • AWS APIͷεϩοτϦϯάΛճආ͢ΔͨΊɺஞ࣍ॲཧͰͷߋ৽ʹͳΔ Distribution਺ͷଟ͔͞Βੜ·Εͨ՝୊
  14. © 2021, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. import CloudFrontUpdator from 'cloudfront-updator' const client = new CloudFrontUpdator({ // You can define your expected the Distribution config updator: (id, DistributionConfig) => { DistributionConfig.Enabled = false return DistributionConfig }, // You can filter your distributions buy the function filter: (distribution) => distribution.Status === ‘deployed' }, { debugMode: true | false, // [default] false taskType: 'parallel' | 'sequential', // [default] sequential allowSensitiveAction: false, // [default] false }) ߋ৽εΫϦϓτͷޮ཰Խ: npm i cloudfront-updator • ࣗ࡞OSS • σʔλͷશऔಘͳͲΛҕ೚ • ʮͳʹʯΛʮͲ͏ߋ৽͢Δ͔ʯ
 ͚ͩʹϑΥʔΧεͰ͖Δ
  15. © 2021, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. • εΫϦϓτͷϝϯς͸πʔϧͰলྗԽͰ͖ͨ • ͔͠͠AWS APIΛ·ͱΊͯݺͼग़͢ͱɺ੍ݶ͞ΕΔ໰୊͸ճආͰ͖ͳ͍ • ෳ਺APIΛݺͼग़ͨ͢Ίɺ2~3Distribution୯ҐͰߋ৽ • ࡞ۀ࣌ؒ: ໿5ඵ * ( 4,000 / 2 ) = 10,000ඵ = ࠷େ໿2࣌ؒ൒ఔ౓ ਺ͷ໰୊͚ͩ͸ղܾͰ͖ͳ͔ͬͨ
  16. © 2021, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. • 3,998 Distribution໨ͰΤϥʔ -> 1͔Β΍Γͳ͓͠ • FilterϛεͰDevαΠτશͯʹBasicೝূ -> ෮چόονͰ·ͨ2࣌ؒίʔε • ϦϦʔε࡞ۀ௚ޙʹಧ͘EOLͷ͓஌Βͤ -> ϥϯλΠϜߋ৽Ͱ·ͨ2࣌ؒ ࣮ࡍʹ͋ͬͨɺͭΒ͔ͬͨ࿩
  17. © 2021, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. • AWS API͕େྔߋ৽ʹڧ͘ͳ͍࢓༷ • Distribution͝ͱʹண୤ͨ͠Γɺ1ελοΫͱͯ͠؅ཧ͢Δʹ͸ศར • େྔͷDistributionʹઃఆ͍ͨ͠ཁ݅Ͱ͸ɺ
 Amplify Consoleʹ೚ͤΔ͔ɺCloudFront Functionsͷݕ౼͕ඞཁ Lambda@Edge͸਺ʹѹ౗͞ΕΔ
  18. © 2021, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. CloudFront FunctionsಋೖʹΑΔ ӡ༻ͷޮ཰Խ
  19. © 2021, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. 2021೥5݄: CloudFront Functionsొ৔ ݸਓతͳୈҰҹ৅ • ؆୯ͳॲཧ޲͚ͬΆ͍ • ੍ݶ͕ଟ͍ͷͰɺཁࢼݧ • Distribution΁ͷ൓ө͕Ұׅ ← !!!! https://aws.amazon.com/jp/about-aws/whats-new/ 2021/05/cloudfront-functions/
  20. © 2021, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. • ௕࣌ؒͷLambda@Edgeߋ৽࡞ۀΛ୹ॖ • ϦϦʔε࡞ۀͷࣗಈԽ • Lambda@Edgeͷviewer-request / viewer-responseΛ։์ CloudFront Functionsʹظ଴ͨ͜͠ͱ
  21. © 2021, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. • 4,000Λ௒͑ΔDistributionʹ·ͱΊͯઃఆͰ͖Δ͜ͱ • ݱߦͷLambda@Edgeͱಉ͡ৼΔ෣͍Λ͢Δ͜ͱ • ߋ৽࡞ۀͷ࣌ؒ୹ॖ͓ΑͼࣗಈԽ Lambda@Edge͔ΒͷҠߦϓϩδΣΫτͷཁ݅
  22. © 2021, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. • ϓϩδΣΫτ։࢝࣌఺Ͱ͸UnDocumentedͳ࢓༷ʢݱࡏ͸ߋ৽ࡁΈʣ • CloudFront Functionsͱซ༻Ͱ͖Δͷ͸ɺorigin-request / origin-response • viewerܥͷLambda@Edgeؔ਺͸શͯॻ͖௚͠ • ʮશDistributionʹઃఆࡁΈʯͷͨΊɺஔ׵λεΫ͕࠷༏ઌʹ ୈҰͷน: Lambda@Edgeͷviewerܥ͕ซ༻Ͱ͖ͳ͍
  23. © 2021, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. • Lambda@Edge΋CloudFront Functions΋JSONΛड͚ͯJSONΛฦ͢ • Lambda:Invoke APIͰݱߦؔ਺ͷڍಈΛௐࠪ͠ɺςετέʔεԽ • CloudFront FunctionsͰߏ଄͕มΘ͍ͬͯΔ෦෼ͷௐ੔Λ௥Ճ • CloudFront:TestFunctionΛ࣮ߦ͠ɺಉ͡ҙຯͷJSON͕औΕΔ͜ͱΛςετ ৼΔ෣͍͕มΘΒͳ͍͜ͱΛอূ͢Δ
  24. © 2021, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. jest.setTimeout( 100000 ); describe('e2e (Call AWS API CloudFront.TestFunction API)', () => { it('should return Unauthorized response', async () => { const eventBuilder = TestRequestEventFactory.create() eventBuilder.setRequestContext({ distributionId: 'EXYZ' }) const task = new FunctionTask(ViewerRequestBasicAuthFunction) const result = await task.runTestToGetFunctionOutput(eventBuilder, 'DEVELOPMENT') expect(result) .toEqual({ response: { statusCode: 401, statusDescription: 'Unauthorized', headers: { "www-authenticate": { "value": "Basic" } }, cookies: {}, } }) }) JestΛ࢖ͬͨE2Eςετͷ࣮૷ • ࣗ࡞OSS (cff-tools)Λซ༻ • CloudFront:TestFunctionAPIΛ
 ࣮ࡍʹݺͼग़͢ • ϨεϙϯεΛ
 JestͷΞαʔγϣϯͰݕূ
  25. © 2021, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. import { CfnFunction } from '@aws-cdk/aws-cloudfront'; import * as cdk from '@aws-cdk/core'; export class CloudfrontFunctionsStack extends cdk.Stack { constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) { super(scope, id, props); const stage = process.env.STAGE || 'development' // The code that defines your stack goes here new CfnFunction(this, 'ViewerRequestFunction' + stage, { functionCode: readFileSync('./vr.js', { encoding: 'utf-8' }).toString(), autoPublish: false, functionConfig: { comment: "empty function (boiler plate)", runtime: ViewerRequestFunction.runtime }, name: ViewerRequestFunction.name }) ߏ੒ͷఆٛʹ͸AWS CDK (TypeScript)Λ࠾༻ • ߏ੒ / ؔ਺ / ςετ / σϓϩΠॲཧ
 ͢΂ͯΛJavaScriptܥͰ౷Ұ • fsϞδϡʔϧΛ࢖ͬͯɺ
 ؔ਺ίʔυΛผϑΝΠϧԽ • E2Eςετޙͷެ։Λߦ͏ͨΊɺ
 autoPublishΛOffʹ͢Δ
  26. © 2021, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. workflows: release-prod: jobs: - setup - test - deploy: env: production requires: - test - e2e: env: production requires: - deploy - publish: env: production requires: - e2e CircleCIΛ࢖ͬͨϫʔΫϑϩʔͷࣗಈԽ • ख׳Ε͍ͯΔSaaSͱͯ͠࠾༻ • CloudFront:UpdateFunction
 -> CloudFront:TestFunction
 -> CloudFront:PublishFunction • ޡσϓϩΠͰશαΠτμ΢ϯ
 Λ๷͙ͨΊͷΨʔυϨʔϧ
  27. © 2021, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. • npm installͯ͠͠·͏ʢόϯυϧ͞Εͨ΋ͷ͔͠࢖͑ͳ͍ʣ • ൺֱతϞμϯͳJavaScriptͷه๏Λ࢖͏ʢexport / const / let / etc…ʣ • HTTPϦΫΤετ΍AWS APIΛ࢖ͬͯ͠·͏ʢ֎ʹ௨৴Ͱ͖ͳ͍ʣ • ϥϯλΠϜͷ࣮ߦ্࣌ؒݶΛ௒͑ͯ͠·͏ʢҙ֎ͱ୹͍ʣ ։ൃ࣌ʹҾ͔͔ͬΓ΍͍͢ϙΠϯτ
  28. © 2021, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. • ެࣜυΩϡϝϯτʹαϯϓϧ͕ͳ͍έʔεʹॳखͰௐ੔͠ͳ͍ • ੍ݶࣄ߲΍ར༻Մೳͳม਺ͳͲΛࣄલʹυΩϡϝϯτͰ֬ೝ͢Δ • σϓϩΠର৅ͷDistribution͕ଟ͍৔߹͸ɺPublishલʹςετ͠Α͏ CloudFront Functionsಋೖݕ౼ʹ͍ͭͯͷࢲݟ
  29. © 2021, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. Lambda@Edge / CloudFront Functions ࢖͍෼͚ͱซ༻ʹ͍ͭͯ
  30. © 2021, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. • ؔ਺ͷߋ৽͕࣌ؒ2͔࣌ؒΒ5෼ఔ౓ʹ • εϩοτϦϯά΍ΤϥʔʹΑΔʮ;Γͩ͠ʹ໭Δʯ΋ղফ • DistributionͷUpdateͰ͸ͳ͘ͳͬͨͨΊɺϛεͷӨڹൣғ͕ڱ͘ͳͬͨ • CIΛ࢖ͬͨE2EςετͰɺόάͷϦϦʔεΛ્ࢭ CloudFront FunctionsಋೖͰมΘͬͨ͜ͱ
  31. © 2021, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. • ݸผʹઃఆ͍ͨ͠ॲཧʢར༻੍ݶܥʣ͸ࠓ΋Lambda@Edge • CloudFront FunctionsԽ͢Δͱɺʮؔ਺ͷ෇͚ସ͑ʯ͕ൃੜ͢Δ • ݁ہCloudFront:UpdateDistribution APIͷग़൪ʹͳΔ • Lambda@Edgeͷ··ʹ͢Δ͜ͱͰɺมߋΛʮ͚ͭ֎͠ʯ͚ͩʹݶఆ Lambda@Edge΋ܧଓͯ͠Քಇத
  32. © 2021, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. • ʮCloudFront FunctionsͩͱͰ͖ͳ͍͜ͱʯ͕͔ͳΓଟ͍ • Serverless Next.js / ը૾ϦαΠζ / ෳࡶͳೝূॲཧ / etc… • HeaderͷՃ޻΍URLͷਖ਼نԽͳͲͷܰྔॲཧΛCloudFront Functions΁ • େྔͷDistributionʹద༻͢Δ৔߹΋CloudFront FunctionsΛਪ঑ • ʮviewer͕CloudFront Functionsઐ༻ʹͳΔ͜ͱʯʹ஫ҙͭͭ͠ɺ༻్ʹ߹ͬͨӡ༻Λ CloudFront Function ͱ Lambda@Edge͸ORͰ͸ͳ͘AND
  33. © 2021, Amazon Web Services, Inc. or its affiliates. All

    rights reserved. • CloudFront FunctionsಋೖʹΑΓɺอकλεΫ͕େ෯ʹޮ཰ԽͰ͖ͨ • AWS APIͱCIαʔϏεͷ׆༻ͰɺςετΛަ͑ͨϦϦʔεࣗಈԽΛ࣮ݱ • ʮແཧͳ௅ઓʯͰͷ࣌ؒϩεΛݮΒͨ͢Ίʹ
 ࢓༷ɾ੍ݶͷ֬ೝͱࣄલͷςετ࣮૷͸ೖ೦ʹߦ͓͏ • origin-request / origin-response΁ͷLambda@EdgeઃఆͰॊೈͳӡ༻Λ ·ͱΊ
  34. Thank you! © 2021, Amazon Web Services, Inc. or its

    affiliates. All rights reserved. Ԭຊ लߴ גࣜձࣾσδλϧΩϡʔϒ @hide__dev