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
490
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
620
コミュニティ運営から 中の人に変わって感じたこと
hideokamoto
0
90
Developerが Developer Advocateになった話 / dev-rel-meetup-tokyo-71
hideokamoto
0
340
WordPressでの webサイト制作2022 / ngk2022s
hideokamoto
0
450
JavaScript(TypeScript)で メディアサイトを インフラから構築する方法 / jsconf-jp-2021
hideokamoto
2
4.2k
AWS上でStripeを利用したアプリをより安全にデプロイする方法 /jaws-pankration-2021
hideokamoto
1
200
Shifter Headlessと Headless WordPressの紹介
hideokamoto
0
1.9k
Stripe & Next.js + AWS Amplify で会員 + 定期課金機能 / JP_Stripes20210903
hideokamoto
7
3.2k
後付けで 従量課金プランの 提供を開始した話 / 20210609-jp_stripes
hideokamoto
0
220
Other Decks in Programming
See All in Programming
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
マンガアプリViewerの大画面対応を考える
kk__777
0
260
なぜGoのジェネリクスはこの形なのか? - Featherweight Goが明かす設計の核心
qualiarts
0
260
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
260
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
140
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
320
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
2
380
ドメイン駆動設計のエッセンス
masuda220
PRO
2
140
Devoxx BE - Local Development in the AI Era
kdubois
0
140
Developer Joy - The New Paradigm
hollycummins
1
370
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
12
7.2k
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
14
46k
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
72
11k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
Raft: Consensus for Rubyists
vanstee
140
7.2k
Embracing the Ebb and Flow
colly
88
4.9k
For a Future-Friendly Web
brad_frost
180
10k
YesSQL, Process and Tooling at Scale
rocio
173
15k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Side Projects
sachag
455
43k
A designer walks into a library…
pauljervisheath
209
24k
Automating Front-end Workflow
addyosmani
1371
200k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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