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
420
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
440
コミュニティ運営から 中の人に変わって感じたこと
hideokamoto
0
52
Developerが Developer Advocateになった話 / dev-rel-meetup-tokyo-71
hideokamoto
0
260
WordPressでの webサイト制作2022 / ngk2022s
hideokamoto
0
380
JavaScript(TypeScript)で メディアサイトを インフラから構築する方法 / jsconf-jp-2021
hideokamoto
2
4k
AWS上でStripeを利用したアプリをより安全にデプロイする方法 /jaws-pankration-2021
hideokamoto
1
170
Shifter Headlessと Headless WordPressの紹介
hideokamoto
0
1.6k
Stripe & Next.js + AWS Amplify で会員 + 定期課金機能 / JP_Stripes20210903
hideokamoto
7
2.9k
後付けで 従量課金プランの 提供を開始した話 / 20210609-jp_stripes
hideokamoto
0
180
Other Decks in Programming
See All in Programming
Golang と Erlang
taiyow
7
1.7k
CSC509 Lecture 05
javiergs
PRO
0
180
App Store Connect APIで 作業時間を増やそう
mot_techtalk
3
130
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
440
ML-прайсинг_на_Lamoda__вошли_и_вышли__приключение_на_20_минут__Слава_Цыганков.pdf
lamodatech
0
390
Prompt Engineering for Developers @ AWS Community Day Adria 2024
slobodan
0
100
レガシーな Android アプリのリアーキテクチャ戦略
oidy
1
140
.NET Aspireのクラウド対応検証: Azureと他環境での実践
ymd65536
1
660
組織に自動テストを書く文化を根付かせる戦略(2024秋版) / Building Automated Test Culture 2024 Autumn Edition
twada
PRO
8
3.5k
(Deep|Web) Link support with expo-router
mrtry
0
190
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
1
770
Quarto Clean Theme
nicetak
0
220
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Building Your Own Lightsaber
phodgson
102
6k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Six Lessons from altMBA
skipperchong
26
3.4k
Why Our Code Smells
bkeepers
PRO
334
57k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
26
4.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
What's in a price? How to price your products and services
michaelherold
243
11k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
13
1.8k
Making Projects Easy
brettharned
115
5.9k
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