Deploy static website with HTTPS — Using AWS — (S3, Route 53, CloudFront and Certificate Manager).
Hello World!
Today I will show you how to deploy a static website using AWS entirely.
Amazon S3 is an object storage service that happens to be perfect for hosting a static website, which is a website that uses mostly front-end code such as HTML 5, CSS and JavaScript.
First step would be to create an account and sign in to the AWS console. After you are able to login to your account. Click on Services then type S3 and click on S3.
Now click on “Create bucket”.
Please note that the name of the bucket must be universally unique and it must meet the naming guidelines. Make sure you select a region that is closest to you.
Click on “Create”.
Now that your bucket is up and ready, before you upload anything you need to make sure your bucket is turned into web hosting mode.
Go under “Properties” and select “Static website hosting”.
Enter your index document, in my case its “index.html”. I do not have an error document so I will leave it blank. Make sure to click on “Save” when done.
Open your bucket and upload your website content.
Your files should now appear in the bucket.
Under “Permissions” click on “Block public access” and click on “Edit”.
Uncheck “Block all public access” and click on “Save”. Making your bucket public will allow your S3 bucket to be accessible online.
The next thing you need to do is to add a policy. A policy also allows public access to your bucket.
Under “Permissions” select “Bucket Policy” and enter the bucket policy listed below.
{ “Version”: “2012–10–17”,
“Statement”: [
{ “Sid”: “PublicReadGetObject”, “Effect”: “Allow”,
“Principal”: “*”,
“Action”: “s3:GetObject”,
“Resource”: “arn:aws:s3:::[YOUR_BUCKET_NAME]/*” } ] }
Please note that you will need to replace YOUR_BUCKET_NAME with your actual bucket name.
Now that you have your policy up and running, your bucket is now public. You should now be able to see the “public” icon listed under “Permissions”.
Now that you have a static website up and running, you need a custom domain name that you can obtain through Amazon Route 53.
What is Amazon Route 53? Amazon Route 53 is a highly available and scalable cloud Domain Name System (DNS), in other words Amazon Route 53 makes its simple for you to manage traffic globally.
On the AWS home page, click on “Services” then type “Route 53” and click on Route 53.
Step 1 — Register a domain name.
Select a name and check for the availability of the domain name. If the name is available add it to your cart then click on “Continue”. It should take about 2 hours to receive a confirmation email from Amazon.
Navigate back to Route 53, click on the domain that you just registered. Click on “Hosted zones”.
Click on the domain name that you just registered.
Click on Create “Record Set”.
Now go to the AWS home page and search for “Certificate Manager”.
What is AWS Certificate Manager? Its a service that allows you to provision, manage and deploy public and private Secure Sockets Layer / Transport Layer Security (SSL / TLS)
Click on “Request a certificate”.
Select “Request a public certificate” and click on “Request a certificate”.
Add the domain name.
Select the validation method — “DNS Validation” or “Email Validation”.
Click “Next” then click on “Confirm and Request”.
Your validation status should now say “Pending Validation”. It should take about an hour to go from “Pending validation” to “Issued”.
Under the newly created domain, click on “Create record in Route 53”.
Now go the Home Page and search for “CloudFront”.
What is CloudFront and why do you need it?
CloudFront is a web service that speeds up the delivery of your website around the world. It allows users around the world to have access to your website with low latency.
Let’s create a Distribution in CloudFront
After you click on “Create Distribution”, open a new tab and go to S3.
Paste the URL in the Origin Domain Name.
Under “Default Cache Behavior Settings” — Select “Redirect HTTP to HTTPS”
Under “distribution settings”, enter your domain name under the Alternate Domain names. Do not include “HTTPS://”.
Click on “Create Distribution” at the bottom of the page. Now you are all done.
Please note that it will take about 1 hour for the status to go from “In Process” to “Deployed”.
Now we are going to go back to “Route 53" for one last time.
Go to the AWS home page, under “Services” enter “Route 53".
Under Hosted zone select your Domain name.
Click “Yes” under Alias and select the CloudFront distribution that you just created.
You are now set with your own website, hosted entirely using AWS. It’s now secured by the use of Certificate Manager and CloudFront. You can now update your website by updating your S3 bucket and creating an invalidation in CloudFront. I will write another blogpost on how to create a Cloudfront Invalidation with the use of a Lambda function.
