|
| 1 | +--- |
| 2 | +layout: pattern |
| 3 | +title: Static Content Hosting |
| 4 | +folder: cloud-static-content-hosting |
| 5 | +permalink: /patterns/cloud-static-content-hosting/ |
| 6 | +categories: Cloud |
| 7 | +tags: |
| 8 | +- Cloud distributed |
| 9 | +--- |
| 10 | + |
| 11 | +## Intent |
| 12 | + |
| 13 | +Deploy static content to a cloud-based storage service that can deliver them directly to the client. |
| 14 | +This can reduce the need for potentially expensive compute instances. |
| 15 | + |
| 16 | +## Explanation |
| 17 | + |
| 18 | +Real world example |
| 19 | + |
| 20 | +> A global marketing web site with static content needs to be quickly deployed to start attracting |
| 21 | +> potential customers. To keep the hosting expenses and maintenance minimum, a cloud hosted storage |
| 22 | +> service along with content delivery network is used. |
| 23 | +
|
| 24 | +In plain words |
| 25 | + |
| 26 | +> Static Content Hosting pattern utilizes cloud native storage service to store the content and |
| 27 | +> 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. |
| 32 | +
|
| 33 | +Wikipedia says |
| 34 | + |
| 35 | +> A static web page (sometimes called a flat page or a stationary page) is a web page that is |
| 36 | +> delivered to the user's web browser exactly as stored, in contrast to dynamic web pages which are |
| 37 | +> generated by a web application. |
| 38 | +> |
| 39 | +> Static web pages are suitable for content that never or rarely needs to be updated, though modern |
| 40 | +> web template systems are changing this. Maintaining large numbers of static pages as files can be |
| 41 | +> impractical without automated tools, such as static site generators. |
| 42 | +
|
| 43 | +**Example** |
| 44 | + |
| 45 | + |
| 46 | + |
| 47 | +In this example we create a static web site using AWS S3 and utilize AWS Cloudfront to distribute |
| 48 | +the content globally. |
| 49 | + |
| 50 | +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/) |
| 51 | + |
| 52 | +2. Login to the [AWS Console](https://console.aws.amazon.com/console/home?nc2=h_ct&src=header-signin) |
| 53 | + |
| 54 | +3. Go to Identity and Access Management (IAM) service. |
| 55 | + |
| 56 | +4. Create IAM user that has only the necessary rights for this application. |
| 57 | + |
| 58 | +* Click `Users` |
| 59 | +* Click `Add user`. Choose `User name` as you wish and `Access type` should be `Programmatic access`. Click `Next: Permissions`. |
| 60 | +* Choose `Attach existing policies directly`. Select `AmazonS3FullAccess` and `CloudFrontFullAccess`. Click `Next: Tags`. |
| 61 | +* No tags are necessarily needed, so just click `Next: Review`. |
| 62 | +* Review the presented information and if all seems good click `Create user`. |
| 63 | +* You are presented with `Access key ID` and `Secret access key` which you will need to complete this example, so store them safely. |
| 64 | +* Click `Close`. |
| 65 | + |
| 66 | +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. |
| 67 | + |
| 68 | +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) |
| 69 | + |
| 70 | +7. Create AWS S3 bucket for the web site content. Note that the S3 bucket names must be globally unique. |
| 71 | + |
| 72 | +* 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) |
| 73 | +* For example `aws s3 mb s3://my-static-website-jh34jsjmg` |
| 74 | +* Verify that the bucket was successfully created with command `aws s3 ls` which list the existing buckets |
| 75 | + |
| 76 | +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). |
| 77 | + |
| 78 | +* E.g. `aws s3 website s3://my-static-website-jh34jsjmg --index-document index.html --error-document error.html` |
| 79 | + |
| 80 | +9. Upload content to the bucket. |
| 81 | + |
| 82 | +* First create the content, at least `index.html` and `error.html` documents. |
| 83 | + |
| 84 | +index.html |
| 85 | +```html |
| 86 | +<!doctype html> |
| 87 | +<head> |
| 88 | + <title>My Static Web Site</title> |
| 89 | +</head> |
| 90 | +<body> |
| 91 | + <h1>I'm the index.html</h1> |
| 92 | +</body> |
| 93 | +``` |
| 94 | + |
| 95 | +error.html |
| 96 | +```html |
| 97 | +<!doctype html> |
| 98 | +<head> |
| 99 | + <title>My Static Web Site</title> |
| 100 | +</head> |
| 101 | +<body> |
| 102 | + <h1>I'm the index.html</h1> |
| 103 | +</body> |
| 104 | +``` |
| 105 | + |
| 106 | +* 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) |
| 107 | +* E.g. `aws s3 cp index.html s3://my-static-website-jh34jsjmg` and `aws s3 cp error.html s3://my-static-website-jh34jsjmg` |
| 108 | + |
| 109 | +10. Next we need to set the bucket policy to allow read access. |
| 110 | + |
| 111 | +* Create `policy.json` with the following contents (note that you need to replace the bucket name with your own). |
| 112 | + |
| 113 | +```json |
| 114 | +{ |
| 115 | + "Version": "2012-10-17", |
| 116 | + "Statement": [ |
| 117 | + { |
| 118 | + "Sid": "PublicReadGetObject", |
| 119 | + "Effect": "Allow", |
| 120 | + "Principal": "*", |
| 121 | + "Action": "s3:GetObject", |
| 122 | + "Resource": "arn:aws:s3:::my-static-website-jh34jsjmg/*" |
| 123 | + } |
| 124 | + ] |
| 125 | +} |
| 126 | +``` |
| 127 | + |
| 128 | +* Set the bucket policy according to these [instructions](https://docs.aws.amazon.com/cli/latest/reference/s3api/put-bucket-policy.html) |
| 129 | +* E.g. `aws s3api put-bucket-policy --bucket my-static-website-jh34jsjmg --policy file://policy.json` |
| 130 | + |
| 131 | +11. Test the web site in your browser. |
| 132 | + |
| 133 | +* The web site URL format is `http://<bucket-name>.s3-website-<region-name>.amazonaws.com` |
| 134 | +* 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` |
| 135 | + |
| 136 | +12. Create CloudFormation distribution for the web site. |
| 137 | + |
| 138 | +* The syntax is described in [this reference](https://docs.aws.amazon.com/cli/latest/reference/cloudfront/create-distribution.html) |
| 139 | +* 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` |
| 140 | +* There's also JSON syntax e.g. `--distribution-config file://dist-config.json` to pass distribution configuration arguments in file |
| 141 | +* 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` |
| 142 | +* CloudFormation distribution deployment takes some time, but once it's completed your web site is served from data centers all around the globe! |
| 143 | + |
| 144 | +13. That's it! You have implemented a static web site with content distribution network serving it lightning fast all around the world. |
| 145 | + |
| 146 | +* To update the web site you need to update the objects in S3 bucket and invalidate the objects in the CloudFront distribution |
| 147 | +* To do it from AWS CLI see [this reference](https://docs.aws.amazon.com/cli/latest/reference/cloudfront/create-invalidation.html) |
| 148 | +* Some further development you might want to do is serve the content over https and add a domain name for your site |
| 149 | + |
| 150 | +## Applicability |
| 151 | + |
| 152 | +Use the Static Content Hosting pattern when you want to: |
| 153 | + |
| 154 | +* Minimize the hosting cost for websites and applications that contain some static resources. |
| 155 | +* Build a globally available web site with static content |
| 156 | +* Monitor the web site traffic, bandwidth usage, costs etc. |
| 157 | + |
| 158 | +## Typical Use Case |
| 159 | + |
| 160 | +* Web sites with global reach |
| 161 | +* Content produced by static web site generators |
| 162 | +* Web sites with no dynamic content requirements |
| 163 | + |
| 164 | +## Real world examples |
| 165 | + |
| 166 | +* [Java Design Patterns web site](https://java-design-patterns.com) |
| 167 | + |
| 168 | +## Credits |
| 169 | + |
| 170 | +* [Static Content Hosting pattern](https://docs.microsoft.com/en-us/azure/architecture/patterns/static-content-hosting) |
0 commit comments