Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Jamstack開発者のための App Runner入門
Search
Hidetaka Okamoto
January 26, 2022
Programming
1
450
Jamstack開発者のための App Runner入門
JAWS-UG関西「コンテナ勉強会/App Runnerハンズオン(見るだけOK)もあるよ」登壇資料です。
Hidetaka Okamoto
January 26, 2022
Tweet
Share
More Decks by Hidetaka Okamoto
See All by Hidetaka Okamoto
OpenAI APIで API Changelogを要約してみた話 / chatgpt-osaka-1
hideokamoto
0
510
コミュニティ運営から 中の人に変わって感じたこと
hideokamoto
0
65
Developerが Developer Advocateになった話 / dev-rel-meetup-tokyo-71
hideokamoto
0
300
WordPressでの webサイト制作2022 / ngk2022s
hideokamoto
0
400
JavaScript(TypeScript)で メディアサイトを インフラから構築する方法 / jsconf-jp-2021
hideokamoto
2
4.1k
AWS上でStripeを利用したアプリをより安全にデプロイする方法 /jaws-pankration-2021
hideokamoto
1
180
Shifter Headlessと Headless WordPressの紹介
hideokamoto
0
1.7k
Stripe & Next.js + AWS Amplify で会員 + 定期課金機能 / JP_Stripes20210903
hideokamoto
7
3.1k
後付けで 従量課金プランの 提供を開始した話 / 20210609-jp_stripes
hideokamoto
0
200
Other Decks in Programming
See All in Programming
Formの複雑さに立ち向かう
bmthd
1
930
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
370
バッチを作らなきゃとなったときに考えること
irof
2
520
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
170
機能が複雑化しても 頼りになる FactoryBotの話
tamikof
0
120
kintone開発を効率化するためにチームで試した施策とその結果を大放出!
oguemon
0
140
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
300
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.3k
2025.2.14_Developers Summit 2025_登壇資料
0101unite
0
180
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
790
GoとPHPのインターフェイスの違い
shimabox
2
210
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
3
500
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Optimizing for Happiness
mojombo
376
70k
A Philosophy of Restraint
colly
203
16k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Making Projects Easy
brettharned
116
6k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Unsuck your backbone
ammeep
669
57k
Designing for humans not robots
tammielis
250
25k
Transcript
Jamstack։ൃऀͷͨΊͷ App Runnerೖ JAWS-UG ؔ Hidetaka Okamoto 2022/1/27 #JAWS-UG
Ԭຊलߴ @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
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
Agenda • Next.jsΞϓϦΛApp RunnerʹσϓϩΠͯ͠Έͨ • JamstackͳαΠτɾΞϓϦΛެ։͢ΔͨΊͷՃ࡞ۀ • AWS AmplifyͱAWS App
RunnerɺͲ͕͍͍ͬͪʁ #JAWS-UG
ެ։લʹΔͰ͋Ζ͏Ճ࡞ۀ • 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
Agenda • Next.jsΞϓϦΛApp RunnerʹσϓϩΠͯ͠Έͨ • JamstackͳαΠτɾΞϓϦΛެ։͢ΔͨΊͷՃ࡞ۀ • AWS AmplifyͱAWS App
RunnerɺͲ͕͍͍ͬͪʁ #JAWS-UG
Q. AWS Amplify͡ΌͩΊͳͷʁ #JAWS-UG
A. First ChoiceAmplify App Runnerͷग़൪͋Δ #JAWS-UG
Why? #JAWS-UG
AWS Amplify (Next.js SSR/ISR)Lamnda@Edge • ಈ͖ͱͯ͠ɺserverless-nextjsʹ͍ۙʢͱ͍ΘΕ͍ͯΔʣ • Next.jsΛෳͷLamnda@EdgeʹσϓϩΠ • CloudFront
- Lamnda@Edge - S3ߏʹͳΔ • ΤοδͰಈ͘ͷͰɺૣ͍ɻ ISRͰ͖Δɻnodejs14͑Δ • ͨͩ͠Lamnda@Edgeͷ੍ݶʹनΘΕΔ #JAWS-UG
Lambda@Edgeͷ੍ݶͰ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