Static Web Development Powered by HUGO with AWS

2019/10/26に開催されたDevelopers.IO 2019 in 福岡で「Static Web Development Powered by HUGO with AWS」というテーマで発表させていただきました。

Transcript

1. 4UBUJD
   8FC
   %FWFMPQNFOU
   
   1PXFSFE
   CZ
   )6(0
   XJUI
   "84 $9ࣄۀຊ෦
   NF
2. εϥΠυ͸ޙͰೖख͢Δ͜ͱ͕ग़དྷ·͢ͷͰ ൃදதͷ಺༰ΛϝϞ͢Δඞཁ͸͋Γ·ͤΜɻ ࣸਅࡱӨΛ͢Δ৔߹͸ ϑϥογϡɾγϟολʔԻ͕ग़ͳ͍Α͏ʹ͝഑ྀ͍ͩ͘͞ Attention
3. 
    ϙʔτϑΥϦΦ࣋ͬͯ·͔͢ʁ
4. 
    αΫοͱϙʔτϑΥϦΦ࡞Γ͍ͨͳ͋
5. 
    Ͱ΋͋Μ·Γ೉͍͜͠ͱ͸ͨ͘͠ͳ͍ ΦʔόʔΩϧ͗͢Δ
6. 
    ͜ΕɺΑͦ͞͏
7. 
   
8. ࠓ೔͸ͳ͢͜ͱ
    4UBUJDαΠτͱ͸ʁ͍ͭ࢖͑Δͷʁɹ
   )6(0࢖ͬͯΈͨɹ
   $*$%
   1JQFMJOF࡞ͬͯΈͨ
   
   
   ·ͱΊ
   ෼ ෼ ෼ ̏෼
9. 4UBUJD
   WT
   %ZOBNJD
   8FCTJUF
    ୭͕ݟͯ΋ಉ͡ 1SFCVJMU Ϣʔβʔผʹίϯςϯπ͕ม ΘΔ αʔόʔͰੜ੒͞ΕΔ 4UBUJD %ZOBNJD 4FSWFS Request $MJFOU #SPXTFS )5.- 4FSWFS Request $MJFOU #SPXTFS )5.- αʔόʔͰ ੜ੒͞ΕΔ
10. 4JOHMF
    1BHF
    "QQMJDBUJPO
     41" 4FSWFS Request $MJFOU #SPXTFS )5.- ΫϥΠΞϯταΠυͰ ϨϯμϦϯά +4 Ϣʔβʔผʹίϯςϯπ͕ม ΘΔ ϒϥ΢β্Ͱੜ੒͞ΕΔ
11. ൺֱ
     41" 4UBUJD %ZOBNJD ϖʔδؒͷϦϩʔυ͕ͳ͍
    ϦΞΫςΟϒ
    αʔόʔͰॲཧΛߦ͏ͨΊ ॏͨΊͷॲཧ͕Մೳ
    ͍͍ͩͨԿͰ΋Ͱ͖Δ ૣ͍
    ͍ܰ
    ͍҆
    ϝϯςφϯε͕༰қ
    4&0ରࡦ͠΍͍͢
    ҆શੑ͕͋Δఔ౓ิঈ͞ΕΔ
    SEOରࡦ͕ࠔ೉ ωοτϫʔΫ͕஗͍ͱ໰୊ ϖʔδͷಡΈࠐΈʹ͕͔͔࣌ؒ Δ ωοτϫʔΫ͕஗͍ͱ໰୊ αʔόʔαΠυͷϦιʔεΛͨ ͘͞Μ࢖͏ ηΩϡϦςΟରࡦ͕ඞਢ ಈతʹίϯςϯπΛੜ੒Ͱ͖ ͳ͍
    සൟʹߋ৽͢Δ8&#ϖʔδʹ ͸޲͍͍ͯͳ͍ 1SPT $POT
12. Ϣʔεέʔε
     ίʔϙϨʔταΠτ খن໛ͳEC ϙʔτϑΥϦΦ ϒϩά υΩϡϝϯτ 1Password Redislabs Spotify
13. ࠓ೔͸ͳ͢͜ͱ
     4UBUJDαΠτͱ͸ʁ͍ͭ࢖͑Δͷʁɹ
    )6(0࢖ͬͯΈͨɹ
    $*$%
    1JQFMJOF࡞ͬͯΈͨ
    
    
    ·ͱΊ
    ෼ ෼ ෼ ̏෼
14. ਪ͠
     GoͰͰ͖͍ͯΔ ੈք࠷଎ͰWebϖʔδΛੜ੒Ͱ͖Δ ςʔϚ͕ॆ࣮͍ͯ͠Δ
15. )PX
    UIJT
    XPSLT
     4UBUJD
    4JUF
    (FOFSBUPS $44 $POUFOUT 5IFNF )5.- +BWBTDSJQU Static Resources
16. ςʔϚ͕ॆ࣮
     ɾ͍͍ͩͨແྉ ɾ͸·Δ΋ͷ͕͋Ε͹ ΄΅ίʔσΟϯάͳ͠Ͱ ϖʔδ͕࡞ΕΔ https://themes.gohugo.io/ ɾΫΦϦςΟߴ͍
17. 
     ࢖ͬͯΈͨ
18. Πϯετʔϧ
    
19. ਽ܗΛ࡞੒
     $ hugo new site ʻϓϩδΣΫτ໊ʼ
20. ςʔϚΛ$MPOFˍઃఆ
     $ git clone <git url> $ cd hello-hugo/themes $ echo 'theme = "<Theme໊>"' >> config.toml
21. ϏϧυˍσϓϩΠ
     $ hugo && firebase deploy
22. ͜͜·Ͱ
     3෼ʂ
23. ઃఆϑΝΠϧʹ͍ͭͯ
     TOML ɾTom’s Obvious, Minimal Language JSON, YAML΋αϙʔτ͞Ε͍ͯΔ ɾHUGOͷ࢓༷ ɾςʔϚͰఆٛ͞Ε͍ͯΔ΋ͷ
24. ςʔϚΛΧελϚΠζ
     ΞΠίϯΛ௥Ճ͍ͨ͠ʂ
25. ςʔϚΛΧελϚΠζ
     themes/<theme>/layouts/partials/site-header.html
26. ςʔϚΛΧελϚΠζ
     /layouts/partials/site-header.html
27. ςʔϚΛΧελϚΠζ
    
28. ςʔϚΛΧελϚΠζ
    
29. ػೳ৭ʑ
     ɾi18n ɾShort Code ɾTaxonomies ɾmarkdownʹJSΛࠩ͠ࠐΊΔ
30. 4IPSU$PEF
     ɾi18n ɾShort Code ɾTaxonomies {{< form-contact action="https://example.com" >}} layouts/form-contact.html
31. 
     *஫ҙ఺
32. ؾΛ͚ͭΔ͜ͱ
     ςʔϚͷ࢓༷ʹࠨӈ͞ΕΔ ɾHUGOͰαϙʔτ͍ͯ͠Δػೳ΋ ςʔϚͰαϙʔτ͞Ε͍ͯͳ͍৔߹͕͋Δ
33. ਪ͠
    
34. ਪ͠
     ΄΅ຖ݄Ξϓσͯ͠Δ ຖि
35. ਪ͠
     ίϛϡχςΟ͕׆ൃ
36. ϗεςΟϯάΦϓγϣϯ
    
37. 
     vs.
38. (BUTCZKT
     Reactϕʔε Ϗϧυ͢Δ·Ͱ͸ಈత node.jsͰͰ͖͍ͯΔ GraphQLαϙʔτ
39. (BUTCZKT
     HUGOΑΓͰ͖Δ͜ͱ͕ଟ͍ ࣗ༝౓͕ߴ͍෼ֶशίετ͕͔͔Δ ϓϥάΠϯ΋ॆ࣮͍ͯ͠Δ
40. ࠓ೔͸ͳ͢͜ͱ
     4UBUJDαΠτͱ͸ʁ͍ͭ࢖͑Δͷʁɹ
    )6(0࢖ͬͯΈͨɹ
    $*$%
    1JQFMJOF࡞ͬͯΈͨ
    
    
    ·ͱΊ
    ෼ ෼ ෼ ̏෼
41. Ͱ΋ɾɾɾ
     ΋ͬͱָ͍ͨ͠ʙ ϏϧυɺςετɺσϓϩΠ·ͰඵͰ΍Γ͍ͨ
42. 
     CI؀ڥΛߏஙͯ͠Έͨ
43. Ϧιʔε
     Cloud Front CDN S3 Bucket Route53 AWS Cloud Formation CodePipeline CodeBuild CodeCommit
44. Ϧιʔε
     Cloud Front S3 Bucket Route53 AWS Cloud Formation CodePipeline CodeBuild CodeCommit ϦιʔεςϯϓϨʔτ ϏϧυɺςετɺσϓϩΠ ͳͲͷεΫϦϓτΛ࣮ߦ CodeCommitͱCodeBuild ͷCI؀ڥΛ࡞੒ ιʔείʔυϦϙδτϦ GithubͰ΋OK StaticϑΝΠϧͷσϓϩΠઌ Firebaseͱ͔Ͱ΋OK CDN DNSΛઃఆ
45. ߏ੒ਤ
     buildspec.yml
46. $MPVE
    'PSNBUJPO
    5FNQMBUF
     https://github.com/symphoniacloud/github-codepipeline/blob/master/pipeline.yaml ਽ܗɿ
47. 
     deploy $ git commit -m “͸͡ΊͯͷϙʔτϑΥϦΦ”
48. #MPH
     https://dev.classmethod.jp/etc/hugo-super-fast-static-webpage/ https://dev.classmethod.jp/non-programming/hugo-multilingual-mode/
49. Ұॹʹٕज़Ͱ͋ͦ΅͏ʂ
     We are hiring!