Skip to content

Commit 512bc08

Browse files
iluwatariluwatar
committed
iluwatar#455 S3 web site complete
1 parent 025d4a0 commit 512bc08

File tree

1 file changed

+95
-1
lines changed

1 file changed

+95
-1
lines changed

‎cloud-static-content-hosting/README.md

Lines changed: 95 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@ In plain words
2525

2626
> Static Content Hosting pattern utilizes cloud native storage service to store the content and
2727
> global content delivery network to cache it in multiple data centers around the world.
28+
>
29+
> On a static website, individual webpages include static content. They might also contain
30+
> client-side scripts such as Javascript. By contrast, a dynamic website relies on server-side
31+
> processing, including server-side scripts such as PHP, JSP, or ASP.NET.
2832
2933
Wikipedia says
3034

@@ -36,7 +40,97 @@ Wikipedia says
3640
> web template systems are changing this. Maintaining large numbers of static pages as files can be
3741
> impractical without automated tools, such as static site generators.
3842
39-
**Programmatic Example**
43+
**Example**
44+
45+
In this example we create a static web site using AWS S3 and utilize AWS Cloudfront to distribute
46+
the content globally.
47+
48+
1. First you will need an AWS account. You can create a free one here: [AWS Free Tier](https://aws.amazon.com/free/free-tier/)
49+
50+
2. Login to the [AWS Console](https://console.aws.amazon.com/console/home?nc2=h_ct&src=header-signin)
51+
52+
3. Go to Identity and Access Management (IAM) service.
53+
54+
4. Create IAM user that has only the necessary rights for this application.
55+
56+
* Click `Users`
57+
* Click `Add user`. Choose `User name` as you wish and `Access type` should be `Programmatic access`. Click `Next: Permissions`.
58+
* Choose `Attach existing policies directly`. Select `AmazonS3FullAccess` and `CloudFrontFullAccess`. Click `Next: Tags`.
59+
* No tags are necessarily needed, so just click `Next: Review`.
60+
* Review the presented information and if all seems good click `Create user`.
61+
* You are presented with `Access key ID` and `Secret access key` which you will need to complete this example, so store them safely.
62+
* Click `Close`.
63+
64+
5. [Install AWS Command Line Interface (AWS CLI)](https://docs.aws.amazon.com/cli/latest/userguide/install-cliv1.html) to gain programmic access to AWS cloud.
65+
66+
6. Configure AWS CLI with command `aws configure` as desribed in the [instructions](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-quickstart.html#cli-configure-quickstart-config)
67+
68+
7. Create AWS S3 bucket for the web site content. Note that the S3 bucket names must be globally unique.
69+
70+
* The syntax is `aws s3 mb <bucket name>` as described in the [instructions](https://docs.aws.amazon.com/cli/latest/userguide/cli-services-s3-commands.html#using-s3-commands-managing-buckets-creating)
71+
* For example `aws s3 mb s3://my-static-website-jh34jsjmg`
72+
* Verify that the bucket was successfully created with command `aws s3 ls` which list the existing buckets
73+
74+
8. Configure the bucket as a web site with command `aws s3 website` as described in the [instructions](https://docs.aws.amazon.com/cli/latest/reference/s3/website.html).
75+
76+
* E.g. `aws s3 website s3://my-static-website-jh34jsjmg --index-document index.html --error-document error.html`
77+
78+
9. Upload content to the bucket.
79+
80+
* First create the content, at least `index.html` and `error.html` documents.
81+
82+
index.html
83+
```
84+
<!doctype html>
85+
<head>
86+
<title>My Static Web Site</title>
87+
</head>
88+
<body>
89+
<h1>I'm the index.html</h1>
90+
</body>
91+
```
92+
93+
error.html
94+
```
95+
<!doctype html>
96+
<head>
97+
<title>My Static Web Site</title>
98+
</head>
99+
<body>
100+
<h1>I'm the index.html</h1>
101+
</body>
102+
```
103+
104+
* Upload the content to your bucket as described [here](https://docs.aws.amazon.com/cli/latest/userguide/cli-services-s3-commands.html#using-s3-commands-managing-objects-copy)
105+
* E.g. `aws s3 cp index.html s3://my-static-website-jh34jsjmg` and `aws s3 cp error.html s3://my-static-website-jh34jsjmg`
106+
107+
10. Next we need to set the bucket policy to allow read access.
108+
109+
* Create `policy.json` with the following contents (note that you need to replace the bucket name with your own).
110+
111+
```
112+
{
113+
"Version": "2012-10-17",
114+
"Statement": [
115+
{
116+
"Sid": "PublicReadGetObject",
117+
"Effect": "Allow",
118+
"Principal": "*",
119+
"Action": "s3:GetObject",
120+
"Resource": "arn:aws:s3:::my-static-website-jh34jsjmg/*"
121+
}
122+
]
123+
}
124+
```
125+
126+
* Set the bucket policy according to these [instructions](https://docs.aws.amazon.com/cli/latest/reference/s3api/put-bucket-policy.html)
127+
* E.g. `aws s3api put-bucket-policy --bucket my-static-website-jh34jsjmg --policy file://policy.json`
128+
129+
11. Test the web site in your browser.
130+
131+
* The web site URL format is `http://<bucket-name>.s3-website-<region-name>.amazonaws.com`
132+
* E.g. this web site was created in `eu-west-1` region with name `my-static-website-jh34jsjmg` so it can be accessed via url `http://my-static-website-jh34jsjmg.s3-website-eu-west-1.amazonaws.com`
133+
40134

41135
## Applicability
42136

0 commit comments

Comments
 (0)