AWS 上で静的な Web サイトを公開しよう!ハンズオン / AWS-S3-Static-Web-Hosting-Hands-on
by
ketancho
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
© 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
Slide 2
Slide 2 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. =2;+ ❏ .- @9 / Kei Kanazawa ❏ &)% %$")#') ❏ <8 (17, 5?*65?!&A:' (AWS 3>40 ❏ 0AWS) AWS Lambda @ketancho
Slide 3
Slide 3 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § 60 ' Web AWS ,"%! § *# - +) § Next Action ( $& !
Slide 4
Slide 4 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § `pZPpA 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)9A418H3?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,
Slide 5
Slide 5 text
© 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
Slide 6
Slide 6 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Web !$# " %
Slide 7
Slide 7 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. Amazon EC2 ELB + EC2 * N AWS Elastic Beanstalk Amazon Lightsail
Slide 8
Slide 8 text
© 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/
Slide 9
Slide 9 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. #1 - Amazon S3 Web S3
Slide 10
Slide 10 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § : § : #1
Slide 11
Slide 11 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § s3 S3 #1
Slide 12
Slide 12 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § (/210 6) /2-.#' § (/2-”, S3 & '%” $!& + 4*35 "&& #1 "&&
Slide 13
Slide 13 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § S3 § #1
Slide 14
Slide 14 text
© 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 $))
Slide 15
Slide 15 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § @()*% #!)+% C5 § ()*% #!)+% $% 4 § -GE1A= Warning :GIBlock Public Access F; 32 86?. Option2 CloudFrontH/9B
Slide 16
Slide 16 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § $+ !",)* $+ § $+ - "" #1 "" (2 #&%'
Slide 17
Slide 17 text
© 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 "++
Slide 18
Slide 18 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § § Static website hosting #1
Slide 19
Slide 19 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § #1
Slide 20
Slide 20 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § index.html "# § $ !% § *( Web )'& #1
Slide 21
Slide 21 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § % '"( § #) § !&$ #1
Slide 22
Slide 22 text
© 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
Slide 23
Slide 23 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § "" JSON /% '# &) § S3 .*,$ 0 !! #1 !! (-+ 1!
Slide 24
Slide 24 text
© 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 !! ▼ &(
Slide 25
Slide 25 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § S3 #1
Slide 26
Slide 26 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § § ! src/#1/index.html " #1 ▼
Slide 27
Slide 27 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § '+ index.html *"$&)(,! § Web *"$ !# %% #1 %%
Slide 28
Slide 28 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § Static website hosting § #1
Slide 29
Slide 29 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § ('%"!+!!! § #1 &+ #* $) " #1
Slide 30
Slide 30 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. #2 - AWS Cloud9 & AWS CLI Web S3 AWS Cloud9
Slide 31
Slide 31 text
© 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/
Slide 32
Slide 32 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § !#" cloud9 Cloud9 #2
Slide 33
Slide 33 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § Create environment ! AWS Cloud9 %#"&$ Create environment #2
Slide 34
Slide 34 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § Name S3Hands-on Next step #2
Slide 35
Slide 35 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § Configure settings 02 AWS Cloud9 1*$$ 3≒ !4 '+( $$)./ § &- $$# ,% Next step " $$ #2 $$
Slide 36
Slide 36 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § !%&# $ OK(' Create environment § "!% 1-2 #2
Slide 37
Slide 37 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § AWS Cloud9 %"& , '$(+# ) !* #2
Slide 38
Slide 38 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § AWS Cloud9 Preferences #2
Slide 39
Slide 39 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § &'# Tab '# § Soft Tabs (-) 2!$ 2 "% #2
Slide 40
Slide 40 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § #" § $ ! #2
Slide 41
Slide 41 text
© 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
Slide 42
Slide 42 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § my-webpage index.html § my-webpage ! #2
Slide 43
Slide 43 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § File Upload Local Files... #2
Slide 44
Slide 44 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § Select files !& (+ index.html - § )* my-webpage % #' index.html ., OK index.html "$# / 0 !&& #2 !&&
Slide 45
Slide 45 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § index.html ,+0)(.+ !1 %% #2 %% Kanazawa /*-'!&
Kanazawa Kei
AWS Japan $"&#%&
Twitter:
@ketancho
https://github.com/ketancho/amazon-s3-static-website-hosting-hands- on/blob/master/src/%232-1-answer/index.html
Slide 46
Slide 46 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § #! "&$ %' § File > Save &$ OK ' #2
Slide 47
Slide 47 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § Preview > Preview File index.html § #2
Slide 48
Slide 48 text
© 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>BCE 28@? 7<4; >B %,, #2 %,,
Slide 49
Slide 49 text
© 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
Slide 50
Slide 50 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § CSS " § my-webpage > New Folder $! § css #2 + α& HTML + CSS #%'
Slide 51
Slide 51 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § CSS % § css ! > New File &# § " styles.css § styles.css ' #2 + α) HTML + CSS $(*
Slide 52
Slide 52 text
© 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
Slide 53
Slide 53 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § index.html 2,5 § Preview =2:71 ! § S3 !$&("6-1 HTML + CSS .0;=? #' ' Kanazawa 938*%(
Kanzawa Kei
>+)14? https://github.com/ketancho/amazon-s3-static-website-hosting-hands-on/blob/master/src/%232-2-answer/index.html
Slide 54
Slide 54 text
© 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 ▼
Slide 55
Slide 55 text
© 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
Kanzawa Kei
AWS Japan (206&15!6$*%+
Twitter:
@ketancho
Slide 56
Slide 56 text
© 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@ Enter "H aws s3 cp . s3://1(,-C --recursive § S3 &9.4%9- URL TS3 Static web hosting ?MQ SU" ?GONELBK! MQ 09*'9 09*'9 #2 + αT HTML + CSS @ARSU
Slide 57
Slide 57 text
© 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
Slide 58
Slide 58 text
© 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
Slide 59
Slide 59 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § Amazon Route 53 § - Route 53 Web
Slide 60
Slide 60 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § ! § - Route 53 Web "
Slide 61
Slide 61 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § A “” S3 &# § ' “"” - Route 53 $% Web !(
Slide 62
Slide 62 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § ! - Route 53 Web
Slide 63
Slide 63 text
© 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
Slide 64
Slide 64 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. AWS Hands-on for Beginners J -/ / - / - . / - . / or AWS ! +α
Slide 65
Slide 65 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. ELB + EC2 + RDS Next Action on S3 + Web API
Slide 66
Slide 66 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § : S3
Slide 67
Slide 67 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § * %# -*0(*%# )1 *,& § $ " * § * + !.'/ !.'/: S3 !.
Slide 68
Slide 68 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § § : S3
Slide 69
Slide 69 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § "&! Delete § *'+AWS Cloud9 &! # % > Go To Dashboard ($) ($): AWS Cloud9 (
Slide 70
Slide 70 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § Delete Delete : AWS Cloud9
Slide 71
Slide 71 text
© 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 ! !
Slide 72
Slide 72 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved. § 60 )! Web AWS .$'" § ,% / -+ § Next Action * &( ! #
Slide 73
Slide 73 text
© 2020, Amazon Web Services, Inc. or its Affiliates. All rights reserved.