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

AWS 上で静的な Web サイトを公開しよう!ハンズオン / AWS-S3-Static-W...

ketancho
July 09, 2020

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 までお声がけください:)

ketancho

July 09, 2020
Tweet

More Decks by ketancho

Other Decks in Technology

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 § =9S3 ,#(," 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!] § LJRoute 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 * & (         ! #