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

2. "NQMJGZ
   $POTPMF͕ૉ੖Β͍͠
3. 
   ਆ֞ɹ૱
   
   ෱ౡݝձ௡एদࢢ
   
   νʔϜ։ൃͱࣗಈԽ͕޷͖Ͱ͢ ࣗݾ঺հ
4. ॴଐ 
   νʔϜ։ൃͷଅਐ
   
   (JUͷϫʔΫϑϩʔʹ૊Έ߹ΘͤͨσϓϩΠ؀ڥվળ
   
   %9ʢ%FWFMPQ
   F9QFSJFODFʣ
5. 
   ෱ౡձ௡
   
   ஍Ҭ՝୊ͷղܾʢআઇɺ .BB4ɺ֐्ରࡦɺೝ஌঱ʜʣ
   
   ੵۃతͳΫϥ΢υɺ4BB4ར༻
   
   ౦ژޒ൓ా
   
   73
   "3
   .3
   
   ମݧܕίϯςϯπ σβΠχ΢Ϝ
6. 
   8IZɿਓɾ࢓ࣄɾ஍ҬͷՄೳੑΛΞοϓσʔτ͢Δ
   
   )PXɿςΫϊϩδʔºσβΠϯºಛఆྖҬ
   
   8IBUɿΞοϓσʔτͷ࢓૊Έͮ͘Γ
   
   ٕज़ελοΫ
   
   ϑϩϯτΤϯυʢ5ZQF4DSJQU7VFKT/VYUKT 18"ʜʣ
   
   αʔόαΠυʢ5ZQF4DSJQU(P"84-BNCEB "QQ4ZOD (SBQI2- ʜʣ
   
   ϑϧϦϞʔτՄʢίϩφલ͔ΒϦϞʔτ͕σϑΥϧτʣ
   
   ෭ۀෳۀՄिۈ຿ՄֶੜࣾһՄ௕ظΠϯλʔϯ Մ
   
   
   ձ௡͸ञͱ৯΂෺͕͓͍͍͠Ͱ͢ σβΠχ΢Ϝ
7. 
   ෋ࢁɺձ௡ʹڌ఺
   
   ϑϧϦϞʔτ
   
   8PSE1SFTT
   -BSBWFMͷ։ൃ͕޷͖Ͱ͢
   
   ஍ݩاۀͷ%9ͷࢧԉΛ͍ͯ͠·͢ 'MPBUJOH8FFE
8. $MPVE'PSNBUJPOΛ࢖ͬͨ13 Λग़͠·͘ΕΔϫʔΫϑϩʔ
   https://speakerdeck.com/yousan/cloudformaton-for-team
9. https://speakerdeck.com/yousan/continuous-deployment-for-wordpress-team-development
10. ࠓ೔͓఻͍͑ͨ͜͠ͱ 
    "NQMJGZ
    $POTPMFͰͷσϓϩΠ͕ศར
    
    41"ͷ৔߹ʹ0(1ը૾ʹରԠͰ͖ͳ͍
    
    ͦͷղܾํ๏
    
11. 
    ͘͢͝؆୯ʹσϓϩΠ؀ڥ͕༻ҙͰ͖Δ
    
    $PEF1JQFMJOF͢Βෆཁ
    
    (JUͱͷ࿈ܞ͕͙͢ʹͰ͖Δʢ/FUMJGZ
    7FSDFMతͳ΋ͷʣ
    
    +4ϑϨʔϜϫʔΫͷϏϧυɺσϓϩΠɺ ݕূʢ&&ςετʣ "NQMJGZ
    $POTPMF
13. 
    ϒϥϯν͝ͱͷσϓϩΠ͕Մೳʢ$%ʣ
    
    13͝ͱͷσϓϩΠ͕Մೳ
    
    υϝΠϯઃఆ΋؆୯ "NQMJGZ
    $POTPMF
14. 
    શൠ
    
    ઃఆ
    ʹ͋Δ
    #SBODI
    BVUP
    EFUFDUJPO ΛΦϯ
    
    ύλʔϯϚονͰͷࢦఆ΋ Մೳ
    
    ෳ਺ϑϩϯτ͕ࠞࡏ͢Δ΋ ͷϨϙͷ৔߹ʹ͸ϧʔϧΛ ೖΕ͓ͯ͘ͱྑ͍ ϒϥϯν͝ͱσϓϩΠ
15. 
    EFWFMPQ
    NBJOҎ֎ʹ΋ϒϥϯν͝ͱͷσϓϩΠ
    
    ։ൃऀͦΕͧΕ͕ಠཱͨ͠σϓϩΠ؀ڥΛ࣋ͭ͜ͱ͕Ͱ͖ Δ
    
    13ͷ֬ೝʹศར
    
    ݸਓతʹ͸ผͷݺͼํΛྲྀߦΒ͍ͤͨʜ
    
    #SBODIFT
    HPUP
    %FQMPZ ϚϧνσϓϩΠʢϒϥϯνσϓϩΠʣ
17. 
    13͝ͱʹσϓϩΠ
    
    13ຊจʹ63-ΛೖΕΔ͜ͱͰϨϏϡϫʔʹʮ͜ΕΛݟͯ ֬ೝͯ͠ͶʯΛߦ͏
    
    1SFWJFXT͔Β༗ޮԽ͠ɺ13ͷϚʔδઌϒϥϯνΛઃఆ 13͝ͱσϓϩΠ
19. ໰୊఺
20. 
    ొ৔͔Βؒ΋ͳ͍͜ͱ΋͋Γෆ۩߹͕ଟ͍
    
    ϒϥϯν໊ʹεϥογϡ͕͋ΔͱมͳϦμΠϨΫτ͕ͳ ͞ΕΔ
    
    ϒϥϯν໊ʹʢϋογϡϚʔΫʣ͕͋ͬͨ৔߹ʹϏϧυ ͞Εͳ͍
    
    "NQMJGZ
    $POTPMFͰϒϥϯν໊ͷαχλΠζʢແ֐ Խʣ͕ਐΉͱΑͦ͞͏ ໰୊఺
    ʢϒϥϯν໊نଇʣ
21. 
    ϒϥϯν໊ͷ໰୊
    
    ػೳϒϥϯνʢGFBUVSFʣͷΈൃੜ͢ΔͨΊνʔϜ΁ͷ ஫ҙשى
    
    ຊ൪Ͱ͸ى͖ͳ͍ʢ༧ఆʣ ໰୊఺
    ʢϒϥϯν໊نଇʣ
22. 
    41"ͷ৔߹ʹ0(1ը૾͕ਖ਼͘͠ग़ྗ͞Εͳ͍
    
    "NQMJGZ
    $POTPMFʹݶΒͣɺ4΍ଞͷϗεςΟϯάͰ΋ ൃੜ
    
    4ͷ৔߹ʹ͸$MPVE'SPOUʴ-BNCEB!&EHFΛ૊Έ߹ ΘͤΔ͜ͱͰճආ ໰୊఺ʢ0(1໰୊ʣ
23. 
    "NQMJGZ$POTPMF͸಺෦తʹ͸4 $MPVE'SPOUͷΑ͏ ͳߏ੒
    
    $MPVE'SPOUͰ͸ͳ͍ͨΊ-BNCEB!&EHF͕࢖͑ͳ͍ ໰୊఺ʢ0(1໰୊ʣ
25. 
    5XJUUFS౳ͷ0(1ը૾͕ඞཁͳΫϥΠΞϯτΛ൑ఆ
    
    -BNCEB!&EHFͰϔουϨεϒϥ΢βΛىಈ
    
    +4Λղऍɺ)5.-ੜ੒
    
    5XJUUFS౳ʹฦ٫ -BNCEB!&EHF
27. -BNCEB!&EHF͕ஔ͚ͳ͍
28. 
    "NQMJGZ
    $POTPMF͸$MPVE'SPOUͷΑ͏ͳػೳ͕͋Δ ͕ɺ-BNCEB!&EHF౳ͷઃఆ͸ෆՄ
    
    ͦͷͨΊ"NQMJGZͷखલʹ$MPVE'SPOUΛઃஔ͠ɺ -BNCEB!&EHFΛઃఆ "NQMJGZ
    $POTPMFͱ-BNCEB!&EHF
30. 
    ϒϥϯν͝ͱͷσϓϩΠ͕ߦΘΕΔͨΊɺશͯͷσϓϩΠ ʹ$MPVE'SPOUʹஔ͘ͱେม
    
    ຊ൪ܥͷΈ$MPVE'SPOU
    
    -BNCEB!&EHF
    Λஔ͘ ϙΠϯτ
31. 
    $MPVE'SPOUͷΩϟογϡ͕ޮ͖͗͢ΔͨΊ஫ҙ͕ඞཁ
    
    ؀ڥม਺
    @%*4"#-&@-@$"$)&
    USVF
    Λઃఆ
    
    $MPVE'SPOU
    XJUI
    8FC
    "QQMJDBUJPO
    'JSFXBMM
    
    IUUQTHJUIVCDPNBXTBNQMJGZBNQMJGZDPOTPMFJTTVFT ஫ҙ఺
32. ࠓ೔͓఻͔͑ͨͬͨ͜͠ͱ 
    "NQMJGZ
    $POTPMFΛ࢖͏ͱ$%ָ͕͘͢͝
    
    0(1ʹ͸ຊ൪ܥͷΈ$MPVE'SPOU
    
    -BNCEB!&EHF
33. ͝ਗ਼ௌ
    ͋Γ͕ͱ͏͍͟͝·ͨ͠ "NQMJGZ
    $POTPMFͰָ͍͠νʔϜ։ൃΛ͓ա͍ͩ͘͝͠͞