Host a Static Site on AWS, using S3 and CloudFront

We can host a static website on Amazon Simple Storage Service (Amazon S3). On a static website, individual webpages include static content.

Aws-Staticweb1.jpg

Follow these steps to host a static website on Amazon S3 and to serve the website through CloudFront and Route 53

diag.jpeg

Register a Domain

To host your static site on AWS, the first thing you need to do is register a domain for it.

Go to the AWS Console and click on “Route 53”, under the “Networking” section. Then go to the Domain Registration section, click on the “Register Domain” button, type in the domain you want to register, select the TLD that you want to use, and click “Check”.

pic0

pic1

imafe.jpeg

Once you’ve found an available domain that you like, add it to your Route 53 shopping cart and click “Continue”. On the next page, you can select how many years you want to register the domain.

pic2.jpeg

When you’ve put in the contact information, click Continue. Review your information, check the “Terms and Conditions” check box, and click “Complete Purchase”.

Create and Configure S3 Bucket

S3 stands for “Simple Storage Service”, and it’s going to hold the HTML files that make up your static website. Conceptually, we’re going to deploy your website in three parts. S3 will hold the files that make up your website, CloudFront will serve those files out to the internet, and your domain will point to CloudFront so that people can find your website on the internet.

Go to the AWS Console and click on “S3”, under the “Storage & Content Delivery” section. Then click on the “Create Bucket” button.

pic3.jpg

S3 will ask you to pick a name for your bucket. This is important: you must name your bucket with the exact domain name that you want your site to be available at. For example, if you want your website to be available at http://www.my-website.com, and you own the my-website.com domain, then the bucket must be named http://www.my website.com precisely.

pic4.jpg

Click the “Create” button, and S3 will create your bucket! Next, you’ll need to modify some properties on the bucket to make it hold your website correctly. Click on the row of the bucket you just created, and the details pane will open on the right side of the page. Then click on the “Properties” section of the page to modify the bucket properties.

pic5.jpg

On the properties page, click on the “Static Website Hosting” section to tell S3 that you want to use this bucket to host a website. You’ll need to set names for your index document and your error document; the default values of “index.html” and “error.html” should do fine, so type them in, and then click the “Save” button.Write down the Endpoint.This is the Amazon S3-provided website endpoint for your bucket.

pic6.jpg

pic7.jpg

Next, you need to change the permissions on this bucket so that all the files in this bucket can be publicly accessible. To do this, we’re going to use something called a “bucket policy”, which tells S3 how you want it to treat the contents of the bucket.

After you save the static website hosting form, scroll back up to the top of the page and click on the “Permissions” tab, to the right of the “Properties” tab. Deselect the block all public access option in Block public access tab and click save.

pic8.jpg

pic9

Then, click on the big “Bucket Policy” button. Copy-paste this text into the bucket policy editor:

{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "AddPerm",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::www-mywebsite.com/*"
}
]
}

 

pic10.jpg

We now need to upload all the static files & assets and choose our main bucket for our site, the non-www version or the www version.Upload your files, making sure “index.html” is at the root of your bucket.

pic11.jpg

pic12

Type the following URL in the browser, replacing example-bucket with the name of your bucket and website-region with the name of the AWS Region where you deployed your bucket.

This URL returns a default index document that you configured for the website.

http://www-mywebsite.com.s3-website-us-west-2.amazonaws.com/

Make a CloudFront Distribution

CloudFront is a CDN that replicates your content across multiple regions. It handles load balancing, compression, caching, and everything you might want out of a CDN.

Just like S3 is organized into “buckets”, CloudFront is organized into “distributions”. You need to create a distribution for your website and point it at your S3 bucket, so that it gets the same contents as your S3 bucket. Once that’s up and running, we’ll go back to Route 53 and make the domain you bought point to the CloudFront distribution, so that people who type in your URL can get to your website.

Go to the AWS Console and click on “CloudFront”, under the “Storage & Content Delivery” section. Click on the “Create Distribution” button to get started, and select that you want a Web distribution.

pic13.jpg

pic14.jpg

Fill out the options, the first one is the “Origin Domain Name” — it’s the very first field in the form. Click on it, and Amazon will show a dropdown menu with your S3 buckets listed.Go back to your S3 bucket, find the website endpoint URL in the “Static Website Hosting” section of the properties, and paste that into the “Origin Default Name” field.

pic15.jpeg

It should look something like http://www.my-website.com.s3-website-us-east-1.amazonaws.com.

pic17.jpeg

pic18.jpeg

Next, scroll down to the “Distribution Settings” section. Just above it, there’s a field called “Compress Objects Automatically”: set that to “Yes”. Slightly below that, there’s a field called “Alternate Domain Names (CNAMEs)”. Put the domain of your website into the CNAMEs field: for example, “http://www.my-website.com“. This should match the name of the S3 bucket you’re using. Finally, scroll down to the bottom of the form, find the “Default Root Object” field, and type in “index.html”. Then click “Create Distribution”.

pic19.jpeg

pic20

AWS will start creating your CloudFront distribution, which takes a few minutes to complete.

pic21.jpeg

Note down your CloudFront endpoint somewhere because we’ll use it with Route53 in a sec.Test it by opening the endpoint you receive, your S3 static website should pop up. The endpoint should look like this:

13fb4knzujxq0b.cloudfront.net

Point Domain to CloudFront

Now that you have your website up and running on both S3 and CloudFront, the next step is configuring that domain you bought to point at it! To do this, we have to go back into Route 53, so go back to the AWS Console and click on Route 53. Then click on your domain, and click “Manage DNS”.

pic22.jpeg

pic23.jpeg

Now you need to add a new record set to point your domain to the CloudFront distribution. Click “Create Record Set”, then type “www” into the “Name” field and select “A” for the “Type” field. Just beneath that, there’s an “Alias” field with two options: select “Yes”, which will cause the “Alias Target” field to appear.

pic24.jpeg

When you click on the “Alias Target” field, Amazon will show another helpful dropdown menu, with entries for both S3 and CloudFront. Select the CloudFront distribution you just created, not the S3 bucket. Then click the “Create” button.

pic25.jpeg

Whenever you make changes to DNS, those changes don’t apply immediately. DNS uses a technique called caching to avoid overloading the system, and one of the downsides of caching is that it can take a little while for the system to notice changes. When you make a DNS change, it can take anywhere from 5 minutes to 1 hour for it to apply.Type your domain into your web browser, with the “www” in front, and see if your website shows up.

Your website works, but only if you include the “www” in front — if you try to visit your domain without the “www”, it will fail, which is very confusing for people trying to visit your site. A domain without a “www” is called a “bare domain”, and the correct way to fix this is with something called a “bare domain redirect”. With a bare domain redirect in place, if someone tries to visit your site without the “www”, they will be automatically rerouted to the “www” domain, so that the website works without the user having to do anything.

Make a new S3 bucket named after your domain without the www. If your domain is my-website.com, then the bucket should be named my-website.com. Click on this newly-created bucket to open the details pane, click on the “Properties” section, and then click on the “Static Website Hosting” section on the bucket properties page.

In the static website hosting form, select the “Redirect requests” option. For the “Target bucket or domain” field, put in the name of your other S3 bucket that does have the www in there. Then click the Save button to save your changes.

pic26.jpeg

Go back to the AWS Console and click on CloudFront. Create a new CloudFront distribution just like before, but this time, put the URL for your bare domain S3 bucket in the “Origin Domain Name” field.Copy-paste the website endpoint URL from the static website hosting form, instead of selecting the S3 bucket from the dropdown menu.You should also put the bare domain in the “Alternate Domain Names (CNAMEs)” field.

Finally, we need to set up this CloudFront distribution in DNS. Go back to the AWS Console and click on Route 53. Add a new record set for your domain, but this time, leave the name blank. This is how Route 53 knows the record should apply to the bare domain, instead of the “www”. Just as before, the record should be of type “A”, with “Alias” set to “Yes”. Select the CloudFront distribution that you just made for the bare domain, and the click “Create”.

SSL Certificate

Every website should use HTTPS for security.To do this, we’re going to use a new AWS service, called Certificate Manager, or ACM. HTTPS relies on something called a “certificate”, which used to be very difficult and expensive to get before ACM came along.

Go back to the AWS Console and click on “Certificate Manager”, under the “Security & Identity” section. Then click on the “Request a certificate” or “Get started” button, and you’ll be asked to put in the domain names that you want the certificate to apply to. Put in your domain name twice: once with the “www”, and once without it. You’ll need to click the “Add another name to this certificate” button to get a second line to show up.

image1.jpeg

Review your domains on the next screen, and click the “Confirm and request” button. When you do that, Certificate Manager will send an email to a few special email addresses on your domain, including the “admin” email address you set up. When you receive the email from Amazon Certificates, click on the approval link, and you’ll have your certificate!

image2.jpeg

Once you’ve got your certificate, you need to give it to CloudFront so it can use it. Go back to the AWS Console and click on CloudFront. You have two distributions, one for the bare domain and one for “www”: you’ll need to make the same change for both.

Pick one of your distributions and click on the distribution ID to get a detail view of the information for that distribution. Then click the “Edit” button at the top of the page to modify those details.

pic27.jpeg

You should see a field called “SSL Certificate”, which is set to “Default Cloudfront Certificate” by default. Switch that to “Custom SSL Certificate” instead, and select the certificate you just created from the dropdown menu. Then scroll down to the bottom of the page and click “Yes, Edit” to save your changes.

pic28.jpeg

Next, click on the “Behaviors” tab, select the only item in the list of behaviors by checking the checkbox at the far left, and then click the “Edit” button. Find the “Viewer Protocol Policy” field, and change it from “HTTP and HTTPS” to “Redirect HTTP to HTTPS”. Then scroll down to the bottom of the page and click “Yes, Edit” to save your changes.

pic29.jpeg

pic30

Don’t forget to make these edits to both CloudFront distributions!

You’re all done! You should now have a working static website, hosted on AWS, which uses HTTPS for all connections.

Reference

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Powered by WordPress.com.

Up ↑

%d bloggers like this: