S3 + CloudFrontで Static website hosting を体験！

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

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

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. αʔϏε࡞ͬͯΈͨ
7. 4$)&%6-& ݄ ݄ ݄ ࣾ಺ఏҊ
   ઃܭ ։ൃ ӡ༻ରԠ 
   XFFLT ྩ࿨ 
8. )5# %JSFDU
   $POOFDU .FEJB-JWF .FEJB1BDLBHF $MPVE'SPOU 71$ 6TFST &WFOU
   TJUF KTPO 9.- PDUFUTUSFBN $MPVE'SPOU 4 -BNCEB "1*
   (BUFXBZ &MFNFOUT 3PVUF
    "$. 4FDSFUT
   .BOBHFS 'JFME
   QJDLVQ
   WBO -PDL %3.
   4BB4 1BZNFOUT
   4BB4 *%
   4BB4 $*$% 3FQPTJUPSZ %FWFMPQFST 1SPKFDU
   .BOBHFNFOU 2"
   
   $POTVMUBOU .BOBHFS 4BGBSJ༻ "SDIJUFDUVSF
9. ಉ͡࿩Λผͷࢹ఺Ͱ
10. ʮAWSΛ࢝ΊΔʹ͋ͨͬͯͷ˓˓جૅʯ ࠓ೔ͷςʔϚ
11. )5# %JSFDU
    $POOFDU .FEJB-JWF .FEJB1BDLBHF $MPVE'SPOU 71$ 6TFST &WFOU
    TJUF KTPO 9.- PDUFUTUSFBN $MPVE'SPOU 4 -BNCEB "1*
    (BUFXBZ &MFNFOUT 3PVUF
     "$. 4FDSFUT
    .BOBHFS 'JFME
    QJDLVQ
    WBO -PDL %3.
    4BB4 1BZNFOUT
    4BB4 *%
    4BB4 $*$% 3FQPTJUPSZ %FWFMPQFST 1SPKFDU
    .BOBHFNFOU 2"
    
    $POTVMUBOU .BOBHFS 4BGBSJ༻ "SDIJUFDUVSF αʔόϨεͰͷ Static Web Hosting
12. 4ͷػೳ
14. ΍ͬͨ͜ͱͳ͍ਓ͸ͥͻ͝Ұॹʹ S3 Ͱ Static website hosting Λମݧʂ
15. 4
    ࡞ͬͯΈΑ͏ʂ ˞Tͷ໊લ͸
    શBXT಺ͰϢχʔΫͷඞཁ͕͋Δ
16. 4ͷػೳ Index.html
17. ϓϩύςΟ
    
    4UBUJD
    XFC
    IPTUJOH
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. ઃఆมߋᶅ4UBUJD
    XFC
    IPTUJOH
    ΛΦϑ ແޮʹ͢Δ
50. ઃఆมߋᶅ4UBUJD
    XFC
    IPTUJOH
    ΛΦϑ
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αΠτΛ࡞ͬͯΈ͍ͯͩ͘͞ʂ &$ΑΓ͍ͩͿ҆͘ͳΔ͸ͣ