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

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

1. 41"ͷϗεςΟϯάͱ
 /FUMJGZͷ࿩ ͓ͷ͏͑
   ೥݄೔
   OHLZPUP
   "OHVMBS
   .FFUVQ
   
2. ࣗݾ঺հ w ඌ্
   ༸հ
   :PTVLF
   0OPVF
   w ೔ຊେֶ
   จཧֶ෦
   ৘ใՊֶՊ
   ॿڭ
   w ৘ใՄࢹԽɺ਺ཧ࠷దԽɺҙࢥܾఆࢧԉͷݚڀ
   w ՄࢹԽγεςϜͷ։ൃʹ8FCϑϩϯτΤϯυٕज़Λ࢖༻
   w -JHIUIPVTFͷείΞվળ͕ϚΠϒʔϜ
4. 41"ʢ"OHVMBSΞϓϦʣͷ
   ϗεςΟϯάΛͲ͏͍ͯ͠·͔͢ʁ
5. Ͳ͏͍ͯ͠·͔͢ʁ w ࣗલͰߏங
   w ΦϯϓϨɺ714ɺ*BB4
   w Ϩϯλϧαʔόɺ1BB4
   w ετϨʔδαʔϏε
   w (JU)VC
   1BHFTɺ4
   w ϗεςΟϯάαʔϏε
   w /FUMJGZɺ'JSFCBTF
6. Ͳ͏΍ͬͯબ΂͹ྑ͍͔ʁ
7. 8FCͷτϨϯυ w ੩త8FCαΠτ
   w )5.-ɺ8FCαʔόʔ
   w ಈత8FCαΠτ
   w 1)1ɺ1ZUIPOɺ3VCZɺʜ
   w 4JOHMF
   1BHF
   "QQMJDBUJPO
   41"
   w +BWB4DSJQUɺ3&45
   "1*
   w 1SPHSFTTJWF
   8FC
   "QQT
   18"
   w 41"
   
   Ћ ΑΓྑ͍69΁ ύϥμΠϜͷน
   w ൃ૝ͷҧ͍
   w ։ൃํ๏ͷҧ͍
8. -JHIUIPVTF w 8FCαΠτͷղੳπʔϧʢ$ISPNF֦ு
   PS
   ίϚϯυʣ
   w 1SPHSFTTJWF
   8FC
   "QQ
   w 1FSGPSNBODF
   w "DDFTTJCJMJUZ
   w #FTU
   1SBDUJDFT
   w 4&0
   w $ISPNF
   ͔Βඪ४౥ࡌʢ"VEJUT
   QBOFMʣ
   w CZ
   (PPHMF
9. 1SPHSFTTJWF
   8FC
   "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 Ϧϩʔυ
    PS
    63-΁௚઀ΞΫηε
15. 41"ͷ3PVUJOH IUUQTFYBNQMFDPN JOEFYIUNM JOEFYIUNM CVOEMFKT IUUQTFYBNQMFDPNQBHF 41"಺ͷϖʔδભҠʢ)JTUPSZ
    "1*ʣ IUUQTFYBNQMFDPNQBHF JOEFYIUNM JOEFYIUNM CVOEMFKT Ϧϩʔυ
    PS
    63-΁௚઀ΞΫηε QBHF
    ΁ͷΞΫηε͸
    JOEFYIUNM
    Λฦ͢
16. )5514 w վ᜵ɾ౪ௌ౳ͷ߈ܸͷ๷ࢭ
    w 4FSWJDF
    8PSLFS΍)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 ΞϓϦͷ࡞੒
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΁ͷ࠶σϓϩΠ
29. ·ͱΊ w ༏ΕͨσϓϩΠ؀ڥ͕Ϟμϯͳ8FCΞϓϦʹඞਢ
    w ٕज़બ୒Λ͔ͬ͠Γ͠Α͏
    º
    ஌ͬͯΔ΋ͷɾ࢖͑Δ΋ͷΛબͿ
    º
    ྲྀߦͬͯΔ΋ͷΛબͿ
    ˓
    ࢖͏΂͖΋ͷΛબͿ
    w /FUMJGZΛ͓ࢼ͋͠Εʂ