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のホスティングと Netlifyの話
Search
Yosuke Onoue
October 06, 2018
Technology
2
900
SPAのホスティングと Netlifyの話
ng-kyoto Angular Meetup #8 の発表資料です。
Yosuke Onoue
October 06, 2018
Tweet
Share
More Decks by Yosuke Onoue
See All by Yosuke Onoue
ネットワーク可視化の世界
likr
7
6.4k
Think About Front-end Web Development with Rust
likr
2
530
Yewにおけるoff-the-main-thread
likr
1
750
行政事業レビューデータの可視化 / Visualization of Japan's National Budget with JUDGIT!
likr
1
220
モダンJavaScript再入門 / Re-introduction to Modern JavaScript
likr
24
11k
Web-based Data Visualization with Rust and WebAssembly
likr
4
5.7k
Introduction to Graph Drawing
likr
0
500
20190707Ionic_Meetup.pdf
likr
0
430
About the end of the web
likr
2
520
Other Decks in Technology
See All in Technology
Streamline Cloud-Native App Development Using CDEs
saeedzf
0
850
大事なのは、AIの精度だけじゃない!〜1円のズレも許されない経理領域とAI〜
jun_nemoto
11
5.1k
AIオンボーディングとAIプロセスマイニング
nrryuya
5
1.3k
令和最新版TypeScriptでのnpmパッケージ開発
lycorptech_jp
PRO
0
110
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
24k
LT:組込み屋さんのオシロが壊れた!
windy_pon
0
350
ソフトウェアは捨てやすく作ろう/Let's make software easy to discard
sanogemaru
10
5.8k
プラットフォームとしての Datadog / Datadog as Platforms
aoto
PRO
1
330
セキュリティSaaS企業が実践するCursor運用ルールと知見 / How a Security SaaS Company Runs Cursor: Rules & Insights
tetsuzawa
0
270
ITエンジニアを取り巻く環境とキャリアパス / A career path for Japanese IT engineers
takatama
4
1.5k
AIとSREの未来 / AI and SRE
ymotongpoo
2
860
libsyncrpcってなに?
uhyo
0
110
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
6
660
Thoughts on Productivity
jonyablonski
69
4.7k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Statistics for Hackers
jakevdp
799
220k
Gamification - CAS2011
davidbonilla
81
5.3k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
How GitHub (no longer) Works
holman
314
140k
Automating Front-end Workflow
addyosmani
1370
200k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Transcript
41"ͷϗεςΟϯάͱ /FUMJGZͷ ͓ͷ͏͑ ݄OHLZPUP"OHVMBS.FFUVQ
ࣗݾհ w ඌ্༸հ :PTVLF0OPVF w ຊେֶจཧֶ෦ใՊֶՊॿڭ w ใՄࢹԽɺཧ࠷దԽɺҙࢥܾఆࢧԉͷݚڀ w
ՄࢹԽγεςϜͷ։ൃʹ8FCϑϩϯτΤϯυٕज़Λ༻ w -JHIUIPVTFͷείΞվળ͕ϚΠϒʔϜ
None
41"ʢ"OHVMBSΞϓϦʣͷ ϗεςΟϯάΛͲ͏͍ͯ͠·͔͢ʁ
Ͳ͏͍ͯ͠·͔͢ʁ w ࣗલͰߏங w ΦϯϓϨɺ714ɺ*BB4 w Ϩϯλϧαʔόɺ1BB4 w ετϨʔδαʔϏε w
(JU)VC1BHFTɺ4 w ϗεςΟϯάαʔϏε w /FUMJGZɺ'JSFCBTF
Ͳ͏ͬͯબྑ͍͔ʁ
8FCͷτϨϯυ w ੩త8FCαΠτ w )5.-ɺ8FCαʔόʔ w ಈత8FCαΠτ w 1)1ɺ1ZUIPOɺ3VCZɺʜ w
4JOHMF1BHF"QQMJDBUJPO 41" w +BWB4DSJQUɺ3&45"1* w 1SPHSFTTJWF8FC"QQT 18" w 41" Ћ ΑΓྑ͍69 ύϥμΠϜͷน w ൃͷҧ͍ w ։ൃํ๏ͷҧ͍
-JHIUIPVTF w 8FCαΠτͷղੳπʔϧʢ$ISPNF֦ுPSίϚϯυʣ w 1SPHSFTTJWF8FC"QQ w 1FSGPSNBODF w "DDFTTJCJMJUZ w
#FTU1SBDUJDFT w 4&0 w $ISPNF͔Βඪ४ࡌʢ"VEJUTQBOFMʣ w CZ(PPHMF
1SPHSFTTJWF8FC"QQT w IUUQTEFWFMPQFSTHPPHMFDPNXFCQSPHSFTTJWF XFCBQQT w 8FCαΠτͱωΠςΟϒΞϓϦͷ ͍͍ͱ͜औΓΛͨ͠8FCΞϓϦ w 1SPHSFTTJWF&OIBODFNFOU w
ߴ͍ϢʔβϏϦςΟͷ࣮ݱ w ϏδωεϑϨϯυϦʔ
w )5514 w Ϩεϙϯγϒ w ΦϑϥΠϯ w ϗʔϜը໘Ճ w ճઢରԠ
w ΫϩεϒϥβରԠ w εϜʔζͳϖʔδભҠ w ϖʔδຖͷ63- 18"$IFDLMJTU IUUQTEFWFMPQFSTHPPHMFDPNXFCQSPHSFTTJWFXFCBQQTDIFDLMJTU ϕʔεϥΠϯཁ݅ ൣతͳ18" w ΠϯσοΫεՄೳ w 69 w ύϑΥʔϚϯε w Ωϟογϡ w ௨ w ͦͷଞ
w )5514 w Ϩεϙϯγϒ w ΦϑϥΠϯ w ϗʔϜը໘Ճ w ճઢରԠ
w ΫϩεϒϥβରԠ w εϜʔζͳϖʔδભҠ w ϖʔδຖͷ63- 18"$IFDLMJTUͱϗεςΟϯά ϕʔεϥΠϯཁ݅ ൣతͳ18" w ΠϯσοΫεՄೳ w 69 w ύϑΥʔϚϯε w Ωϟογϡ w ௨ w ͦͷଞ ϗεςΟϯά18"ͷཁ݅ͷଟ͘ʹؔΘΔ
۩ମతʹɺ
41"ϗεςΟϯάͷཁ݅ w 63-ϦμΠϨΫτ w )5514αϙʔτ w ΧελϜυϝΠϯ w ϓϦϨϯμϦϯά w
ߴ w ҆Ձ w ؆୯ w ৴པੑ
41"ͷ3PVUJOH IUUQTFYBNQMFDPN JOEFYIUNM JOEFYIUNM CVOEMFKT IUUQTFYBNQMFDPNQBHF 41"ͷϖʔδભҠʢ)JTUPSZ"1*ʣ IUUQTFYBNQMFDPNQBHF /PU'PVOE JOEFYIUNM
CVOEMFKT ϦϩʔυPS63-ΞΫηε
41"ͷ3PVUJOH IUUQTFYBNQMFDPN JOEFYIUNM JOEFYIUNM CVOEMFKT IUUQTFYBNQMFDPNQBHF 41"ͷϖʔδભҠʢ)JTUPSZ"1*ʣ IUUQTFYBNQMFDPNQBHF JOEFYIUNM JOEFYIUNM
CVOEMFKT ϦϩʔυPS63-ΞΫηε QBHFͷΞΫηεJOEFYIUNMΛฦ͢
)5514 w վ᜵ɾ౪ௌͷ߈ܸͷࢭ w 4FSWJDF8PSLFS)551ʹඞਢ w (PPHMFʹΑΔ8FCαΠτͷධՁʹӨڹ w Ͱ͖Ε)551͔Β)5514ʹϦμΠϨΫτ͢Δ
Ϋϩʔϥɾ0(1ରԠ w 4/4ͷڞ༗ɺ(PPHMFͷΫϩʔϥͰೝࣝ͞ΕΔΑ͏ʹ w 63-ຖʹ41"ଆͰॻ͖͍͑ͯΔ߹ରԠ͕େม
ࣗલ Ϩϯαό (JU)VC 1BHFT 'JSFCBTF /FUMJGZ 63-ϦμΠϨ Ϋτ ˓ ˚
º ˓ ˓ )5514α ϙʔτ ˓ ˚ ˓ ˓ ˓ ΧελϜυϝ Πϯ ˓ ˚ ˓ ˓ ˓ ϓϦϨϯμϦ ϯά ˓ ˚ º º ˓ ߴ ˚ ˚ ˓ ˓ ˓ ҆Ձ º ˚ ˓ ˓ ˓ ؆୯ º ˚ ˓ ˓ ˓
/FUMJGZ IUUQTXXXOFUMJGZDPN
/FUMJGZͷ͍ํ w $POUJOVPVT%FQMPZNFOU w (JU)VCʹ1VTI͢ΔͱࣗಈͰϖʔδߋ৽ w खಈσϓϩΠ w ίϚϯυϥΠϯπʔϧ w
ϑΝΠϧΞοϓϩʔυ
/FUMJGZͷ͍ํ w $POUJOVPVT%FQMPZNFOU w (JU)VCʹ1VTI͢ΔͱࣗಈͰϖʔδߋ৽ w खಈσϓϩΠ w ίϚϯυϥΠϯπʔϧ w
ϑΝΠϧΞοϓϩʔυ
%FNP $ npm i -g @angular/cli $ ng new
my-app $ cd my-app/ $ ng serve --open ΞϓϦͷ࡞
None
%FNP $ npm i -D netlify-cli@next $ npx netlify
login $ ng build --prod $ npx netlify deploy -d dist/my-app /FUMJGZͷσϓϩΠ
%FNP $ ng add @angular/pwa --project my-app $ ng
build --prod $ npm i -D http-server $ npx http-server -p 8080 -c-1 dist/my-app 18"ͷ༗ޮԽ
"assets": [ "src/_redirects", "src/robots.txt", "src/favicon.ico", "src/assets", "src/manifest.json" ], BOHVMBSKTPO /*
/index.html 200 http://ng-kyoto.netlify.com/* http://ng-kyoto.likr-lab.com/:splat 301! TSD@SFEJSFDUT <head> ... <base href="/"> <meta name="description" content="Demo for ng-kyoto Meetup #8 !"/> <meta name="viewport" content="width=device-width, initial-scale=1"> ... </head> TSDJOEFYIUNM User-agent : * Disallow : TSDSPCPUTUYU
%FNP $ netlify deploy -d dist/my-app --prod /FUMJGZͷ࠶σϓϩΠ
None
·ͱΊ w ༏ΕͨσϓϩΠڥ͕Ϟμϯͳ8FCΞϓϦʹඞਢ w ٕज़બΛ͔ͬ͠Γ͠Α͏ ºͬͯΔͷɾ͑ΔͷΛબͿ ºྲྀߦͬͯΔͷΛબͿ ˓͏͖ͷΛબͿ w /FUMJGZΛ͓ࢼ͋͠Εʂ