$30 off During Our Annual Pro Sale. View Details »

Jamstack開発者のための App Runner入門

Jamstack開発者のための App Runner入門

JAWS-UG関西「コンテナ勉強会/App Runnerハンズオン(見るだけOK)もあるよ」登壇資料です。

Hidetaka Okamoto
PRO

January 26, 2022
Tweet

More Decks by Hidetaka Okamoto

Other Decks in Programming

Transcript

  1. Jamstack։ൃऀͷͨΊͷ App Runnerೖ໳ JAWS-UG ؔ੢ Hidetaka Okamoto 2022/1/27 #JAWS-UG

  2. Ԭຊलߴ @hide__dev • Stripe Developer Advocate • JS / TS

    Developer • AWS / Next.js / Serverless / shopify / … • 🐈 #JAWS-UG
  3. 2021/12ʹStripeʹδϣΠϯ͠·ͨ͠

  4. Facebook “JP_Stripes” https://bit.ly/3G2Fh6D

  5. Agenda • Next.jsΞϓϦΛApp RunnerʹσϓϩΠͯ͠Έͨ • JamstackͳαΠτɾΞϓϦΛެ։͢ΔͨΊͷ௥Ճ࡞ۀ • AWS AmplifyͱAWS App

    RunnerɺͲ͕͍͍ͬͪʁ #JAWS-UG
  6. Agenda • Next.jsΞϓϦΛApp RunnerʹσϓϩΠͯ͠Έͨ • JamstackͳαΠτɾΞϓϦΛެ։͢ΔͨΊͷ௥Ճ࡞ۀ • AWS AmplifyͱAWS App

    RunnerɺͲ͕͍͍ͬͪʁ #JAWS-UG
  7. GitHubʹNext.jsͷϦϙδτϦΛ༻ҙ͓ͯ͘͠

  8. ϚωʔδϝϯτίϯιʔϧʹΞΫηε

  9. GitHubͷ৔߹͸ιʔείʔυϦϙδτϦΛબ୒

  10. GitHubʹΞϓϦΠϯετʔϧ

  11. ϦϙδτϦΞΫηεΛߜΔ͜ͱ΋Մೳ

  12. connectionͷ໊લΛ͚͓ͭͯ͘

  13. Connector / repo / branchࢦఆ

  14. σϓϩΠΛࣗಈʹ͢Δ͔ΛܾΊΔ

  15. ߏஙઃఆ΋GUI͚ͩͰ׬݁Ͱ͖Δʢίʔυ΋Մʣ

  16. Next.jsඪ४ઃఆͷ ৔߹ • ϥϯλΠϜ: Nodejs12 (or later) • ߏ੒ίϚϯυ 


    yarn && yarn build • ։࢝ίϚϯυ 
 yarn start • ϙʔτ: 3000
  17. ίϯςφαʔϏεͷઃఆ

  18. ઃఆͰ͖Δ಺༰ • CPU / ϝϞϦ / ؀ڥม਺ • Φʔτεέʔϧ •

    ϔϧενΣοΫ • Πϯελϯεϩʔϧ • KMSΩʔ • λά #JAWS-UG
  19. ݸਓతཁνΣοΫϙΠϯτ • Φʔτεέʔϧͷ࠷େαΠζ͕σϑΥϧτ25 • εέʔϧ։࢝ͷج४͸ಉ࣮࣌ߦ਺ʢ㲈ϦΫΤετ਺ʣ • DynamoDBͳͲʹΞΫηε͍ͤͨ͞ͳΒɺΠϯελϯεϩʔϧඞਢ • ઀ଓ͢ΔαʔϏε͕ଟ͍ͳΒɺ 


    GUI͡Όͳ͘CDKͳͲͰߏ੒؅ཧΛਪ঑ #JAWS-UG
  20. ઃఆΛϨϏϡʔͯ͠ σϓϩΠ #JAWS-UG

  21. ଴ͭ

  22. τϥϒͬͨΒϩάΛݟΔ

  23. εςʔλε RunningʹͳΕ͹OK

  24. Agenda • Next.jsΞϓϦΛApp RunnerʹσϓϩΠͯ͠Έͨ • JamstackͳαΠτɾΞϓϦΛެ։͢ΔͨΊͷ௥Ճ࡞ۀ • AWS AmplifyͱAWS App

    RunnerɺͲ͕͍͍ͬͪʁ #JAWS-UG
  25. ެ։લʹ΍ΔͰ͋Ζ͏௥Ճ࡞ۀ • CloudFrontͰCDNΛઃఆ͢Δ • CloudFrontʹACMͰSSLূ໌ॻΛઃఆ • Route53ͰυϝΠϯΛઃఆ #JAWS-UG

  26. ACMʢSSLূ໌ॻʣ͸Ͳ͜ʹ͚ͭΔʁ • App RunnerͰ΋ূ໌ॻΛઃఆͰ͖Δ • CloudFrontʹ͚ͩઃఆͯ͠΋ಈ͖͸͢Δ༷ࢠ • ҆શੑΛͱΔͳΒCF / Runner྆ํͰ͚ͭͨ΄͏͕Α͍͔΋

    #JAWS-UG
  27. AWS CDKͰߏ੒؅ཧ͢Δͱָͦ͏ new apprunner.Service(this, 'Service', { source: apprunner.Source.fromGitHub({ repositoryUrl: 'https://github.com/aws-containers/hello-app-runner',

    branch: 'main', configurationSource: apprunner.ConfigurationSourceType.API, codeConfigurationValues: { runtime: apprunner.Runtime.PYTHON_3, port: '8000', startCommand: 'python app.py', buildCommand: 'yum install -y pycairo && pip install -r requirements.txt', }, connection: apprunner.GitHubConnection.fromConnectionArn('CONNECTION_ARN'), }), }); #JAWS-UG
  28. Agenda • Next.jsΞϓϦΛApp RunnerʹσϓϩΠͯ͠Έͨ • JamstackͳαΠτɾΞϓϦΛެ։͢ΔͨΊͷ௥Ճ࡞ۀ • AWS AmplifyͱAWS App

    RunnerɺͲ͕͍͍ͬͪʁ #JAWS-UG
  29. Q. AWS Amplify͡ΌͩΊͳͷʁ #JAWS-UG

  30. A. First Choice͸Amplify App Runnerͷग़൪΋͋Δ #JAWS-UG

  31. Why? #JAWS-UG

  32. AWS Amplify (Next.js SSR/ISR)͸Lamnda@Edge • ಈ͖ͱͯ͠͸ɺserverless-nextjsʹ͍ۙʢͱ͍ΘΕ͍ͯΔʣ • Next.jsΛෳ਺ͷLamnda@EdgeʹσϓϩΠ • CloudFront

    - Lamnda@Edge - S3ߏ੒ʹͳΔ • ΤοδͰಈ͘ͷͰɺૣ͍ɻ ISR΋Ͱ͖Δɻnodejs14΋࢖͑Δ • ͨͩ͠Lamnda@Edgeͷ੍ݶʹनΘΕΔ #JAWS-UG
  33. Lambda@Edgeͷ੍ݶͰNext.jsͭΒ͍΍ͭ • ϩά΍ݺͼग़͠ݩͷϦʔδϣϯ͕҆ఆ͠ͳ͍ • ΞΫηεͷ͋ͬͨϦʔδϣϯͷCLWʹϩά͕ग़Δ • AWS APIݺͼग़࣌͠ʹϦʔδϣϯࢦఆඞਢ • Lambdaʹ؀ڥม਺͕ઃఆͰ͖ͳ͍

    • σϓϩΠύοέʔδͷ༰ྔ͕࠷େ50MB(ΦϦδϯ) #JAWS-UG
  34. Ͳ͏͍͏Ҋ݅ͰAmplify͕ਏ͘ͳΔʁ • Next.jsͷAPIΛΰϦΰϦʹ࣮૷͢ΔλΠϓ • APIʹ؀ڥม਺Λ౉ͨ͘͠ͳΔͱɺͪΐͬͱͨ͠஋Ͱ΋SSMඞਢʹ • ґଘϥΠϒϥϦͷଟ͍େن໛ΞϓϦ • ϏϧυޙͷΞϓϦαΠζͷνΣοΫਪ঑ •

    ίϯςφΠϝʔδͰ؅ཧ͍ͨ͠৔߹΋App Runner޲͚͔΋͠Εͳ͍ #JAWS-UG
  35. serverless-nextjs΋CDK؅ཧͯ͠͠·͏ख΋͋Δ import { NextJSLambdaEdge } from "@sls-next/cdk-construct"; import { Certificate

    } from "@aws-cdk/aws-certificatemanager"; export class ServerlessNextjsCdkExampleStack extends cdk.Stack { constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) { super(scope, id, props); const app = new NextJSLambdaEdge(this, "NextJsApp", { serverlessBuildOutDir: "./build", domain: { domainNames: ["wp-kyoto.net"], certificate: Certificate.fromCertificateArn( this, "WPKYOTOACM", “arn:aws:acm:us-east-1:999999:certificate/123-456-789“ ), }, }); #JAWS-UG
  36. Amplify -> serverless-nextjs -> App Runner • ӈʹߦ͘΄ͲAWSʹґଘ͠ͳ͘ͳΔ • Amplify͸CLI͕࡞ΔίʔυΛͲΕ͘Β͍ڐ༰͢Δ͔࣍ୈ͔΋

    • ݸਓతʹ͸not for meͳͷͰɺCDKͰࣗલ؅ཧத • CDKͰߏ੒؅ཧ͢Ε͹IAMͳͲͷઃఆΛTakeOver͠΍͍͢ #JAWS-UG
  37. ·ͱΊ • AWSͰNext.js͸ɺͱΓ͋͑ͣAmplifyͰOK • ͨͩ͠serverless-nextjsབྷΈͷ੍໿ʹ᪴͘έʔεʹཁ஫ҙ • AmplifyͰಈ͔ͤͳ͘ͳͬͨΒɺApp Runner • App

    RunnerΛ஌Δ͜ͱͰɺʮ࣍ͷखʯ͕खʹೖΔ • ޙฤͷϫʔΫγϣοϓͰͥͻମݧͯ͠ΈΑ͏ʂ #JAWS-UG
  38. Stripe / Jamstack / WordPress <> AWS ొஃػձ୳ͯ͠·͢ • Stripe

    Webhook -> AWS Step Functions / AppSync / etc… • Stripe SDK <> Lambda / Secrets Manager / AWS Amplify / etc… • AWS Amplify <> Next.js / Gatsby / Ionic / Capacitor / etc… • WordPress <> EC2 / Systems Manager / CloudFront / etc… #JAWS-UG