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

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

519ce44f1f63dfc6017d6853deee9cb5?s=47 Yousan_O
February 24, 2021

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問題を解決する方法をお伝えします。

519ce44f1f63dfc6017d6853deee9cb5?s=128

Yousan_O

February 24, 2021
Tweet

Transcript

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

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

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

  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

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

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

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

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

  18. None
  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໰୊ʣ

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

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

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

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

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

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

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