S3 + CloudFrontで Static website hosting を体験!

S3 + CloudFrontで Static website hosting を体験!

「素人でも出来た有料ライブ配信サービス開発のお話」
というネタで考えていたのですが、テーマに合わせて変更しました!
ハンズオンというか、手順をわかる感じにしておりますので、ぜひやってみてください

#jawsug-niigata
https://jawsug-niigata.connpass.com/event/172603/

74cec195bfb6cb5165256d88cb7fcf0f?s=128

Kazuki Miura

May 09, 2020
Tweet

Transcript

  1. JAWS-UG ৽ׁ#8 2020/05/09 S3 + CloudFrontͰ Static website hosting Λମݧʂ

    @miu_crescent
  2. ࡾӜҰथ  ๺ւಓςϨϏ์ૹ +"846(ࡳຈ .FEJB+"84 +1@4USJQFTࡳຈ ήετϒϩΨʔ ࣗݾ঺հ

  3. ࡾӜҰथ  ๺ւಓςϨϏ์ૹ ळాग़਎ࡳຈࡏॅ ࣗݾ঺հ ॑฼͕৽ׁࡏॅ ಛٸʮ͍ͳ΄ʯ΍ ৽೔ຊւϑΣϦʔͰΑ͘༡ͼʹ

  4. ࡾӜҰथ  ๺ւಓςϨϏ์ૹ ωοτϫʔΫΘ͔Βͳ͍ ࣗݾ঺հ &$ 71$ εςʔτϑϧʁ ؤுͬͯษڧதͰ͢ αʔόΘ͔Βͳ͍

  5. αʔϏε࡞ͬͯΈͨ

  6. None
  7. 4$)&%6-& ݄ ݄ ݄ ࣾ಺ఏҊ ઃܭ ։ൃ ӡ༻ରԠ XFFLT ྩ࿨

    
  8. )5# %JSFDU$POOFDU .FEJB-JWF .FEJB1BDLBHF $MPVE'SPOU 71$ 6TFST &WFOUTJUF KTPO 9.-

    PDUFUTUSFBN $MPVE'SPOU 4 -BNCEB "1*(BUFXBZ &MFNFOUT 3PVUF "$. 4FDSFUT .BOBHFS 'JFMEQJDLVQWBO -PDL %3.4BB4 1BZNFOUT4BB4 *%4BB4 $*$% 3FQPTJUPSZ %FWFMPQFST 1SPKFDU .BOBHFNFOU 2"$POTVMUBOU .BOBHFS 4BGBSJ༻ "SDIJUFDUVSF
  9. ಉ͡࿩Λผͷࢹ఺Ͱ

  10. ʮAWSΛ࢝ΊΔʹ͋ͨͬͯͷ˓˓جૅʯ ࠓ೔ͷςʔϚ

  11. )5# %JSFDU$POOFDU .FEJB-JWF .FEJB1BDLBHF $MPVE'SPOU 71$ 6TFST &WFOUTJUF KTPO 9.-

    PDUFUTUSFBN $MPVE'SPOU 4 -BNCEB "1*(BUFXBZ &MFNFOUT 3PVUF "$. 4FDSFUT .BOBHFS 'JFMEQJDLVQWBO -PDL %3.4BB4 1BZNFOUT4BB4 *%4BB4 $*$% 3FQPTJUPSZ %FWFMPQFST 1SPKFDU .BOBHFNFOU 2"$POTVMUBOU .BOBHFS 4BGBSJ༻ "SDIJUFDUVSF αʔόϨεͰͷ Static Web Hosting
  12. 4ͷػೳ

  13. None
  14. ΍ͬͨ͜ͱͳ͍ਓ͸ͥͻ͝Ұॹʹ S3 Ͱ Static website hosting Λମݧʂ

  15. 4࡞ͬͯΈΑ͏ʂ ˞Tͷ໊લ͸ શBXT಺ͰϢχʔΫͷඞཁ͕͋Δ

  16. 4ͷػೳ Index.html

  17. ϓϩύςΟ4UBUJDXFCIPTUJOH

  18. ΤϯυϙΠϯτ͔ΒΞΫηε

  19. ΤϯυϙΠϯτ͔ΒΞΫηε Ͱ͖ͳ͍ʜ

  20. ΞΫηεݖݶϒϩοΫύϒϦοΫΞΫηε νΣοΫ֎͢ อଘ

  21. ΞΫηεݖݶϒϩοΫύϒϦοΫΞΫηε ֬ೝͱೖྗ Click !

  22. ΤϯυϙΠϯτ͔ΒΞΫηε

  23. ΤϯυϙΠϯτ͔ΒΞΫηε ͜ΕͰ΋ɺͰ͖ͳ͍ʜ

  24. ΞΫηεݖݶόέοτϙϦγʔ

  25. ΞΫηεݖݶόέοτϙϦγʔ ϙϦγʔδΣωϨʔλ࢖ͬͯΈΑ͏ ϙϦγʔδΣωϨʔλ

  26. ΞΫηεݖݶόέοτϙϦγʔ ͦͷલʹ"3/Λίϐ͓ͬͯ͜͏ arn:aws:s3:::jawsug-niigata-8

  27. ϙϦγʔδΣωϨʔλ ᶃ S3 Bucket Policy ᶄ * ᶅ GetObject ᶆ

    arn:aws:s3:::jawsug-niigata-8 ᶇ arn:aws:s3:::jawsug-niigata-8/* ᶈ Click!
  28. ϙϦγʔδΣωϨʔλ ᶃ S3 Bucket Policy ᶄ * ᶅ GetObject ᶆ

    arn:aws:s3:::jawsug-niigata-8 ᶇ arn:aws:s3:::jawsug-niigata-8/* ᶈ Click!
  29. ϙϦγʔδΣωϨʔλ ᶉ ௥Ճ͞Εͨ͜ͱΛ֬ೝ ᶊ Click!

  30. ϙϦγʔδΣωϨʔλ ᶋ Copy !

  31. 4ʹ໭ͬͯ ᶌ Paste ! Click !

  32. ͳΜ͔ύϒϦοΫͬͯग़ͨ

  33. ΤϯυϙΠϯτ͔ΒΞΫηε

  34. ΤϯυϙΠϯτ͔ΒΞΫηε ݟ͑ͨʂʂ

  35. 4 DMPVEGSPOU $%/

  36. $MPVE'SPOU΋෇ͯΈΑ͏ Click !

  37. ઃఆ બ୒͢Δ͚ͩ

  38. ઃఆ બ୒͢Δ͚ͩ Default Root Object index.html

  39. ઃఆ ͠͹͠଴ͭ ࠷ۙΊͬͪΌ͸΍͘ͳΓ·ͨ͠ ෼͘Β͍ˠ෼͘Β͍

  40. ઃఆ Ͱ͖ͨʂ

  41. ઃఆ ͳΜͪΌΒ.cloudfront.net ͰΞΫηεʂ $MPVE'SPOUܦ༝ͰΈ͑ͨʂ

  42. $MPVE'SPOUܦ༝ͷΈ 4ʹ௚઀ΞΫηε

  43. $MPVE'SPOUܦ༝ͷΈ CloudFront͔Β௥Ճ͞ΕͨϙϦγʔ

  44. ͜ͷࢿྉͷલ൒Ͱͨ͠ઃఆΛফ͢ ΞΫηεΛ$MPVE'SPOUܦ༝ͷΈʹ

  45. ઃఆมߋᶃόέοτϙϦγʔͷมߋ ͬͪ͜ͷϙϦγʔΛ࡟আ

  46. ͜Μͳײ͡ʹ ઃఆมߋᶃόέοτϙϦγʔͷมߋ

  47. ઃఆมߋᶄϒϩοΫύϒϦοΫΞΫηε Φϯ ʹ͢Δ

  48. ΤϯυϙΠϯτΛୟ͍ͯΈΔ ΞΫηε͢Δͱ ΞΫηεͰ͖ͳ͍

  49. ઃఆมߋᶅ4UBUJDXFCIPTUJOHΛΦϑ ແޮʹ͢Δ

  50. ઃఆมߋᶅ4UBUJDXFCIPTUJOHΛΦϑ

  51. $MPVE'SPOU͔ΒΞΫηεͰ͖Δ͔

  52. ͦͷલʹ

  53. $MPVE'SPOUͷΩϟογϡΛফ͢ *OWBMJEBUJPO Click

  54. $MPVE'SPOUͷΩϟογϡΛফ͢ *OWBMJEBUJPO /* Λೖྗ Click

  55. ͪΐͬͱ଴ͭ ̎ʙ̏෼ʁ

  56. Ωϟογϡ͕ফ͑·ͨ͠ʂ

  57. $MPVE'SPOU͔ΒΞΫηε ͳΜͪΌΒ.cloudfront.net ͰΞΫηεʂ 4ʹ͸ΞΫηεͰ͖ͳ͍ͷʹ $MPVE'SPOUܦ༝ͰΈ͑ͨʂ

  58. S3 bucket CloudFront Client Client ʷ ඇެ։ 4ʹ͸ΞΫηεͰ͖ͳ͍ͷʹ $MPVE'SPOUܦ༝ͰΈ͑ͨʂ

  59. ͥͻօ͞Μ΋΍ͬͯΈ͍ͯͩ͘͞ʂ

  60. ଞʹ΋͍ΖΜͳػೳΛ෇༩͢Δ͜ͱ͕Ͱ͖·͢

  61. *%1"44Ͱ੍ݶ͔͚Δ S3 bucket CloudFront Client Lambda@edge BASICೝূ

  62. υϝΠϯΛ͚ͭΒΕ·͢ S3 bucket CloudFront Client Route53

  63. 44-΋ S3 bucket CloudFront Client ACM httpsͰΞΫηε

  64. αʔόϨεͰ 8FCαΠτΛ࡞ͬͯΈ͍ͯͩ͘͞ʂ &$ΑΓ͍ͩͿ҆͘ͳΔ͸ͣ