JAWS-UG関西「コンテナ勉強会/App Runnerハンズオン(見るだけOK)もあるよ」登壇資料です。
Jamstack։ൃऀͷͨΊͷApp RunnerೖJAWS-UG ؔHidetaka Okamoto 2022/1/27 #JAWS-UG
View Slide
Ԭຊलߴ@hide__dev• Stripe Developer Advocate• JS / TS Developer• AWS / Next.js / Serverless /shopify / …• 🐈#JAWS-UG
2021/12ʹStripeʹδϣΠϯ͠·ͨ͠
Facebook “JP_Stripes” https://bit.ly/3G2Fh6D
Agenda• Next.jsΞϓϦΛApp RunnerʹσϓϩΠͯ͠Έͨ• JamstackͳαΠτɾΞϓϦΛެ։͢ΔͨΊͷՃ࡞ۀ• AWS AmplifyͱAWS App RunnerɺͲ͕͍͍ͬͪʁ#JAWS-UG
GitHubʹNext.jsͷϦϙδτϦΛ༻ҙ͓ͯ͘͠
ϚωʔδϝϯτίϯιʔϧʹΞΫηε
GitHubͷ߹ιʔείʔυϦϙδτϦΛબ
GitHubʹΞϓϦΠϯετʔϧ
ϦϙδτϦΞΫηεΛߜΔ͜ͱՄೳ
connectionͷ໊લΛ͚͓ͭͯ͘
Connector / repo / branchࢦఆ
σϓϩΠΛࣗಈʹ͢Δ͔ΛܾΊΔ
ߏஙઃఆGUI͚ͩͰ݁Ͱ͖ΔʢίʔυՄʣ
Next.jsඪ४ઃఆͷ߹• ϥϯλΠϜ: Nodejs12 (or later)• ߏίϚϯυ yarn && yarn build• ։࢝ίϚϯυ yarn start• ϙʔτ: 3000
ίϯςφαʔϏεͷઃఆ
ઃఆͰ͖Δ༰• CPU / ϝϞϦ / ڥม• Φʔτεέʔϧ• ϔϧενΣοΫ• Πϯελϯεϩʔϧ• KMSΩʔ• λά#JAWS-UG
ݸਓతཁνΣοΫϙΠϯτ• Φʔτεέʔϧͷ࠷େαΠζ͕σϑΥϧτ25• εέʔϧ։࢝ͷج४ಉ࣮࣌ߦʢ㲈ϦΫΤετʣ• DynamoDBͳͲʹΞΫηε͍ͤͨ͞ͳΒɺΠϯελϯεϩʔϧඞਢ• ଓ͢ΔαʔϏε͕ଟ͍ͳΒɺ GUI͡Όͳ͘CDKͳͲͰߏཧΛਪ#JAWS-UG
ઃఆΛϨϏϡʔͯ͠σϓϩΠ#JAWS-UG
ͭ
τϥϒͬͨΒϩάΛݟΔ
εςʔλε RunningʹͳΕOK
ެ։લʹΔͰ͋Ζ͏Ճ࡞ۀ• CloudFrontͰCDNΛઃఆ͢Δ• CloudFrontʹACMͰSSLূ໌ॻΛઃఆ• Route53ͰυϝΠϯΛઃఆ#JAWS-UG
ACMʢSSLূ໌ॻʣͲ͜ʹ͚ͭΔʁ• App RunnerͰূ໌ॻΛઃఆͰ͖Δ• CloudFrontʹ͚ͩઃఆͯ͠ಈ͖͢Δ༷ࢠ• ҆શੑΛͱΔͳΒCF / Runner྆ํͰ͚ͭͨ΄͏͕Α͍͔#JAWS-UG
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
Q.AWS Amplify͡ΌͩΊͳͷʁ#JAWS-UG
A.First ChoiceAmplifyApp Runnerͷग़൪͋Δ#JAWS-UG
Why?#JAWS-UG
AWS Amplify (Next.js SSR/ISR)[email protected]• ಈ͖ͱͯ͠ɺserverless-nextjsʹ͍ۙʢͱ͍ΘΕ͍ͯΔʣ• Next.jsΛෳͷ[email protected]ʹσϓϩΠ• CloudFront - [email protected] - S3ߏʹͳΔ• ΤοδͰಈ͘ͷͰɺૣ͍ɻ ISRͰ͖Δɻnodejs14͑Δ• ͨͩ͠[email protected]ͷ੍ݶʹनΘΕΔ#JAWS-UG
[email protected]ͷ੍ݶͰNext.jsͭΒ͍ͭ• ϩάݺͼग़͠ݩͷϦʔδϣϯ͕҆ఆ͠ͳ͍• ΞΫηεͷ͋ͬͨϦʔδϣϯͷCLWʹϩά͕ग़Δ• AWS APIݺͼग़࣌͠ʹϦʔδϣϯࢦఆඞਢ• Lambdaʹڥม͕ઃఆͰ͖ͳ͍• σϓϩΠύοέʔδͷ༰ྔ͕࠷େ50MB(ΦϦδϯ)#JAWS-UG
Ͳ͏͍͏Ҋ݅ͰAmplify͕ਏ͘ͳΔʁ• Next.jsͷAPIΛΰϦΰϦʹ࣮͢ΔλΠϓ• APIʹڥมΛͨ͘͠ͳΔͱɺͪΐͬͱͨ͠ͰSSMඞਢʹ• ґଘϥΠϒϥϦͷଟ͍େنΞϓϦ• ϏϧυޙͷΞϓϦαΠζͷνΣοΫਪ• ίϯςφΠϝʔδͰཧ͍ͨ͠߹App Runner͚͔͠Εͳ͍#JAWS-UG
serverless-nextjsCDKཧͯ͠͠·͏ख͋Δ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
Amplify -> serverless-nextjs -> App Runner• ӈʹߦ͘΄ͲAWSʹґଘ͠ͳ͘ͳΔ• AmplifyCLI͕࡞ΔίʔυΛͲΕ͘Β͍ڐ༰͢Δ͔࣍ୈ͔• ݸਓతʹnot for meͳͷͰɺCDKͰࣗલཧத• CDKͰߏཧ͢ΕIAMͳͲͷઃఆΛTakeOver͍͢͠#JAWS-UG
·ͱΊ• AWSͰNext.jsɺͱΓ͋͑ͣAmplifyͰOK• ͨͩ͠serverless-nextjsབྷΈͷ੍ʹ᪴͘έʔεʹཁҙ• AmplifyͰಈ͔ͤͳ͘ͳͬͨΒɺApp Runner• App RunnerΛΔ͜ͱͰɺʮ࣍ͷखʯ͕खʹೖΔ• ޙฤͷϫʔΫγϣοϓͰͥͻମݧͯ͠ΈΑ͏ʂ#JAWS-UG
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