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

by Yosuke Onoue

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࣗݾ঺հ w ඌ্༸հ :PTVLF0OPVF w ೔ຊେֶจཧֶ෦৘ใՊֶՊॿڭ w ৘ใՄࢹԽɺ਺ཧ࠷దԽɺҙࢥܾఆࢧԉͷݚڀ w ՄࢹԽγεςϜͷ։ൃʹ8FCϑϩϯτΤϯυٕज़Λ࢖༻ w -JHIUIPVTFͷείΞվળ͕ϚΠϒʔϜ

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Ͳ͏͍ͯ͠·͔͢ʁ w ࣗલͰߏங w ΦϯϓϨɺ714ɺ*BB4 w Ϩϯλϧαʔόɺ1BB4 w ετϨʔδαʔϏε w (JU)VC1BHFTɺ4 w ϗεςΟϯάαʔϏε w /FUMJGZɺ'JSFCBTF

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

-JHIUIPVTF w 8FCαΠτͷղੳπʔϧʢ$ISPNF֦ுPSίϚϯυʣ w 1SPHSFTTJWF8FC"QQ w 1FSGPSNBODF w "DDFTTJCJMJUZ w #FTU1SBDUJDFT w 4&0 w $ISPNF͔Βඪ४౥ࡌʢ"VEJUTQBOFMʣ w CZ(PPHMF

Slide 9

Slide 9 text

1SPHSFTTJWF8FC"QQT w IUUQTEFWFMPQFSTHPPHMFDPNXFCQSPHSFTTJWF XFCBQQT w 8FCαΠτͱωΠςΟϒΞϓϦͷ  ͍͍ͱ͜औΓΛͨ͠8FCΞϓϦ w 1SPHSFTTJWF&OIBODFNFOU w ߴ͍ϢʔβϏϦςΟͷ࣮ݱ w ϏδωεϑϨϯυϦʔ

Slide 10

Slide 10 text

w )5514 w Ϩεϙϯγϒ w ΦϑϥΠϯ w ϗʔϜը໘௥Ճ w ௿଎ճઢରԠ w Ϋϩεϒϥ΢βରԠ w εϜʔζͳϖʔδભҠ w ϖʔδຖͷ63- 18"$IFDLMJTU IUUQTEFWFMPQFSTHPPHMFDPNXFCQSPHSFTTJWFXFCBQQTDIFDLMJTU ϕʔεϥΠϯཁ݅ ໛ൣతͳ18" w ΠϯσοΫεՄೳ w 69 w ύϑΥʔϚϯε w Ωϟογϡ w ௨஌ w ͦͷଞ

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

۩ମతʹ͸ɺ

Slide 13

Slide 13 text

41"ϗεςΟϯάͷཁ݅ w 63-ϦμΠϨΫτ w )5514αϙʔτ w ΧελϜυϝΠϯ w ϓϦϨϯμϦϯά w ߴ଎ w ҆Ձ w ؆୯ w ৴པੑ

Slide 14

Slide 14 text

41"ͷ3PVUJOH IUUQTFYBNQMFDPN JOEFYIUNM JOEFYIUNM CVOEMFKT IUUQTFYBNQMFDPNQBHF 41"಺ͷϖʔδભҠʢ)JTUPSZ"1*ʣ IUUQTFYBNQMFDPNQBHF /PU'PVOE JOEFYIUNM CVOEMFKT ϦϩʔυPS63-΁௚઀ΞΫηε

Slide 15

Slide 15 text

41"ͷ3PVUJOH IUUQTFYBNQMFDPN JOEFYIUNM JOEFYIUNM CVOEMFKT IUUQTFYBNQMFDPNQBHF 41"಺ͷϖʔδભҠʢ)JTUPSZ"1*ʣ IUUQTFYBNQMFDPNQBHF JOEFYIUNM JOEFYIUNM CVOEMFKT ϦϩʔυPS63-΁௚઀ΞΫηε QBHF΁ͷΞΫηε͸JOEFYIUNMΛฦ͢

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

ࣗલ Ϩϯαό (JU)VC 1BHFT 'JSFCBTF /FUMJGZ 63-ϦμΠϨ Ϋτ ˓ ˚ º ˓ ˓ )5514α ϙʔτ ˓ ˚ ˓ ˓ ˓ ΧελϜυϝ Πϯ ˓ ˚ ˓ ˓ ˓ ϓϦϨϯμϦ ϯά ˓ ˚ º º ˓ ߴ଎ ˚ ˚ ˓ ˓ ˓ ҆Ձ º ˚ ˓ ˓ ˓ ؆୯ º ˚ ˓ ˓ ˓

Slide 19

Slide 19 text

/FUMJGZ IUUQTXXXOFUMJGZDPN

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

%FNP $ npm i -g @angular/cli $ ng new my-app $ cd my-app/ $ ng serve --open ΞϓϦͷ࡞੒

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

%FNP $ npm i -D netlify-cli@next $ npx netlify login $ ng build --prod $ npx netlify deploy -d dist/my-app /FUMJGZ΁ͷσϓϩΠ

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

"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 ... ... TSDJOEFYIUNM User-agent : * Disallow : TSDSPCPUTUYU

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

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