diff --git a/cloud-static-content-hosting/README.md b/cloud-static-content-hosting/README.md new file mode 100644 index 000000000..0f1fb3207 --- /dev/null +++ b/cloud-static-content-hosting/README.md @@ -0,0 +1,170 @@ +--- +layout: pattern +title: Static Content Hosting +folder: cloud-static-content-hosting +permalink: /patterns/cloud-static-content-hosting/ +categories: Cloud +tags: +- Cloud distributed +--- + +## Intent + +Deploy static content to a cloud-based storage service that can deliver them directly to the client. +This can reduce the need for potentially expensive compute instances. + +## Explanation + +Real world example + +> A global marketing web site with static content needs to be quickly deployed to start attracting +> potential customers. To keep the hosting expenses and maintenance minimum, a cloud hosted storage +> service along with content delivery network is used. + +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 + +> A static web page (sometimes called a flat page or a stationary page) is a web page that is +> delivered to the user's web browser exactly as stored, in contrast to dynamic web pages which are +> generated by a web application. +> +> Static web pages are suitable for content that never or rarely needs to be updated, though modern +> 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. + +**Example** + +![alt text](./etc/static-content-hosting.png "Static Content Hosting") + +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 +```html + + + My Static Web Site + + +

I'm the index.html

+ +``` + +error.html +```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). + +```json +{ + "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` + +12. Create CloudFormation distribution for the web site. + +* The syntax is described in [this reference](https://docs.aws.amazon.com/cli/latest/reference/cloudfront/create-distribution.html) +* E.g. the easiest way is to call `aws cloudfront create-distribution --origin-domain-name my-static-website-jh34jsjmg.s3.amazonaws.com --default-root-object index.html` +* There's also JSON syntax e.g. `--distribution-config file://dist-config.json` to pass distribution configuration arguments in file +* The output of the call will show you the exact distribution settings including the generated CloudFront domain name you can use for testing e.g. `d2k3xwnaqa8nqx.cloudfront.net` +* CloudFormation distribution deployment takes some time, but once it's completed your web site is served from data centers all around the globe! + +13. That's it! You have implemented a static web site with content distribution network serving it lightning fast all around the world. + +* To update the web site you need to update the objects in S3 bucket and invalidate the objects in the CloudFront distribution +* To do it from AWS CLI see [this reference](https://docs.aws.amazon.com/cli/latest/reference/cloudfront/create-invalidation.html) +* Some further development you might want to do is serve the content over https and add a domain name for your site + +## Applicability + +Use the Static Content Hosting pattern when you want to: + +* Minimize the hosting cost for websites and applications that contain some static resources. +* Build a globally available web site with static content +* Monitor the web site traffic, bandwidth usage, costs etc. + +## Typical Use Case + +* Web sites with global reach +* Content produced by static web site generators +* Web sites with no dynamic content requirements + +## Real world examples + +* [Java Design Patterns web site](https://java-design-patterns.com) + +## Credits + +* [Static Content Hosting pattern](https://docs.microsoft.com/en-us/azure/architecture/patterns/static-content-hosting) diff --git a/cloud-static-content-hosting/etc/static-content-hosting.drawio b/cloud-static-content-hosting/etc/static-content-hosting.drawio new file mode 100644 index 000000000..50281e5e6 --- /dev/null +++ b/cloud-static-content-hosting/etc/static-content-hosting.drawio @@ -0,0 +1 @@ +7Vpbc9o6EP41PMZjW77AY0Kh56HttMOcIX3qCCxsNbLlyjKX/PqzMvING9rMQGE4mWQS72olrfbbXe8KBmgcbz8KnEafeUDYwDaD7QB9GNi2hRwL/inObs8ZIc0IBQ20UM2Y0Veimabm5jQgWUtQcs4kTdvMJU8SspQtHhaCb9piK87au6Y4JB3GbIlZlzungYz23KFr1vx/CA2jcmfL1CMxLoU1I4twwDcNFpoM0FhwLvdP8XZMmDJeaZf9vOmR0UoxQRL5JxOePj8vvN38XzEXc/KNzvDj65cH29PKyV15YhKAATTJhYx4yBPMJjX3aZmLNVGrWkDUIp84TzXzJ5Fyp8HEueTAimTM9CgoLHbPQJiGW5Lfm2MflPuYFbUrqS2Vz6UcPH+vlwCqnqSIcs7+eOpMR82mWRnPxZKcspWr/Q+LkMgTgsMKXQgLwmMCh4B5gjAs6bqtCNb+GVZyNYTwoFF8C6L+NRDVyJg3jox/VWS0lmvMcr1VFyrGILMpSDYRlWSW4uLgG0iubYvrpYiQZHvaft3j6gn2SCukU7M30plqUyc6G2le1Exy/uhCJhreloWc0iLaQrZvGe61beTflo089/ZMNLqhl5r5m5faGdNgWR/ddBYsC7vrgGO9Q3NCSes9bm62rrN60vzfBGfYRsewQKHflOuK+koEBQMQ8X+FrfO2DsiaMJ6CRQ7x5LlkNCHjqpVVBlvxRI4546KQQfAzVds/hQIHlNRjCU8U4ivKWJ94JgV/IQfCAc6iwj3URqoKoND4fsILwr7yjErKExhbcCl53BB4ZDRUA1I50RPW1BJ0USg33Ufprn2r8JaC1udVW+Is3R90RbdKj6eUU7XKZA2LZXoR6JtTNSHehuqKwcCbzDHyrNjrDPUL8ts1ntctgv1ht3gpeefvEjoO8zifAWOG4M8iX76Ar/+R41wa3B5ckLFX8MeGyugHX/wEbbKuU05M13bQcR8+A6qW20YVoS6sXk9N6lXV69mBRUeAHTOeB1MBoXHDuC6VkqtCyQ6cU3foIu+icLqeZ7T7DGQ5PX2GX4k1QR2hSyX3LqaWoS4jBcGSHI9XMIQ8MHpfem7aWbM6wB3iG9MgYMc6P8HzJKh85xxhZrfDzOrJnpbVE2flvPND4nQgsRUkOAhgvTwN9sCUuelukaku0Mu+3OxBpq8rvxwy3esv1AqWgIKt6SIvUtjdAuOWSaMMGf/qwHRvlJwqZEyaAJ9C2AAqdxwvnnMQL9bVYRl1YClfJ+aGLOBVr4KGJEFRNA9sjykkFtBWeOEeEwmWelRKqF8Px8pwe6FinYcEx6QaKOYYGXrQaz+0pwgSggP0TcExfoWmcpMZS6g47tZBDvKp0/OmQ30V5cX8o1y44R+NKg3SKY8xhURqasxOuUdgv6DtJsG/8DD5tW1Ue0ai/G16v7A69s3h2r0yUN1uN/e+Xxe86bogO9d9gdVyGN8x+xqRv3llYL3pY7PSQEWQHwmzM3+M1g4xt6cU9Z2eEKua+DdYDMj6KxXFWOOLKWjyHw== \ No newline at end of file diff --git a/cloud-static-content-hosting/etc/static-content-hosting.png b/cloud-static-content-hosting/etc/static-content-hosting.png new file mode 100644 index 000000000..6e0baa95e Binary files /dev/null and b/cloud-static-content-hosting/etc/static-content-hosting.png differ