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

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

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