DevOps SriLanka
Published in

DevOps SriLanka

AWS S3 static website hosting using SSL (ACM)

Before AWS introduced the static web hosting with S3 i was paying more than 5$ to 10$ for servers for host my personal portfolio which is a HTML static page. Then i got to know that we can host static pages in AWS using S3 and Route53 services. After that AWS Launched ACM “AWS Certificate Manager” which is a free services you can get a SSL certificate for your web site or the web application, however it supports only for ELB,CloudfrontAWS Elastic Beanstalk,Amazon API Gateway and AWS CloudFormation. I wanted to share my experience to others hope this will helpful for someone. I spent less than 1$ per month as my hosting cost.

Requesting the SSL Certificate from the AWS Certificate Manager

first you have to go to the AWS Certificate Manager and request a SSL certificate, like we request in other vendors we do not need any CSR for request the SSL certificate.

then we have to select a validation method from below

if you select the DNS validation you aws will provide the CNAME records to validate or if you select the Email validation method AWS will send an email to the domain owner. If you have successfully validated the domain names “Issued” text will appear under the status as below.

Creating the S3 Bucket and uploading the files.

First create a S3 Bucket as per to the below steps.

Bucket names are unique, type a name then select the region you want and go to the next section. in the “ Set properties” section no need to select anything right now and you can leave it and go to the “ Set permission” section.

Its really important to select the “Grant public read access to this bucket”. why we have selected this? buckets are always create as private access only unless we chose to go public. since this is a static website we have to give public read permission. then go to review and create the bucket.

If you have followed the steps, a label as “public” should appear on the bucket as below.

lets upload the html,css,js and image files to the bucket, its easy as just drag and drop the files.

again you have to select the “Grant public read access to this object(s)” for your web site files. this time we are granting permissions for the objects we are uploading.

Review and complete the upload. now lets do the magic.

go to the s3 buckets and select your bucket first, then click the “Properties” tab.

select the “Static website hosting”.

Please copy and keep the “Endpoint” url in a text file we need that for later. type the name of your index page html file and error page (404) page name.Once you click save and if all good you should able to access your site using the Endpoint URL.

CloudFront configurations

create a web distribution in the CloudFront section. let me point the important parameters and the fields.

DO NOT SELECT THE S3 BUCKET from the list, please past the S3 “Endpoint” URL instead in the Origin Domain Name field. select “Redirect HTTP to HTTPS” from the Viewer Protocol Policy.

Add your domain names in the alternate domain names filed and select the SSL certificate you have created in the ACM. once done please proceed and create the distribution.

Final DNS changes in the Route53

I am using Route53 as my DNS server if you are using any other dns server don’t worry, copy the domain name from the CloudFront distribution and create a CNAME record in your DNS server.

yourdomain.com — — -> (CNAME) — — -> d16XXXXXXXXX.cloudfront.net

Route53 i am using an alias record, will be writing a separate article about AWS Route53 and i will explain more about alias records.

Once all done you should able to access the site with SSL enabled as below.

yay!! we have done it :) . do let me know your success stories and same as if you have any issues configuring this.

All about collaborating to make software and software delivery better.

Recommended from Medium

CS373 Spring 2022: Audie Bethea

The digitization of innovation — and why it’s one of your company’s biggest risks

Blockers with “User Authentication” Module

Read !Book The Practice of System and Network Administration: Volume 1: DevOps and other Best…

Programming Languages — The Future

Linear Search in Python

Creating your own DataLoader in PyTorch for combining images and tabular data

No Free Lunch, Computer Vision — 1

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Arshad Zackeriya

Arshad Zackeriya

DevOps Engineer ☁, A Cloud Enthusiast and AWS Certified Solution Architect. AWS Fanboy!!

More from Medium

Docker and AWS ECR on macOS

AWS Lambda Use Cases

How to Create a Serverless Python Application Using AWS Cloud9

AWS CloudWatch ile Logları Kontrol Etme ( VPC Trafiği İzleme )