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

天下一 静的サイトホスティング 武道会 / World Static Site Hosting Tournament

did0es
February 07, 2020

天下一 静的サイトホスティング 武道会 / World Static Site Hosting Tournament

did0es

February 07, 2020
Tweet

More Decks by did0es

Other Decks in Technology

Transcript

  1. ఱԼҰ੩తαΠτϗεςΟϯά෢ಓձ
    UBNCPVSJOFJOD.FFU6Q
    גࣜձࣾλϯόϦϯΤϯδχΞΞϧόΠτ
    ฏҪඔଠ TIVUB

    View full-size slide

  2. XIPBNJ
    ฏҪඔଠ TIVUB

    ΍ͬͯΔ8FCϑϩϯτΤϯυΤϯδχΞɾσβΠφʔɾେֶੜ
    EJEFTNF!EJEFT

    View full-size slide

  3. ͜͏͍͏͜ͱ΍ͬͯ·͢
    ɾ1PEDBTU։ൃ
    ɾ4MBDL#PU։ൃ
    ɾ8FCدΓͷҊ݅ॾʑʜ

    View full-size slide

  4. ࠓ೔࿩͢͜ͱ

    View full-size slide

  5. ͱ͋Δ-5ͷϦεϖΫτΛ΍͍͖ͬͯ·͢
    ͱ͋Δ-5
    IUUQTTQFBLFSEFDLDPNQDI@KQXPSMEEFWTFSWFSUPVSOBNFOU

    View full-size slide

  6. ఱԼҰ੩తαΠτϗεςΟϯά෢ಓձ

    View full-size slide

  7. ࢀՃࢿ֨
    ੩తαΠτΛϗεςΟϯάͰ͖Δ

    View full-size slide

  8. બखೖ৔

    View full-size slide

  9. /P
    (PPHMF"QQ&OHJOF

    View full-size slide

  10. /P
    'JSFCBTF)PTUJOH

    View full-size slide

  11. ิ଍
    "844
    (PPHMF$MPVE4UPSBHF
    ๻ͷ͓ࡒ෍͕ා͍ͷͰ༧બམͪͰ͢

    View full-size slide

  12. ධՁํ๏
    ɾ$*$%ͷ૊Έ΍͢͞
    ɾઃఆ͠΍͢͞
    ɾͦͷଞ
    ɾΘ͔Γ΍͢͞ ίϚϯυͷ௕͞౳
    ɾ(JU)VC͔ΒσϓϩΠ౳
    ͦΕͧΕ఺ຬ఺ͷܭ఺ຬ఺Ͱ͢
    ɾͦͷଞ

    View full-size slide

  13. ճઓઃఆ͠΍͢͞

    View full-size slide

  14. ̍ճઓ͸ϗεςΟϯάͷઃఆ͕
    ΍Γ΍͍͔͢Ͳ͏͔ͷൺֱͰ͢

    View full-size slide

  15. /VYUKT /FYUKT੡ͷαΠτΛ
    ϗεςΟϯάΛ͢ΔલఏͰ΍͖ͬͯ·͢

    View full-size slide

  16. ͦΕͧΕϗεςΟϯάͯ͠Έͯ
    Θ͔Γ΍͢͞ɺखܰ͞Λಘ఺ʹ͍͖ͯ͠·͢

    View full-size slide

  17. /P ;FJU/PX
    ɾ४උ
    ɾ(JU)VC౳ͰϩάΠϯ$-*Ͱ΋ϩάΠϯ
    $ yarn global add
    $ now
    άϩʔόϧԚછຊ౰ʹਃ͠༁ͳ͍

    View full-size slide

  18. /P ;FJU/PX
    ɾ/FYUKT
    ɾOPXͬͯଧ͚ͭͩʂര଎ʂ
    $ now
    ɾΑ͔ͬͨͶ

    View full-size slide

  19. /P ;FJU/PX
    ɾ/VYUKT
    ɾOPXKTPOʹઃఆ͕ඞཁ W

    ɾ͋ͱ͸OVYUΛJHOPSFOPXͬͯଧ͚ͭͩʂര଎ʂ

    View full-size slide

  20. /P ;FJU/PX
    ɾOPXͬͯଧ͚ͭͩͰ͍͍
    ɾจࣈͳͷͰ֮͑΍͍͢ɺ఺
    ɾ ΄΅
    θϩίϯϑΟά
    ɾͦ͏ͩͶɺ఺
    ɾ߹ܭ఺

    View full-size slide

  21. /P (PPHMF"QQ&OHJOF
    ɾ४උ
    ɾ($1ʹϩάΠϯ ొ࿥
    4%,Πϯετʔϧ
    ɾ4%,μ΢ϯϩʔυͯ͠JOTUBMMTIΛ࣮ߦ
    ɾΊΜͲ͍͚͘͞ͲؤுΔ

    View full-size slide

  22. /P (PPHMF"QQ&OHJOF
    ɾ/FYUKT
    ɾ("&ͰϓϩδΣΫτ࡞Δɺ*%ϝϞΔ
    $ gcloud init
    ɾJOJUɺϓϩδΣΫτ*%Λબ୒

    View full-size slide

  23. /P (PPHMF"QQ&OHJOF
    ɾ/FYUKT
    ɾBQQZBNMΛ࡞੒

    View full-size slide

  24. /P (PPHMF"QQ&OHJOF
    ɾ/FYUKT
    ɾOQNTDSJQUTͷOFYUTUBSUʹQ͚ͭΔ

    View full-size slide

  25. /P (PPHMF"QQ&OHJOF
    ɾ/FYUKT
    ɾσϓϩΠ
    $ yarn build && gcloud app deploy

    View full-size slide

  26. /P (PPHMF"QQ&OHJOF
    ɾ/VYUKT
    ɾ("&ͰϓϩδΣΫτ࡞Δɺ*%ϝϞΔ
    $ gcloud init
    ɾJOJUɺϓϩδΣΫτ*%Λબ୒

    View full-size slide

  27. /P (PPHMF"QQ&OHJOF
    ɾ/VYUKT
    ɾBQQZBNMΛ࡞੒

    View full-size slide

  28. /P (PPHMF"QQ&OHJOF
    ɾ/VYUKT
    ɾσϓϩΠ
    $ gcloud app deploy

    View full-size slide

  29. /P (PPHMF"QQ&OHJOF
    ɾHDMPVEೖΕΔͷ͕ͪΐͬͱΊΜͲ͍͘͞
    ɾೖΕΕ͹ޙ͸EPDT௨Γ
    ɾίϯϑΟά͸ॻ͔ͳ͍ͱ͍͚ͳ͍
    ɾ߹ܭ఺
    ɾͱΓ͋͑ͣ఺
    ɾ·͋ςϯϓϨʔτ͋Δ͍͔ͬ͠ʂ఺

    View full-size slide

  30. /P /FUMJGZ
    ɾ४උ
    ɾ(JU)VC౳ͰϩάΠϯ

    View full-size slide

  31. /P /FUMJGZ
    ɾ/FYUKT
    ɾOQNTDSJQUTʹFYQPSUΛ௥Ճ
    ɾOVYUHFOFSBUFΈ͍ͨͳίϚϯυͷ͸ͣ

    View full-size slide

  32. /P /FUMJGZ
    ɾ/FYUKT
    ɾޙ͸/FUMJGZଆͷઃఆΛ(6*Ͱϙνϙν

    View full-size slide

  33. /P /FUMJGZ
    ɾ/VYUKT
    ɾ/FUMJGZଆͷઃఆΛ(6*Ͱϙνϙν

    View full-size slide

  34. /P /FUMJGZ
    $ yarn global add netlify-cli
    ɾ༨ஊ
    ɾOPXΈ͍ͨʹ$-*Ͱ΋Ͱ͖Δɺ๻͸͠·ͤΜ͕ʜ
    $ netlify deploy -d dist # nuxt

    View full-size slide

  35. /P /FUMJGZ
    ɾ(6*͕Θ͔Γ΍͍͢ɺ$-*͸͠Γ·΁Μ
    ɾ͸͍ɺ఺
    ɾ ΄΅
    θϩίϯϑΟάOFUMJGZUPNMʹॻ࣌͋͘Δ
    ɾͦ͏ͩͶɺ఺
    ɾ߹ܭ఺

    View full-size slide

  36. /P 'JSFCBTF)PTUJOH
    ɾ४උ
    ɾ(PPHMFͰϩάΠϯ$-*Ͱ΋ϩάΠϯ
    $ yarn global add firebase-tools
    $ firebase login
    άϩʔόϧԚછ͜Μʹͪ͸ʂ

    View full-size slide

  37. /P 'JSFCBTF)PTUJOH
    ɾ/FYUKT
    ɾެࣜFYBNQMFΛ࢖͏ͷ͕Ұ൪खͬऔΓૣ͍
    $ yarn create next-app ―example with-firebase-hosting
    $ yarn predeploy && yarn deploy
    ɾσϓϩΠ
    ɾطଘͷ΋ͷΛվम͢Δͱ͖͸ؤுΓ͕ඞཁ

    View full-size slide

  38. /P 'JSFCBTF)PTUJOH
    ɾ/VYUKT
    $ firebase init
    ɾJOJU
    ɾEJTUΛࢦఆ
    $ yarn build && yarn generate
    ɾEJTUͳ͔ͬͨΒੜ੒

    View full-size slide

  39. /P 'JSFCBTF)PTUJOH
    ɾ/VYUKT
    $ firebase deploy
    ɾσϓϩΠ
    ɾOPXͷͪΐͬͱख͔͔ؒΔ൛

    View full-size slide

  40. /P 'JSFCBTF)PTUJOH
    ɾOPXΈ͍ͨɻͰ΋ίϚϯυ௕͍
    ɾ͏ʔΜɺ఺
    ɾ)PTUJOHͷΈͰ׬݁͠ʹ͍͘৔߹ଟ͍
    ɾ/FYUKTͰ'JSFCBTF'VODUJPOTཁΔ
    ɾ߹ܭ఺
    ɾ·͋ςϯϓϨʔτ͋Δ͍͔ͬ͠ʂ఺

    View full-size slide

  41. ճઓ$*$%ͷ૊Έ΍͢͞

    View full-size slide

  42. ̎ճઓ͸$*$%Λύοͱ૊ΊΔ͔Ͱ͢

    View full-size slide

  43. ίʔυ؅ཧʹԿ࢖͍ͬͯ·͔͢ʁ

    View full-size slide

  44. (JU)VCͰ͢ΑͶʁ

    View full-size slide

  45. (JU)VCܦ༝Ͱ$*$%Λ૊Ή
    ྲྀΕͰ͍͖·͢

    View full-size slide

  46. લ४උ
    ɾ࢖༻πʔϧ(JU)VC"DUJPOT
    ɾඞཁʹͳͬͨΒ࢖͏ɺZBNMॻ͘
    ɾ$*Ͱ΍Δ͜ͱ
    ɾͱΓ͋͑ͣࠓճ͸ςετΛ૸ΒͤΔ
    ɾ$%Ͱ΍Δ͜ͱ
    ɾNBTUFSʹQVTI$*ύεͰσϓϩΠ

    View full-size slide

  47. લ४උ
    ɾ(JU)VC"DUJPOTʹ͍ͭͯ
    ɾ6CVOUVMBUFTUίϯςφΛ࢖͏
    ɾ/PEFWYΛ࢖͏
    ɾ௕͍ͷͰ͜͜Β΁Μͷهड़͸ը૾͔Βল͍ͯ·͢

    View full-size slide

  48. ਐΊํ
    ɾ/FYUKT /VYUKTͰ$*$%૊Ή
    ɾઃఆͷΘ͔Γ΍͢͞ɺख͕ܰ͞ධՁର৅

    View full-size slide

  49. /P ;FJU/PX
    ɾ$*$%४උ
    ɾ"DUJPOT࢖ͬͯ΋͍͍͚Ͳҧ͏΍Γํ
    ɾΛ͠Α͏ͱ͚ͨ͠Ͳ$%૊Ίͯ΋$*૊Ίͳ͍
    ɾͳͷͰ"DUJPOT࢖͏
    ɾ/PXͰUPLFOऔಘ͠ͱ͘

    View full-size slide

  50. /P ;FJU/PX
    ɾ/VYUKT
    ɾ;FJU/PX%FQMPZNFOU͕Կނ͔׬ྃ͠ͳ͍
    ɾॿ͚ͯʢٽʣ

    View full-size slide

  51. /P ;FJU/PX
    ɾ/FYUKT
    ɾͱΓ͋͑ͣZBNMॻ͘ɺͰ͖Δɺಈ͘

    View full-size slide

  52. /P ;FJU/PX
    ɾ༨ஊ$%
    ɾEBTICPBSE͔Β(6*ϙνϙνઃఆՄ

    View full-size slide

  53. /P ;FJU/PX
    ɾ"DUJPOTࣗମ͸;FJU/PX%FQMPZNFOU͚ͩͰࡁΉ
    ɾ$%͸(6*ͰҰԠઃఆͰ͖Δ
    ɾؤுͬͯཉ͍͠ͷͰ఺͋͛Δ
    ɾ߹ܭ఺
    ɾͨͩɺ/VYUKT͕࠷৽ͷ%FQMPZNFOUͰ͸ಈ͔ͳ͍

    View full-size slide

  54. /P (PPHMF"QQ&OHJOF
    ɾ$*$%४උ
    ɾ"DUJPOT࢖͍·͢
    ɾ΍Β͔ͯ͠"DUJPOTͷఱҪ͕Έ͑ͨͷͰखॱ͚ͩʜ

    View full-size slide

  55. /P (PPHMF"QQ&OHJOF
    ɾ/VYUKT
    ɾͱΓ͋͑ͣZBNMॻ͘ɺಈ͍ͯ΄͍͠

    View full-size slide

  56. /P (PPHMF"QQ&OHJOF
    ɾ/FYUKT
    ɾͱΓ͋͑ͣZBNMॻ͘ɺಈ͍ͯ΄͍͠

    View full-size slide

  57. /P (PPHMF"QQ&OHJOF
    ɾ͏ʔΜɺ఺
    ɾHDMPVETFSWJDFLFZKTPOͷѻ͍͕೉͍͠
    ɾ߹ܭ఺

    View full-size slide

  58. /P /FUMJGZ
    ɾ$*$%४උ
    ɾ"DUJPOT࢖ͬͯ΋͍͍͚Ͳҧ͏΍Γํ

    View full-size slide

  59. /P /FUMJGZ
    ɾ$*
    ɾϏϧυίϚϯυʹZBSOUFTU௥Ճ

    View full-size slide

  60. /P /FUMJGZ
    ɾUFTUͪΌΜͱQBTTͨ͠ΒσϓϩΠͰ͖ͪΌ͏

    View full-size slide

  61. /P /FUMJGZ
    ɾ$%
    ɾ(6*ϙνϙν΍ͬͯऴΘΓ

    View full-size slide

  62. /P /FUMJGZ
    ɾָɺ఺͋͛ͪΌ͏
    ɾ͜ͷఔ౓ͳΒγϟοͬͯ(6*ૢ࡞Ͱ૊ΊΔ
    ɾ΍ͬͺΓ఺͠ͱ͘
    ɾMPHͱ͔ϫʔΫϑϩʔͷݟ΍͢͞౳࣮༻ੑՃຯ͢Δͱ
    ɾ߹ܭ఺

    View full-size slide

  63. /P 'JSFCBTF)PTUJOH
    ɾ$*$%४උ
    ɾ"DUJPOT࢖͍·͢

    View full-size slide

  64. /P 'JSFCBTF)PTUJOH
    ɾ/VYUKT
    ɾͱΓ͋͑ͣZBNMॻ͘ɺͰ͖Δɺಈ͘

    View full-size slide

  65. /P 'JSFCBTF)PTUJOH
    ɾ/FYUKT
    ɾͱΓ͋͑ͣZBNMॻ͘ɺͰ͖Δɺಈ͘

    View full-size slide

  66. /P 'JSFCBTF)PTUJOH
    ɾ"DUJPOT͸ϩʔΧϧͰ΍Δ͜ͱͦͷ··΍ΒͤΔ
    ɾͪΌΜͱಈ͍ͯҒ͍ɺ఺
    ɾ߹ܭ఺

    View full-size slide

  67. ճઓͦͷଞ

    View full-size slide

  68. ̏ճઓͰ͸๻͕͍͍Ͷ͏Ε͍͠Ͷ
    ͱࢥ͏ͱ͜ΖΛڍ͍͖͛ͯ·͢

    View full-size slide

  69. /P ;FJU/PX
    ɾͦΕ͸ͦ͏ɺ఺
    ɾ/FYUKTͱͱͯ΋૬ੑ͕͍͍Ͱ͢
    ɾׂͱ͏Ε͍͠ɺ఺
    ɾແྉϓϥϯͳΒແྉ
    ɾ߹ܭ఺

    View full-size slide

  70. /P (PPHMF"QQ&OHJOF
    ɾͦ͏ͩͶɺ఺
    ɾελϯμʔυͳΒແྉ࿮Ͱ৭ʑͰ͖Δ
    ɾ(PPHMF͞ΜͰ͢
    ɾ/PEF͕Wͱ͔Ͱ΋҆ఆ Β͍͠
    ࠓճ͸W

    ɾ߹ܭ఺

    View full-size slide

  71. /P /FUMJGZ
    ɾ'PSNT
    ɾ੩తαΠτͰ͓໰͍߹ΘͤϑΥʔϜͰ͖ͪΌ͏
    ɾ͍͢͝ɺ఺
    ɾ߹ܭ఺

    View full-size slide

  72. /P 'JSFCBTF)PTUJOH
    ɾैྔ՝ۚͳͷͰ·͋ɺ͏ΜɺΈ͍ͨͳײ͡
    ɾͳΜ͔/FUMJGZͱ͔ΑΓ΋ؾ࣋ͪૣ͍
    ɾͦ͏ͩͶɺ఺
    ɾ(PPHMF͞ΜͰ͢
    ɾ߹ܭ఺

    View full-size slide

  73. /FUMJGZ
    ;FJU/PX
    'JSFCBTF)PTUJOH
    (PPHMF"QQ&OHJOF




    View full-size slide

  74. ͱ͍͏͜ͱͰ

    View full-size slide

  75. ఱԼҰ੩తαΠτϗεςΟϯά෢ಓձ

    View full-size slide

  76. ༏উ͸/FUMJGZͰ͢

    View full-size slide

  77. ·ͱΊ
    ɾଞʹ͜Ε͍͍ͧʂ࢖͑ʂʂΈ͍ͨͳͷ͋ͬͨΒ
    ɹڭ͑ͯԼ͍͞ɺͱ͍͏͔ୈճ։࠵͍ͯͩ͘͠͞
    ɾࠓճͷ༏উ͸/FUMJGZʹܾఆ
    ɾ࢖͍΍͢͞ɺػೳͷଟ͞తʹྑ͔ͬͨ
    ɾ/FYUKT /VYUKTҎ֎Ͱ΋৭ʑࢼͯ͠ΈͯԼ͍͞

    View full-size slide