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>4 0
❏ 0 AWS)
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.
§ `pZPp A AWS MQOp^J/<>+H3?
§ `pZPp>'- AWS UqbYA&A+H IAM kqVq>oSNp6=2;5,
§ `pZPp>B AWS A UqbYA )m\qYAJ
6C8*
#J .H3?E+G)9A4 18H3?J+F07D4 2;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*3 5
"& & #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.htmlSlide 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>B CE
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.htmlSlide 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"
?GON ELBK ! 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!]
§ LJ Route 53 27(9%@E$?H
27(9 A =% S3 Web ,(14-/'9+)925(91
CK$G[% 08 F
§ ;RW 27(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.