Amplify Consoleで作る、CloudFront、Lambda@Edgeを使ったマルチデプロイ環境とSPAのOGP対応/Amplify Console

Amplify Consoleで作る、CloudFront、Lambda@Edgeを使ったマルチデプロイ環境とSPAのOGP対応

内容: Amplify Consoleを使うとフロントのデプロイを簡単に行うことができます。Amplify Consoleではマルチデプロイ環境を すぐに設定できるため、Gitベースのチーム開発でのDXが大変向上しました。 ただ一方でSPAの場合にOGP画像への対応が必要で苦労をしました。 チームにより良いDXを提供しつつOGP問題を解決する方法をお伝えします。

Transcript

1. View Slide

2. "NQMJGZ$POTPMF͕ૉ੖Β͍͠
   

   View Slide

3. ਆ֞ɹ૱
   ෱ౡݝձ௡एদࢢ
   νʔϜ։ൃͱࣗಈԽ͕޷͖Ͱ͢
   ࣗݾ঺հ
   

   View Slide

4. ॴଐ
   νʔϜ։ൃͷଅਐ
   (JUͷϫʔΫϑϩʔʹ૊Έ߹ΘͤͨσϓϩΠ؀ڥվળ
   %9ʢ%FWFMPQF9QFSJFODFʣ
   

   View Slide

5. ෱ౡձ௡
   ஍Ҭ՝୊ͷղܾʢআઇɺ
   .BB4ɺ֐्ରࡦɺೝ஌঱ʜʣ
   ੵۃతͳΫϥ΢υɺ4BB4ར༻
   ౦ژޒ൓ా
   73 "3 .3
   ମݧܕίϯςϯπ
   σβΠχ΢Ϝ
   

   View Slide

6. 8IZɿਓɾ࢓ࣄɾ஍ҬͷՄೳੑΛΞοϓσʔτ͢Δ
   )PXɿςΫϊϩδʔºσβΠϯºಛఆྖҬ
   8IBUɿΞοϓσʔτͷ࢓૊Έͮ͘Γ
   ٕज़ελοΫ
   ϑϩϯτΤϯυʢ5ZQF4DSJQU7VFKT/VYUKT
   18"ʜʣ
   αʔόαΠυʢ5ZQF4DSJQU(P"84-BNCEB
   "QQ4ZOD (SBQI2-
   ʜʣ
   ϑϧϦϞʔτՄʢίϩφલ͔ΒϦϞʔτ͕σϑΥϧτʣ
   ෭ۀෳۀՄिۈ຿ՄֶੜࣾһՄ௕ظΠϯλʔϯ
   Մ
   ձ௡͸ञͱ৯΂෺͕͓͍͍͠Ͱ͢
   σβΠχ΢Ϝ
   

   View Slide

7. ෋ࢁɺձ௡ʹڌ఺
   ϑϧϦϞʔτ
   8PSE1SFTT -BSBWFMͷ։ൃ͕޷͖Ͱ͢
   ஍ݩاۀͷ%9ͷࢧԉΛ͍ͯ͠·͢
   'MPBUJOH8FFE
   

   View Slide

8. $MPVE'PSNBUJPOΛ࢖ͬͨ13
   Λग़͠·͘ΕΔϫʔΫϑϩʔ
   https://speakerdeck.com/yousan/cloudformaton-for-team
   

   View Slide

9. https://speakerdeck.com/yousan/continuous-deployment-for-wordpress-team-development
   

   View Slide

10. ࠓ೔͓఻͍͑ͨ͜͠ͱ
    "NQMJGZ$POTPMFͰͷσϓϩΠ͕ศར
    41"ͷ৔߹ʹ0(1ը૾ʹରԠͰ͖ͳ͍
    ͦͷղܾํ๏
    

    View Slide

11. ͘͢͝؆୯ʹσϓϩΠ؀ڥ͕༻ҙͰ͖Δ
    $PEF1JQFMJOF͢Βෆཁ
    (JUͱͷ࿈ܞ͕͙͢ʹͰ͖Δʢ/FUMJGZ
    7FSDFMతͳ΋ͷʣ
    +4ϑϨʔϜϫʔΫͷϏϧυɺσϓϩΠɺ
    ݕূʢ&&ςετʣ
    "NQMJGZ$POTPMF
    

    View Slide

12. View Slide

13. ϒϥϯν͝ͱͷσϓϩΠ͕Մೳʢ$%ʣ
    13͝ͱͷσϓϩΠ͕Մೳ
    υϝΠϯઃఆ΋؆୯
    "NQMJGZ$POTPMF
    

    View Slide

14. શൠઃఆʹ͋Δ
    #SBODIBVUPEFUFDUJPO
    ΛΦϯ
    ύλʔϯϚονͰͷࢦఆ΋
    Մೳ
    ෳ਺ϑϩϯτ͕ࠞࡏ͢Δ΋
    ͷϨϙͷ৔߹ʹ͸ϧʔϧΛ
    ೖΕ͓ͯ͘ͱྑ͍
    ϒϥϯν͝ͱσϓϩΠ
    

    View Slide

15. EFWFMPQ NBJOҎ֎ʹ΋ϒϥϯν͝ͱͷσϓϩΠ
    ։ൃऀͦΕͧΕ͕ಠཱͨ͠σϓϩΠ؀ڥΛ࣋ͭ͜ͱ͕Ͱ͖
    Δ
    13ͷ֬ೝʹศར
    ݸਓతʹ͸ผͷݺͼํΛྲྀߦΒ͍ͤͨʜ
    #SBODIFTHPUP%FQMPZ
    ϚϧνσϓϩΠʢϒϥϯνσϓϩΠʣ
    

    View Slide

16. View Slide

17. 13͝ͱʹσϓϩΠ
    13ຊจʹ63-ΛೖΕΔ͜ͱͰϨϏϡϫʔʹʮ͜ΕΛݟͯ
    ֬ೝͯ͠ͶʯΛߦ͏
    1SFWJFXT͔Β༗ޮԽ͠ɺ13ͷϚʔδઌϒϥϯνΛઃఆ
    13͝ͱσϓϩΠ
    

    View Slide

18. View Slide

19. ໰୊఺
    

    View Slide

20. ొ৔͔Βؒ΋ͳ͍͜ͱ΋͋Γෆ۩߹͕ଟ͍
    ϒϥϯν໊ʹεϥογϡ͕͋ΔͱมͳϦμΠϨΫτ͕ͳ
    ͞ΕΔ
    ϒϥϯν໊ʹʢϋογϡϚʔΫʣ͕͋ͬͨ৔߹ʹϏϧυ
    ͞Εͳ͍
    "NQMJGZ$POTPMFͰϒϥϯν໊ͷαχλΠζʢແ֐
    Խʣ͕ਐΉͱΑͦ͞͏
    ໰୊఺ʢϒϥϯν໊نଇʣ
    

    View Slide

21. ϒϥϯν໊ͷ໰୊
    ػೳϒϥϯνʢGFBUVSFʣͷΈൃੜ͢ΔͨΊνʔϜ΁ͷ
    ஫ҙשى
    ຊ൪Ͱ͸ى͖ͳ͍ʢ༧ఆʣ
    ໰୊఺ʢϒϥϯν໊نଇʣ
    

    View Slide

22. 41"ͷ৔߹ʹ0(1ը૾͕ਖ਼͘͠ग़ྗ͞Εͳ͍
    "NQMJGZ$POTPMFʹݶΒͣɺ4΍ଞͷϗεςΟϯάͰ΋
    ൃੜ
    4ͷ৔߹ʹ͸$MPVE'SPOUʴ-BNCEB!&EHFΛ૊Έ߹
    ΘͤΔ͜ͱͰճආ
    ໰୊఺ʢ0(1໰୊ʣ
    

    View Slide

23. "NQMJGZ$POTPMF͸಺෦తʹ͸4$MPVE'SPOUͷΑ͏
    ͳߏ੒
    $MPVE'SPOUͰ͸ͳ͍ͨΊ-BNCEB!&EHF͕࢖͑ͳ͍
    ໰୊఺ʢ0(1໰୊ʣ
    

    View Slide

24. View Slide

25. 5XJUUFS౳ͷ0(1ը૾͕ඞཁͳΫϥΠΞϯτΛ൑ఆ
    -BNCEB!&EHFͰϔουϨεϒϥ΢βΛىಈ
    +4Λղऍɺ)5.-ੜ੒
    5XJUUFS౳ʹฦ٫
    -BNCEB!&EHF
    

    View Slide

26. View Slide

27. -BNCEB!&EHF͕ஔ͚ͳ͍
    

    View Slide

28. "NQMJGZ$POTPMF͸$MPVE'SPOUͷΑ͏ͳػೳ͕͋Δ
    ͕ɺ-BNCEB!&EHF౳ͷઃఆ͸ෆՄ
    ͦͷͨΊ"NQMJGZͷखલʹ$MPVE'SPOUΛઃஔ͠ɺ
    -BNCEB!&EHFΛઃఆ
    "NQMJGZ$POTPMFͱ-BNCEB!&EHF
    

    View Slide

29. View Slide

30. ϒϥϯν͝ͱͷσϓϩΠ͕ߦΘΕΔͨΊɺશͯͷσϓϩΠ
    ʹ$MPVE'SPOUʹஔ͘ͱେม
    ຊ൪ܥͷΈ$MPVE'SPOU-BNCEB!&EHFΛஔ͘
    ϙΠϯτ
    

    View Slide

31. $MPVE'SPOUͷΩϟογϡ͕ޮ͖͗͢ΔͨΊ஫ҙ͕ඞཁ
    ؀ڥม਺@%*4"#-&@-@$"$)&USVFΛઃఆ
    $MPVE'SPOUXJUI8FC"QQMJDBUJPO'JSFXBMM
    IUUQTHJUIVCDPNBXTBNQMJGZBNQMJGZDPOTPMFJTTVFT
    ஫ҙ఺
    

    View Slide

32. ࠓ೔͓఻͔͑ͨͬͨ͜͠ͱ
    "NQMJGZ$POTPMFΛ࢖͏ͱ$%ָ͕͘͢͝
    0(1ʹ͸ຊ൪ܥͷΈ$MPVE'SPOU
    -BNCEB!&EHF
    

    View Slide

33. ͝ਗ਼ௌ
    ͋Γ͕ͱ͏͍͟͝·ͨ͠
    "NQMJGZ$POTPMFͰָ͍͠νʔϜ։ൃΛ͓ա͍ͩ͘͝͠͞
    

    View Slide