AWS 上で静的な Web サイトを公開しよう！ハンズオン / AWS-S3-Static-Web-Hosting-Hands-on

S3 静的 Web サイトホスティングを使った、Developer 向けの AWS 入門ハンズオンです。
ソースコードはこちら → https://github.com/ketancho/aws-serverless-quick-start-hands-on

■ 2020/07/09 JAWS−UG 初心者支部＆群馬支部 #29
にて実施します。資料だけでもハンズオンはご実施いただけますが、登壇させていただくことも可能ですので @ketancho までお声がけください：）

Transcript

1. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. #% " &! $ %/-)3 Solutions Architect 61 + / Kei Kanazawa / @ketancho ;  AWS 4.,059: AWS ' 82 Web *79%% #jawsug_bgnr #jawsug_gunma ( 
   
   ! pdf https://bit.ly/s3-hosting-hands-on src https://bit.ly/s3-hosting-hands-on-src
2. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. =2;+ ❏ .- @9 / Kei Kanazawa ❏ &)% %$")#') ❏ <8 (17, 5?*65?!&A:' (AWS    3>4
    0  ❏ 0 AWS)  AWS Lambda @ketancho
3. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § 60  ' Web  AWS  ,"% !
    § *#  - +) § Next Action (
   
   $ &
   
     
       !
4. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. 
     
    § `pZPp A AWS MQOp^J/<>+H3? § `pZPp>'- AWS UqbYA&A+H IAM kqVq>oSNp6=2;5,  § `pZPp>B AWS AUqbYA )m\qYAJ 6C8* #J.H3?E+G)9A4 18H3?J+F07D42;5,* § " Am\qYA! E)(A>4 J/%,6C8 § Chrome or Firefox >h_qXjp^Tp\qn@MR[Y6=2;5, § eoSliATcq&gqY^@B)Np]p^$I@4 2;5,
5. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. '%  AWS  Web  . $) ,
    #1 - Amazon S3 +! Web  .  #2 - AWS Cloud9  Web  &#  - Amazon Route 53 *- Web  .    Next Action ( /"0
6. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Web !$#   " %  
7. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon EC2 ELB + EC2 * N AWS Elastic Beanstalk Amazon Lightsail
8. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Simple Storage Service (Amazon S3) § +$.99.999999999% ,- § '!)
     §  AWS  & § *" Web   % ! @see: https://speakerdeck.com/ketancho/serverless- quick-start-hands-on?slide=80 ,#-AWS Black Belt Seminar: AWS Cloud9 ( https://aws.amazon.com/jp/blogs/news/webinar-bb-cloud9-2018/
9. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved.   #1 - Amazon S3  Web  
    S3 
10. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § :   
     §  : 
      #1 
11. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. §   s3 
       S3    #1  
12. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § (/210  6) /2 -.#' § (/2 -
    ”,  S3 & '%” $!& +  4*3 5 "&& #1 "&&
13. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. §  S3 
      §     
      #1  
14. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § %!3 .1  >-: yyyymmdd-yourname-s3-hands-on?
    %!3 /+9(#*  7;
     ,5$))4  '<  “8:"&) Web !0=”  62 %!30= "&)  7; $)) #1 $))
15. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § @()*%  #!)+%   C5  § ()*%  #! )+%  $% 4  § -GE1A=  Warning <D $%     ',", #1 ',",
     AWS,&70 >:GIBlock Public Access F; 32 86?.  Option2 CloudFrontH/9B 
16. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § $+ !", )* $+ § $+  - "" #1 ""
    (2 #&%' 
17. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § 7
    .4 S3 # 8215
    -3%*,!  index.html $) /982   <;:6 Web  &+82 =;# '(,82 § .4#  # 0(    "++ #1 "++
18. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § 
         § Static website hosting    #1 
19. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. §
           #1  
20. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. §   index.html "# § $ !%  § *( Web    )'
    &    #1  
21. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § %
     '"(  §  #)  § !&$    #1 
22. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. §  JSON   xxx  
      #1   { "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": [ "s3:GetObject" ], "Resource": [ "arn:aws:s3:::xxxxxxxxx/*" ] } ] } https://github.com/ketancho/amazon-s3-static-website- hosting-hands-on/blob/master/src/%231/bucket- policy.json
23. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. §  "" JSON /%
    '# &)   §  S3  .* ,$ 0 !! #1 !! ( -+ 1!
24. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § !!#1 %$ index.html  " §  GitHub #  
    § https://github.com/ketancho/amazon-s3-static-website-hosting-hands-on § ↑  URL )' > Code > Download ZIP    !! #1 !! ▼ &(
25. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § 
    S3        #1  
26. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. §    §   !  src/#1/index.html " 
        #1  ▼  
27. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § '+  index.html * "$&)(,! § Web * 
    "$  !# %% #1 %%
28. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § Static website hosting   §  
        #1 
29. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § ('%"! +!!! §   #1 & + #* $)   
    "  #1 
30. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved.   #2 - AWS Cloud9  & AWS CLI  Web  
     S3  AWS Cloud9
31. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Cloud9 § #( :;
    /8
     #(5-=42. § 90)$ %!( ' "17 +3  &# '  >,6?AWS Black Belt Seminar: AWS Cloud9 *< https://aws.amazon.com/jp/blogs/news/webinar-bb-cloud9-2018/
32. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § !#" cloud9 
       Cloud9    #2  
33. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. §   Create environment 
    ! AWS Cloud9  %#"&$    Create environment     #2 
34. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § Name  S3Hands-on 
     Next step    #2 
35. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § Configure settings 02 AWS Cloud9 1*$$ 3≒ !4 '+(  $$).
    /  § &- $$ # ,% Next step " $$ #2 $$
36. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § !%& # $  OK('
     Create environment  § " !% 1-2   #2 
37. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § AWS Cloud9 %"&   ,
    '$(+#  ) !*   #2 
38. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § 
         AWS Cloud9   
    Preferences    #2  
39. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. §  &'#  
      Tab '#  § Soft Tabs  (-) 2!$
     2 "%    #2 
40. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § #
    "    § $   !   #2 
41. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § my-webpage (!1$)0 4: mkdir my-webpage § ↑ 4: my-webpage (!1$)0A5 cd my-webpage +2'#2 #2 +2'#2
    ?8%/2*%,-C&-3& >   76;<9=  ! ▼ @B."2)2D my-webpage  ▼ @B."2)1D my-webpage  
42. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § 
    my-webpage   index.html   § my-webpage   
    !    #2  
43. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § File  
    Upload Local Files...    #2 
44. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § Select files !&&#1 (+ index.html -  § )* my-webpage % #' index.html  .,  OK 
    index.html "$# / 0 !&& #2 !&&
45. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § index.html ,+ 0)(.+  !1 %% #2 %% <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Kanazawa /*-'!&</title> </head> <body> <h1>Kanazawa Kei</h1> <p>AWS Japan $"&#%& 
    </p> <p>Twitter: <a href="https://twitter.com/ketancho">@ketancho</a></p> </body> </html> https://github.com/ketancho/amazon-s3-static-website-hosting-hands- on/blob/master/src/%232-1-answer/index.html
46. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § #!  "&$
       %' §   File > Save   &$ OK  '  #2 
47. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. §   
    Preview > Preview File index.html § 
       #2 
48. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § 
    S3  index.html !'+-#   /6 AWS CLI 0 !'+-#   § -)$*.A13  Enter :   aws s3 cp index.html s3:// &!"5 § =9
    S3 ,#(," URL DS3  Static web hosting 2>B CE 28@?
    7<4; >B   %,, #2 %,,
49. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. §  '2+.3)&-$ Web 8QSHFPA 
    HTML  CSS ?@B!
    &(#)&-$7# J § !>CDR6"9<$K!O#'0*14 HTML  CSS ?@BL! JNQG$E% ! (I ) HTML  CSS  .. B=5 <  /4,'4 #2 + αT HTML + CSS :;MSU /4,'4
50. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § CSS "   § my-webpage   > New Folder $! §  css   #2 + α&
    HTML + CSS #%' 
51. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § CSS %  § css  ! > New File &# § " styles.css   § styles.css  '   #2 + α)
    HTML + CSS  $(* 
52. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § styles.css       #2 + α
     HTML + CSS    body { color: #333; font-family: Verdana, sans-serif; background-color: #f8f8f8; } h1 { font-weight: normal; font-size: 22px; } https://github.com/ketancho/amazon-s3-static-website-hosting-hands- on/blob/master/src/%232-2-answer/css/styles.css
53. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § index.html 2,5 § Preview  =2: 71   ! §  S3 !$&(" 6-1</  #' ' #2 + α> HTML + CSS .0;=? #' ' <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Kanazawa 938*%(</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <h1>Kanzawa Kei</h1> >+)
    14? https://github.com/ketancho/amazon-s3-static-website-hosting-hands-on/blob/master/src/%232-2-answer/index.html
54. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § my-webpage )#1&*/B5 img )#1&*/ 6  § img )#1&*/5 <?8 "(.24+   § ; OK  ,3'%3 #2 + αD HTML + CSS 9:@CE ,3'%3
    A=?8>#1  DL  zip -!$0 src/#1/ketancho.jpg 7   ▼ 
55. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § index.html ?7@  § “A8. "3=”  
    <. "3=   § Preview  DA8> C G! §  S3 !)/46,  D -5'#5 #2 + αE HTML + CSS :;BDF -5'#5 E 97@  F <body> <h1>Kanzawa Kei</h1> <img src=“img/A8. "3=" width="60" height="60"> <p>AWS Japan (206&15!6$*%+ </p> <p>Twitter: <a href="https://twitter.com/ketancho">@ketancho</a></p> </body> </html>
56. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. §  S3 2#%7$,38:.  
    2#%7J D ?F'3)69"=;I$,38:.   § +:5/7<P">@  Enter "H    aws s3 cp . s3:// 1(,-C --recursive § S3 &9.4%9- URL TS3  Static web hosting ?MQ  SU" ?GON
    ELBK ! MQ    09*'9 09*'9 #2 + αT HTML + CSS @ARSU
57. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § 
     "MS27(9 Web ,(1%>X!] § LJ
    Route 53 27(9%@E$?H
    27(9A =% S3 Web ,(14-/'9+)925(91 CK$G[% 08 F § ;RW27(9%@E$G[
    DYVOPN$  #
    39.*9&  TB$I
    *9069239.*9% U   J § AWS :ZQ Web ,(1%>X!\
    https://bit.ly/h4b-static-web 08 - Route 53 %<
    MS27(9 Web ,(1%>X 08
58. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon Route 53 § 
      (DNS)    AWS Black Belt Seminar: Amazon Route 53 Hosted Zone https://d1.awsstatic.com/webinars/jp/pdf/services/20191105_AWS _Blackbelt_Route53_Hosted_Zone_A.pdf
59. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § Amazon Route 53   §      - Route 53 
      Web   
60. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. §    
      ! §     - Route 53 
       Web  " 
61. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § A 
      “” 
    S3  &#  § ' “"”    - Route 53 
    $%  Web   !( 
62. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. §   !  - Route 53 
      Web   
63. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Option 1: HTML, CSS (/ 
    "# Web -98:  03% *6 + 51     J Option 2: 2) CDN  !      J 9&$&: Amazon CloudFront: Option 3: HTTP  
    ,. HTTPS 4'     J 9&$&: AWS Certificate Manager: %% +α Option +7
64. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Hands-on for Beginners 
         J -/ / - / - . / - . / or AWS   !  +α
65. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. ELB + EC2 + RDS
    
     Next Action     on S3 +   Web API 
66. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. §    
        : S3  
67. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § * %# -* 0( * %# ) 1 * ,&  § $ " 
    *   § *  +  !.'/ !.'/: S3  !.
68. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. §     
        §          : S3  
69. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. §  "&!  
     Delete  § *'+AWS Cloud9 &!  # %  > Go To Dashboard ($) ($): AWS Cloud9 (
70. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § Delete  
    Delete    : AWS Cloud9 
71. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. ('   § Amazon S3 )*
    0- Web    § AWS Cloud9 /,
    AWS CLI .+ AWS  &# "1  § Amazon Route 53 $*%  § AWS Hands-on for Beginners ! !
72. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § 60 )! Web  AWS  .$' "
     § ,%  / -+ § Next Action *
    
    & (
    
      
        ! #
73. © 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved.