Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SPAのホスティングと
Netlifyの話

0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=47 Yosuke Onoue
October 06, 2018
Technology
2
680

 SPAのホスティングと
Netlifyの話

ng-kyoto Angular Meetup #8 の発表資料です。

0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=128

Yosuke Onoue

October 06, 2018
Tweet

More Decks by Yosuke Onoue

See All by Yosuke Onoue
0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=48 likr
2
330
0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=48 likr
1
340
0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=48 likr
1
93
0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=48 likr
23
9.7k
0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=48 likr
4
3.5k
0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=48 likr
0
160
0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=48 likr
0
220
0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=48 likr
2
370
0fa1c2ed2eb4a18ddec3dd70cb1f72db?s=48 likr
15
5.8k

Other Decks in Technology

See All in Technology
D7e58c3627cba51ea08a554ccdb15d16?s=48 mita2
0
100
E9a13bad191688bca6cdcf4a12195bb4?s=48 hanakara_milk
0
210
0b626efa067fc1732d0827b6ac1ca6e1?s=48 shoheiyamamoto
0
210
0deae06ab5d86b39feeec2e23a30b88a?s=48 yoku0825
PRO
0
170
Ad449f3f4e595ade283a30c4f66010be?s=48 seto_hi
3
1.1k
9ea422a61c1a69c888786830eee3dbe6?s=48 osonoi
0
130
7e6a435700dda6cdb22105d601f20892?s=48 picardparis
4
2.6k
93951dd323433ad39f5bc635cc686f96?s=48 yusuketakagi
3
1.4k
E8ac626646da35420ffba5da02f4787d?s=48 ohsawa0515
0
250
1d1580fb0945b0ffadff18e28bead3c5?s=48 adarapata
1
210
A6ad06db0fdd12a69bd2a92e8280247e?s=48 kunihikokido
6
1.6k
71c9ebde850996d2533c5df4df2c93c6?s=48 opdavies
0
2.5k

Featured

See All Featured
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
256
17k
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
82
4.8k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
222
47k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
402
20k
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
657
54k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
4
690
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
89
4k
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
20
790
245cee81a9c424266e5e401d844ea881?s=48 lara
18
3k
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
116
7.2k
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
629
48k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
333
29k

Transcript

  1. 41"ͷϗεςΟϯάͱ
 /FUMJGZͷ࿩ ͓ͷ͏͑ ೥݄೔OHLZPUP"OHVMBS.FFUVQ

  2. ࣗݾ঺հ w ඌ্༸հ :PTVLF0OPVF  w ೔ຊେֶจཧֶ෦৘ใՊֶՊॿڭ w ৘ใՄࢹԽɺ਺ཧ࠷దԽɺҙࢥܾఆࢧԉͷݚڀ w

    ՄࢹԽγεςϜͷ։ൃʹ8FCϑϩϯτΤϯυٕज़Λ࢖༻ w -JHIUIPVTFͷείΞվળ͕ϚΠϒʔϜ
  3. None

  4. 41"ʢ"OHVMBSΞϓϦʣͷ ϗεςΟϯάΛͲ͏͍ͯ͠·͔͢ʁ

  5. Ͳ͏͍ͯ͠·͔͢ʁ w ࣗલͰߏங w ΦϯϓϨɺ714ɺ*BB4 w Ϩϯλϧαʔόɺ1BB4 w ετϨʔδαʔϏε w

    (JU)VC1BHFTɺ4 w ϗεςΟϯάαʔϏε w /FUMJGZɺ'JSFCBTF

  6. Ͳ͏΍ͬͯબ΂͹ྑ͍͔ʁ

  7. 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 ։ൃํ๏ͷҧ͍

  8. -JHIUIPVTF w 8FCαΠτͷղੳπʔϧʢ$ISPNF֦ுPSίϚϯυʣ w 1SPHSFTTJWF8FC"QQ w 1FSGPSNBODF w "DDFTTJCJMJUZ w

    #FTU1SBDUJDFT w 4&0 w $ISPNF͔Βඪ४౥ࡌʢ"VEJUTQBOFMʣ w CZ(PPHMF

  9. 1SPHSFTTJWF8FC"QQT w IUUQTEFWFMPQFSTHPPHMFDPNXFCQSPHSFTTJWF XFCBQQT w 8FCαΠτͱωΠςΟϒΞϓϦͷ
 ͍͍ͱ͜औΓΛͨ͠8FCΞϓϦ w 1SPHSFTTJWF&OIBODFNFOU w

    ߴ͍ϢʔβϏϦςΟͷ࣮ݱ w ϏδωεϑϨϯυϦʔ

  10. w )5514 w Ϩεϙϯγϒ w ΦϑϥΠϯ w ϗʔϜը໘௥Ճ w ௿଎ճઢରԠ

    w Ϋϩεϒϥ΢βରԠ w εϜʔζͳϖʔδભҠ w ϖʔδຖͷ63- 18"$IFDLMJTU IUUQTEFWFMPQFSTHPPHMFDPNXFCQSPHSFTTJWFXFCBQQTDIFDLMJTU ϕʔεϥΠϯཁ݅ ໛ൣతͳ18" w ΠϯσοΫεՄೳ w 69 w ύϑΥʔϚϯε w Ωϟογϡ w ௨஌ w ͦͷଞ

  11. w )5514 w Ϩεϙϯγϒ w ΦϑϥΠϯ w ϗʔϜը໘௥Ճ w ௿଎ճઢରԠ

    w Ϋϩεϒϥ΢βରԠ w εϜʔζͳϖʔδભҠ w ϖʔδຖͷ63- 18"$IFDLMJTUͱϗεςΟϯά ϕʔεϥΠϯཁ݅ ໛ൣతͳ18" w ΠϯσοΫεՄೳ w 69 w ύϑΥʔϚϯε w Ωϟογϡ w ௨஌ w ͦͷଞ ϗεςΟϯά͸18"ͷཁ݅ͷଟ͘ʹؔΘΔ

  12. ۩ମతʹ͸ɺ

  13. 41"ϗεςΟϯάͷཁ݅ w 63-ϦμΠϨΫτ w )5514αϙʔτ w ΧελϜυϝΠϯ w ϓϦϨϯμϦϯά w

    ߴ଎ w ҆Ձ w ؆୯ w ৴པੑ

  14. 41"ͷ3PVUJOH IUUQTFYBNQMFDPN JOEFYIUNM JOEFYIUNM CVOEMFKT IUUQTFYBNQMFDPNQBHF 41"಺ͷϖʔδભҠʢ)JTUPSZ"1*ʣ IUUQTFYBNQMFDPNQBHF /PU'PVOE JOEFYIUNM

    CVOEMFKT ϦϩʔυPS63-΁௚઀ΞΫηε

  15. 41"ͷ3PVUJOH IUUQTFYBNQMFDPN JOEFYIUNM JOEFYIUNM CVOEMFKT IUUQTFYBNQMFDPNQBHF 41"಺ͷϖʔδભҠʢ)JTUPSZ"1*ʣ IUUQTFYBNQMFDPNQBHF JOEFYIUNM JOEFYIUNM

    CVOEMFKT ϦϩʔυPS63-΁௚઀ΞΫηε QBHF΁ͷΞΫηε͸JOEFYIUNMΛฦ͢

  16. )5514 w վ᜵ɾ౪ௌ౳ͷ߈ܸͷ๷ࢭ w 4FSWJDF8PSLFS΍)551ʹඞਢ w (PPHMFʹΑΔ8FCαΠτͷධՁʹӨڹ w Ͱ͖Ε͹)551͔Β)5514ʹϦμΠϨΫτ͢Δ

  17. Ϋϩʔϥɾ0(1ରԠ w 4/4ͷڞ༗ɺ(PPHMFͷΫϩʔϥͰೝࣝ͞ΕΔΑ͏ʹ w 63-ຖʹ41"ଆͰॻ͖׵͍͑ͯΔ৔߹ରԠ͕େม

  18. ࣗલ Ϩϯαό (JU)VC 1BHFT 'JSFCBTF /FUMJGZ 63-ϦμΠϨ Ϋτ ˓ ˚

    º ˓ ˓ )5514α ϙʔτ ˓ ˚ ˓ ˓ ˓ ΧελϜυϝ Πϯ ˓ ˚ ˓ ˓ ˓ ϓϦϨϯμϦ ϯά ˓ ˚ º º ˓ ߴ଎ ˚ ˚ ˓ ˓ ˓ ҆Ձ º ˚ ˓ ˓ ˓ ؆୯ º ˚ ˓ ˓ ˓

  19. /FUMJGZ IUUQTXXXOFUMJGZDPN

  20. /FUMJGZͷ࢖͍ํ w $POUJOVPVT%FQMPZNFOU w (JU)VCʹ1VTI͢ΔͱࣗಈͰϖʔδߋ৽ w खಈσϓϩΠ w ίϚϯυϥΠϯπʔϧ w

    ϑΝΠϧΞοϓϩʔυ

  21. /FUMJGZͷ࢖͍ํ w $POUJOVPVT%FQMPZNFOU w (JU)VCʹ1VTI͢ΔͱࣗಈͰϖʔδߋ৽ w खಈσϓϩΠ w ίϚϯυϥΠϯπʔϧ w

    ϑΝΠϧΞοϓϩʔυ

  22. %FNP  $ npm i -g @angular/cli $ ng new

    my-app $ cd my-app/ $ ng serve --open ΞϓϦͷ࡞੒
  23. None

  24. %FNP  $ npm i -D netlify-cli@next $ npx netlify

    login $ ng build --prod $ npx netlify deploy -d dist/my-app /FUMJGZ΁ͷσϓϩΠ

  25. %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"ͷ༗ޮԽ

  26. "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

  27. %FNP  $ netlify deploy -d dist/my-app --prod /FUMJGZ΁ͷ࠶σϓϩΠ

  28. None

  29. ·ͱΊ w ༏ΕͨσϓϩΠ؀ڥ͕Ϟμϯͳ8FCΞϓϦʹඞਢ w ٕज़બ୒Λ͔ͬ͠Γ͠Α͏ º஌ͬͯΔ΋ͷɾ࢖͑Δ΋ͷΛબͿ ºྲྀߦͬͯΔ΋ͷΛબͿ ˓࢖͏΂͖΋ͷΛબͿ w /FUMJGZΛ͓ࢼ͋͠Εʂ