From 512bc08554c1301fad301d9888d2c64c800bcc58 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ilkka=20Sepp=C3=A4l=C3=A4?= Date: Sun, 14 Feb 2021 16:07:53 +0200 Subject: [PATCH] #455 S3 web site complete --- cloud-static-content-hosting/README.md | 96 +++++++++++++++++++++++++- 1 file changed, 95 insertions(+), 1 deletion(-) diff --git a/cloud-static-content-hosting/README.md b/cloud-static-content-hosting/README.md index 66ef9577a..baf009739 100644 --- a/cloud-static-content-hosting/README.md +++ b/cloud-static-content-hosting/README.md @@ -25,6 +25,10 @@ In plain words > Static Content Hosting pattern utilizes cloud native storage service to store the content and > global content delivery network to cache it in multiple data centers around the world. +> +> On a static website, individual webpages include static content. They might also contain +> client-side scripts such as Javascript. By contrast, a dynamic website relies on server-side +> processing, including server-side scripts such as PHP, JSP, or ASP.NET. Wikipedia says @@ -36,7 +40,97 @@ Wikipedia says > web template systems are changing this. Maintaining large numbers of static pages as files can be > impractical without automated tools, such as static site generators. -**Programmatic Example** +**Example** + +In this example we create a static web site using AWS S3 and utilize AWS Cloudfront to distribute +the content globally. + +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/) + +2. Login to the [AWS Console](https://console.aws.amazon.com/console/home?nc2=h_ct&src=header-signin) + +3. Go to Identity and Access Management (IAM) service. + +4. Create IAM user that has only the necessary rights for this application. + +* Click `Users` +* Click `Add user`. Choose `User name` as you wish and `Access type` should be `Programmatic access`. Click `Next: Permissions`. +* Choose `Attach existing policies directly`. Select `AmazonS3FullAccess` and `CloudFrontFullAccess`. Click `Next: Tags`. +* No tags are necessarily needed, so just click `Next: Review`. +* Review the presented information and if all seems good click `Create user`. +* You are presented with `Access key ID` and `Secret access key` which you will need to complete this example, so store them safely. +* Click `Close`. + +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. + +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) + +7. Create AWS S3 bucket for the web site content. Note that the S3 bucket names must be globally unique. + +* The syntax is `aws s3 mb ` as described in the [instructions](https://docs.aws.amazon.com/cli/latest/userguide/cli-services-s3-commands.html#using-s3-commands-managing-buckets-creating) +* For example `aws s3 mb s3://my-static-website-jh34jsjmg` +* Verify that the bucket was successfully created with command `aws s3 ls` which list the existing buckets + +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). + +* E.g. `aws s3 website s3://my-static-website-jh34jsjmg --index-document index.html --error-document error.html` + +9. Upload content to the bucket. + +* First create the content, at least `index.html` and `error.html` documents. + +index.html +``` + + + My Static Web Site + + +

I'm the index.html

+ +``` + +error.html +``` + + + My Static Web Site + + +

I'm the index.html

+ +``` + +* 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) +* E.g. `aws s3 cp index.html s3://my-static-website-jh34jsjmg` and `aws s3 cp error.html s3://my-static-website-jh34jsjmg` + +10. Next we need to set the bucket policy to allow read access. + +* Create `policy.json` with the following contents (note that you need to replace the bucket name with your own). + +``` +{ + "Version": "2012-10-17", + "Statement": [ + { + "Sid": "PublicReadGetObject", + "Effect": "Allow", + "Principal": "*", + "Action": "s3:GetObject", + "Resource": "arn:aws:s3:::my-static-website-jh34jsjmg/*" + } + ] +} +``` + +* Set the bucket policy according to these [instructions](https://docs.aws.amazon.com/cli/latest/reference/s3api/put-bucket-policy.html) +* E.g. `aws s3api put-bucket-policy --bucket my-static-website-jh34jsjmg --policy file://policy.json` + +11. Test the web site in your browser. + +* The web site URL format is `http://.s3-website-.amazonaws.com` +* 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` + ## Applicability