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
Serverless SPA development starting with Angular
Search
Haruna Oka
July 03, 2020
Programming
0
3.2k
Serverless SPA development starting with Angular
フロント知識0から始めるサーバーレスSPA開発
フロントもバックエンドもフルスタックに爆速で開発していくための、Angularの使い方や勘所を解説します。
Haruna Oka
July 03, 2020
Tweet
Share
More Decks by Haruna Oka
See All by Haruna Oka
AWS AppSyncと仲良くするためのTips
okaharuna
1
110
Next.js × AWS App Runner × AWS AppSyncで進めるクライアントファーストのWEB開発
okaharuna
7
5.3k
re:Growth 2020 Serverless
okaharuna
2
1.3k
EventBridgeでAWSとShopifyの統合
okaharuna
2
5.7k
serverlessdaysfukuoka_oka.pdf
okaharuna
1
2k
SPA×Auth0
okaharuna
5
1.9k
Fargate_Super_Introduction.pdf
okaharuna
2
3k
Other Decks in Programming
See All in Programming
Amazon Bedrock Agentsを用いてアプリ開発してみた!
har1101
0
340
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
480
Tauriでネイティブアプリを作りたい
tsucchinoko
0
370
Remix on Hono on Cloudflare Workers
yusukebe
1
300
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
4
1.4k
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
520
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
960
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
430
OnlineTestConf: Test Automation Friend or Foe
maaretp
0
110
レガシーシステムにどう立ち向かうか 複雑さと理想と現実/vs-legacy
suzukihoge
14
2.2k
Amazon Qを使ってIaCを触ろう!
maruto
0
410
色々なIaCツールを実際に触って比較してみる
iriikeita
0
330
Featured
See All Featured
Faster Mobile Websites
deanohume
305
30k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
A designer walks into a library…
pauljervisheath
204
24k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Docker and Python
trallard
40
3.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
Designing the Hi-DPI Web
ddemaree
280
34k
Unsuck your backbone
ammeep
668
57k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Transcript
"OHVMBSʷ"84 $9ࣄۀຊ෦Ԭय़ಸ ϑϩϯτ͔ࣝΒ࢝ΊΔ αʔόʔϨε41"։ൃ
ࣗݾհ Ԭय़ಸ $MBTTNFUIPE *OD $9#VTJOFTT%JW."%5FBN ˏ0LB)BSVOB αʔόʔαΠυαʔόʔϨε
ຊͷΞδΣϯμ "OHVMBSͷಛ पลπʔϧɾ։ൃલͷ४උ ։ൃ࣌ͷϙΠϯτ ʲ׆༻ྫʳ%FWFMPQFST*0$"'&ཧը໘
ओͳରͷํ ϑϩϯτΛ࣮ͨ͜͠ͱ͕ͳ͍ "OHVMBSΛͬͨ͜ͱ͕ͳ͍ 5ZQFTDSJQUɺ͘͠+BWBTDSJQU͔Δ όοΫΤϯυϑϩϯτ։ൃ͍ͨ͠
+4ϑϨʔϜϫʔΫͷҙࣝɺؔ৺ɺຬͷϥϯΩϯά
"OHVMBS+4ϦϦʔε
"OHVMBSϦϦʔε
"OHVMBS+4
"OHVMBS+4 "OHVMBS
"OHVMBS+4 "OHVMBS 5ZQFTDSJQU +BWBTDSJQU ɾɾɾ ɾɾɾ
+4ϑϨʔϜϫʔΫͷҙࣝɺؔ৺ɺຬͷϥϯΩϯά
+4ϑϨʔϜϫʔΫͷҙࣝɺؔ৺ɺຬͷϥϯΩϯά "OHVMBSͱ"OHVMBS+4͕ࠞಉ͞Ε͍ͯΔ!
"OHVMBS ʹ"OHVMBS͕ϦϦʔε͞Ε·ͨ͠ʂ"
"OHVMBS
"OHVMBSͷಛ 5ZQFTDSJQUඪ४ ϑϧελοΫϑϨʔϜϫʔΫ ίϯϙʔωϯτࢦΞʔΩςΫνϟ ํόΠϯσ Οϯά "OHVMBS$-*
OHOFX"OHVMBSΞϓϦͷ࡞ OHHίϯϙʔωϯτͷ࡞ SPVUF TFSWJDF QJQFT OHTFSWFϩʔΧϧαʔόʔͷىಈ OHUFTU&&ςετ OHMJOU-JOUͷద༻
"OHVMBS$-*ͰͰ͖Δ͜ͱ
OHOFX"OHVMBSΞϓϦͷ࡞ OHHίϯϙʔωϯτͷ࡞ SPVUF TFSWJDF QJQFT OHTFSWFϩʔΧϧαʔόʔͷىಈ OHUFTU&&ςετ OHMJOU-JOUͷద༻
"OHVMBS.BUFSJBM
"OHVMBSͰ18" ؆୯ $ ng add @angular/pwa —project prj-name $
ng generate app-shell (ҙ)
"OHVMBSͰ443 αʔόʔαΠυϨϯμϦϯά "OHVMBS6OJWFSTBMΛ͏ͱ؆୯ʹͰ͖Δ $ ng add @nguniversal/express-engine $ npm
run dev:ssr ෦తʹ/PEF+4FYQSFTTͰ࣮ߦ͞ΕΔ
ϞόΠϧΞϓϦ ϞόΠϧΞϓϦҰॹʹఏڙ͢Δ߹ /BUJWF4DSJQUΛ͓͏
/BUJWF4DSJQU
8&#ϗεςΟϯά (JUIVC$PEF$PNNJUΛ࿈ܞͯ͠$*$%ڥ͕࡞ΕΔ ϏϧυઃఆʹΑͬͯ"OHVMBSͷ&&ςετ࣮ߦͰ͖·͢ ΧελϜυϝΠϯઃఆՄೳ $034Λ͍͍ͨ߹$MPVE'SPOU 4ʹ͠Α͏ "NQMJGZ$POTPMFΛ͓͏
͜͜·Ͱ "OHVMBSͷجຊΘ͔͚ͬͨͲɺ ࣮ࡍͲ͏։ൃ͍͚͍͍ͯ͠ʁ
ॳظඋ ୯ମςετLBSNB &&QSPUSBDUPS -JOU54-JOU
͓͢͢Ίඋ ୯ମςετ+FTU &&$ZQSFTT $444BTT ΞϓϦ࡞࣌ʹબՄೳ -JOU&4-JOU ϑΥʔϚολʔ1SFUUJFS
͓͢͢Ίඋ ୯ମςετ+FTU &&$ZQSFTT $444BTT ΞϓϦ࡞࣌ʹબՄೳ -JOU&4-JOU˞ެࣜαϙʔτ·ͩ ϑΥʔϚολʔ1SFUUJFS
όοΫΤϯυ5ZQFTDSJQUʹ ϑϩϯτόοΫΤϯυ5ZQFTDSJQUͰ౷Ұ͢Δ͜ͱͰ อकੑ։ൃޮ্͕Δ
ϑΥϧμߏ DPSFɾɾɾೝূϞδϡʔϧαʔόʔ௨৴Λߦ͏αʔϏε܈ TIBSFEɾɾɾڞ௨Ͱ͏ίϯϙʔωϯτσ ΟϨΫςΟϒ GFBUVSFɾɾɾ֤ը໘ͷίϯϙʔωϯτ TSDBQQ
3Y+4ͱʁ ϦΞΫςΟϒɾϓϩάϥϛϯά༻ͷϥΠϒϥϦ
SYKTΠϕϯτॲཧͷྫ ϚεΫϦοΫ͔Β0CTFSWBCMFΛ࡞ import { fromEvent } from ‘rxjs’; ngOnInit():
void { const click$ = fromEvent(document, 'click'); click$.subscribe(evt => console.log(evt)); }
SYKTΠϕϯτॲཧͷྫ ϚεΫϦοΫ͔Β0CTFSWBCMFΛ࡞ import { fromEvent } from ‘rxjs’; ngOnInit():
void { const click$ = fromEvent(document, 'click'); click$.subscribe(evt => console.log(evt)); }
SYKTඇಉظॲཧͷྫ 1SPNJTF͔Β0CTFSWBCMFΛ࡞ JNQPSU\GSPN^GSPNbSYKT DPOTUEBUBGSPN GFUDI BQJFOEQPJOU EBUBTVCTDSJCF \
OFYU SFTQPOTF \DPOTPMFMPH SFTQPOTF ^ FSSPS FSS \DPOTPMFFSSPS &SSPS FSS ^ DPNQMFUF \DPOTPMFMPH $PNQMFUFE ^ ^
%FWFMPQFST*0$"'&ͷཧը໘
%FWFMPQFST*0$"'&ͷػೳ จཧ ཧ ച্ूܭɾ$47ΤΫεϙʔτ Ϋʔϙϯཧ ళฮελοϑ ֤ηϯαʔͷઃఆ ళฮͷՃɾઃఆ Ϣʔβʔݕࡧɾઃఆ
"ENJOݖݶ
%FWFMPQFST*0$"'&ͷػೳ จཧ ཧ ച্ूܭɾ$47ΤΫεϙʔτ Ϋʔϙϯཧ ళฮελοϑ ֤ηϯαʔͷઃఆ ళฮͷՃɾઃఆ Ϣʔβʔݕࡧɾઃఆ
"ENJOݖݶ #SPVUFSͷ$BO"DUJWBUFΛͬͯΞΫηε੍ޚ
͓͢͢Ίͷֶशࡐྉ "OHVMBSελΠϧΨΠυ 5ZQFTDSJQU%FFQ%JWF IUUQTBOHVMBSJPHVJEFTUZMFHVJEF IUUQTCBTBSBUHJUCPPLJPUZQFTDSJQU