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 Slide

  2. XIPBNJ
    ฏҪඔଠ TIVUB

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

    View Slide

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

    View Slide

  4. ࠓ೔࿩͢͜ͱ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  8. બखೖ৔

    View Slide

  9. /P
    ;FJU/PX

    View Slide

  10. /P
    (PPHMF"QQ&OHJOF

    View Slide

  11. /P
    /FUMJGZ

    View Slide

  12. /P
    'JSFCBTF)PTUJOH

    View Slide

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

    View Slide

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

    View Slide

  15. ճઓઃఆ͠΍͢͞

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  45. ΈΜͳʙ

    View Slide

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

    View Slide

  47. (JU)VCͰ͢ΑͶʁ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  70. ճઓͦͷଞ

    View Slide

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

    View Slide

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

    View Slide

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

    ɾ߹ܭ఺

    View Slide

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

    View Slide

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

    View Slide

  76. ݁Ռൃද

    View Slide

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




    View Slide

  78. ͱ͍͏͜ͱͰ

    View Slide

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

    View Slide

  80. ༏উ͸/FUMJGZͰ͢

    View Slide

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

    View Slide

  82. ͓ΘΓ

    View Slide