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
SPA on AWS
Search
urmot
January 18, 2019
Technology
0
150
SPA on AWS
urmot
January 18, 2019
Tweet
Share
More Decks by urmot
See All by urmot
ログラスを支える設計標準について / loglass-design-standards
urmot
12
2.3k
ログラスを支える技術的投資の仕組み / loglass-technical-investment
urmot
10
5.3k
実践!CloudFormation Best Practice ~CloudFormationで始める組織改革~
urmot
2
2.9k
CircleCIを導入した話
urmot
0
54
実践!CloudFormation Best Practice
urmot
0
120
RDBのログを取る時にDMSを使うという選択肢
urmot
0
78
ベンチャー企業のインフラを運用して学んだ99のこと
urmot
0
1k
Other Decks in Technology
See All in Technology
AWS Observability ベストプラクティス 大紹介
o11yfes2023
0
140
類似ロジック実装をiOS/Android間で合わせる道標No.1
fumiyasac0921
1
220
データ基盤を支える技術
chanyou0311
5
2.9k
複雑なビジネスルールに挑む:正確性と効率性を両立するfp-tsのチーム活用術 / Strike a balance between correctness and efficiency with fp-ts
kakehashi
5
3.3k
「できる!」を増やすGitHub Copilot活用法 / How to use GitHub Copilot to expand your possibilities
sansan_randd
1
220
IaCからAWSに入門した初心者が CloudFormationを通して考えた「AWS操作」の使い分け
maimyyym
3
670
From here to resilience - a travel guide
ufried
1
160
Dungeons and Dragons and Rails
joelq
0
220
PHP 9 に備えよ - 動的プロパティ、どうすればいぃ?
taisukearase
0
150
Google Cloud Next '24 Recap in ZOZO AIにより変わる開発 運用/Development and operation changed by AI
gachimuchiengineer
0
150
Deno で作る快適な “as Code” プラットフォーム – TSKaigi 2024
pizzacat83
4
280
PhpStorm超絶技巧40分集中講義 #phpconkagawa
yusuke
4
700
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
14
8.4k
Building Your Own Lightsaber
phodgson
100
5.7k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
The Language of Interfaces
destraynor
151
23k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
Web Components: a chance to create the future
zenorocha
306
41k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.8k
How STYLIGHT went responsive
nonsquared
92
4.8k
Why Our Code Smells
bkeepers
PRO
331
56k
What the flash - Photography Introduction
edds
64
11k
Building Effective Engineering Teams - LeadDev
addyosmani
33
1.9k
Transcript
SPA on AWS - Free Web Site Hosting - 2019.01.18
Netadashi Meetup #8 @urmot
ಥવͰ͕͢ɺ
ݸਓ։ൃͯ͠·͔͢ʁ
ࠓ͓͢Δ༰ • SPAͰαʔϏεӡ༻͢Δ͓ • ߏͷ͝આ໌ • ྉۚͷ͓
SPAͰαʔϏεӡ༻͢Δ
Ұલ͘Β͍͔Βɺ WebαʔϏεͷӡ༻Λ։࢝
None
WebອըΛ·ͱΊΔαΠτ • WebອըͷͷϦϯΫΛ·ͱΊͨαΠτ • CrawlerΛͬͯϦϯΫΛऩू • React + ReduxͰSPA •
APIServerlessͰExpress
ߏͷ͝આ໌
None
None
SPA৴෦ • CloudFront + S3 • ಠࣗυϝΠϯͰSSLʹରԠ • CDNͰߴʹ҆ఆͯ͠৴ •
SSRະ࣮
SPA৴෦ • σϓϩΠ؆୯ 1. JSΛbuild 2. S3ʹΞοϓϩʔυ 3. CloudFrontͷΩϟογϡΛΫϦΞ
SPA+CloudFrontͷҙ • ϧʔτύε(/)Ҏ֎ͰϦϩʔυ͞Εͨࡍʹ404 • 404ͷ࣌ʹindex.htmlΛฦ͢Α͏ʹ͢Δ • CloudFrontͷError PagesͰઃఆՄೳ
None
APIαʔό෦ • API Gateway + Lambda + DynamoDBͰߏ • Lambda্ͰExpressΛ࣮ߦ
• aws-serverless-expressͰ࣮ • ৄͪ͘͜͠ΒͷهࣄΛࢀর
SPA+Lambdaͷҙ • Lambdaίʔϧυελʔτ • ϦΫΤετ͕ͳ͍ͱίϯςφ͕མͪΔ • ίϯςφͳ͍߹ɺॳظԽॲཧ͕Δ • ॳظԽॲཧͷϨΠςϯγ͕ͳ͍
Lambdaίʔϧυελʔτରࡦ • LambdaΛϗοτελϯόΠ͓ͯ͘͠ • CloudWatch EventsͰLambdaΛఆظ࣮ߦ • (ϦΫΤετ్͕ઈ͑ͳ͍ఔΞΫηεΛՔ͙)
ྉۚͷ͓
None
໊͓લ.comͷ1ԁυϝΠϯʂ
None
CloudFrontͷྉۚମܥ • Πϯλʔωοτͷσʔλసૹ (GB୯Ґ) • ΦϦδϯͷσʔλసૹ (GB୯Ґ) • HTTP/HTTPSϝιουϦΫΤετ (1ສ݅୯Ґ)
CloudFrontͷྉۚମܥ • Πϯλʔωοτͷσʔλసૹ (GB୯Ґ) • ΦϦδϯͷσʔλసૹ (GB୯Ґ) • HTTP/HTTPSϝιουϦΫΤετ (1ສ݅୯Ґ)
CloudFrontͷྉۚମܥ • HTTP/HTTPSϝιουϦΫΤετ (1ສ݅୯Ґ) ຊ ؖࠃ γϯΨϙʔϧ ถࠃ )551
)5514
CloudFrontͷྉۚମܥ • HTTP/HTTPSϝιουϦΫΤετ (1ສ݅୯Ґ) • ྫ: 100ສHTTPSϦΫΤετ (ຊ) • $0.012
* 100ສ / 1ສ = $1.2
None
DynamoDBͷྉۚମܥ • σʔλετϨʔδ (GB୯Ґ) • ಡΈࠐΈ/ॻ͖ࠐΈϦΫΤετ (1KB/sec)
DynamoDBͷྉۚମܥ • σʔλετϨʔδ (GB୯Ґ) • ຖ݄ɺ࠷ॳͷ25GBͷอແྉ • 25GBҎ߱$0.285/month
DynamoDBͷྉۚମܥ • ಡΈࠐΈ/ॻ͖ࠐΈϦΫΤετ (1KB/sec) ,#ͷ࣌ؒ͋ͨΓͷྉۚ ಡΈࠐΈ ॻ͖ࠐΈ
DynamoDBͷྉۚମܥ • ಡΈࠐΈ/ॻ͖ࠐΈϦΫΤετ (1KB/sec) • ຖ݄ɺ25[req/sec]͕ແྉ • 2ԯ݅ͷϦΫΤετॲཧʹेͳ༰ྔ
·ͱΊ
؆୯ʹαʔϏεΛ࡞ΕΔ࣌ • εέʔϥϒϧ͔ͭίετ • NetlifyͳͲ੩త৴ಛԽαʔϏεग़͍ͯΔ • AWSҰ݁ߏແྉͰ͑Δ
ཪٕ
AWS Promotional Credit for Alexa • Alexa SkillΛҰͭ࡞ͬͯެ։͢Δ • AWSͷ$100ͷΫϨδοτ͕͑Δ
• ΫϨδοτҰؒ༗ޮ
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ