Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

GitHubʹΞϓϦΠϯετʔϧ

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

connectionͷ໊લΛ͚͓ͭͯ͘

Slide 13

Slide 13 text

Connector / repo / branchࢦఆ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Next.jsඪ४ઃఆͷ ৔߹ • ϥϯλΠϜ: Nodejs12 (or later) • ߏ੒ίϚϯυ 
 yarn && yarn build • ։࢝ίϚϯυ 
 yarn start • ϙʔτ: 3000

Slide 17

Slide 17 text

ίϯςφαʔϏεͷઃఆ

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

ݸਓతཁνΣοΫϙΠϯτ • Φʔτεέʔϧͷ࠷େαΠζ͕σϑΥϧτ25 • εέʔϧ։࢝ͷج४͸ಉ࣮࣌ߦ਺ʢ㲈ϦΫΤετ਺ʣ • DynamoDBͳͲʹΞΫηε͍ͤͨ͞ͳΒɺΠϯελϯεϩʔϧඞਢ • ઀ଓ͢ΔαʔϏε͕ଟ͍ͳΒɺ 
 GUI͡Όͳ͘CDKͳͲͰߏ੒؅ཧΛਪ঑ #JAWS-UG

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

଴ͭ

Slide 22

Slide 22 text

τϥϒͬͨΒϩάΛݟΔ

Slide 23

Slide 23 text

εςʔλε RunningʹͳΕ͹OK

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Why? #JAWS-UG

Slide 32

Slide 32 text

AWS Amplify (Next.js SSR/ISR)͸Lamnda@Edge • ಈ͖ͱͯ͠͸ɺserverless-nextjsʹ͍ۙʢͱ͍ΘΕ͍ͯΔʣ • Next.jsΛෳ਺ͷLamnda@EdgeʹσϓϩΠ • CloudFront - Lamnda@Edge - S3ߏ੒ʹͳΔ • ΤοδͰಈ͘ͷͰɺૣ͍ɻ ISR΋Ͱ͖Δɻnodejs14΋࢖͑Δ • ͨͩ͠Lamnda@Edgeͷ੍ݶʹनΘΕΔ #JAWS-UG

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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