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

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

Transcript

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

   View Slide

2. Ԭຊलߴ
   
   
   @hide__dev
   • Stripe Developer Advocate
   
   
   • JS / TS Developer
   
   
   • AWS / Next.js / Serverless /
   shopify / …
   
   
   • 🐈
   #JAWS-UG
   

   View Slide

3. 2021/12ʹStripeʹδϣΠϯ͠·ͨ͠
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. GitHubʹNext.jsͷϦϙδτϦΛ༻ҙ͓ͯ͘͠
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. Connector / repo / branchࢦఆ
    

    View Slide

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

    View Slide

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

    View Slide

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

    yarn && yarn build
    
    
    • ։࢝ίϚϯυ
    

    yarn start
    
    
    • ϙʔτ: 3000
    

    View Slide

17. ίϯςφαʔϏεͷઃఆ
    

    View Slide

18. ઃఆͰ͖Δ಺༰
    • CPU / ϝϞϦ / ؀ڥม਺
    
    
    • Φʔτεέʔϧ
    
    
    • ϔϧενΣοΫ
    
    
    • Πϯελϯεϩʔϧ
    
    
    • KMSΩʔ
    
    
    • λά
    #JAWS-UG
    

    View Slide

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

    GUI͡Όͳ͘CDKͳͲͰߏ੒؅ཧΛਪ঑
    #JAWS-UG
    

    View Slide

20. ઃఆΛϨϏϡʔͯ͠
    
    
    σϓϩΠ
    #JAWS-UG
    

    View Slide

21. ଴ͭ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

29. Q.
    
    
    AWS Amplify͡ΌͩΊͳͷʁ
    #JAWS-UG
    

    View Slide

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

    View Slide

31. Why?
    #JAWS-UG
    

    View Slide

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
    

    View Slide

33. Lambda@Edgeͷ੍ݶͰNext.jsͭΒ͍΍ͭ
    • ϩά΍ݺͼग़͠ݩͷϦʔδϣϯ͕҆ఆ͠ͳ͍
    
    
    • ΞΫηεͷ͋ͬͨϦʔδϣϯͷCLWʹϩά͕ग़Δ
    
    
    • AWS APIݺͼग़࣌͠ʹϦʔδϣϯࢦఆඞਢ
    
    
    • Lambdaʹ؀ڥม਺͕ઃఆͰ͖ͳ͍
    
    
    • σϓϩΠύοέʔδͷ༰ྔ͕࠷େ50MB(ΦϦδϯ)
    #JAWS-UG
    

    View Slide

34. Ͳ͏͍͏Ҋ݅ͰAmplify͕ਏ͘ͳΔʁ
    • Next.jsͷAPIΛΰϦΰϦʹ࣮૷͢ΔλΠϓ
    
    
    • APIʹ؀ڥม਺Λ౉ͨ͘͠ͳΔͱɺͪΐͬͱͨ͠஋Ͱ΋SSMඞਢʹ
    
    
    • ґଘϥΠϒϥϦͷଟ͍େن໛ΞϓϦ
    
    
    • ϏϧυޙͷΞϓϦαΠζͷνΣοΫਪ঑
    
    
    • ίϯςφΠϝʔδͰ؅ཧ͍ͨ͠৔߹΋App Runner޲͚͔΋͠Εͳ͍
    #JAWS-UG
    

    View Slide

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
    

    View Slide

36. Amplify -> serverless-nextjs -> App Runner
    • ӈʹߦ͘΄ͲAWSʹґଘ͠ͳ͘ͳΔ
    
    
    • Amplify͸CLI͕࡞ΔίʔυΛͲΕ͘Β͍ڐ༰͢Δ͔࣍ୈ͔΋
    
    
    • ݸਓతʹ͸not for meͳͷͰɺCDKͰࣗલ؅ཧத
    
    
    • CDKͰߏ੒؅ཧ͢Ε͹IAMͳͲͷઃఆΛTakeOver͠΍͍͢
    #JAWS-UG
    

    View Slide

37. ·ͱΊ
    • AWSͰNext.js͸ɺͱΓ͋͑ͣAmplifyͰOK
    
    
    • ͨͩ͠serverless-nextjsབྷΈͷ੍໿ʹ᪴͘έʔεʹཁ஫ҙ
    
    
    • AmplifyͰಈ͔ͤͳ͘ͳͬͨΒɺApp Runner
    
    
    • App RunnerΛ஌Δ͜ͱͰɺʮ࣍ͷखʯ͕खʹೖΔ
    
    
    • ޙฤͷϫʔΫγϣοϓͰͥͻମݧͯ͠ΈΑ͏ʂ
    #JAWS-UG
    

    View Slide

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
    

    View Slide