Host a Static Website Using AWS S3 Bucket, CloudFront, And Route 53 With HTTPS Secure Protocol
Prerequisites
- You have your own domain name & DNS management access
- Aws account with access to Route 53, S3 bucket, CloudFront, Amazon Certificate Management (ACM).
- Running Static Website.
Basic Intro About AWS Services
S3-Bucket: Amazon Simple Storage Service (Amazon S3) is an object storage service that offers industry-leading scalability, data availability, security, and performance. This means customers of all sizes and industries can use it to store and protect any amount of data for a range of use cases, such as websites, mobile applications, backup and restore, archive, enterprise applications, IoT devices, and big data analytics. Amazon S3 provides easy-to-use management features so you can organize your data and configure finely-tuned access controls to meet your specific business, organizational, and compliance requirements.
Route 53: Amazon Route 53 is a highly available and scalable cloud Domain Name System (DNS) web service. It is designed to give developers and businesses an extremely reliable and cost-effective way to route end users to Internet applications by translating names like www.example.com into the numeric IP addresses like 192.0.2.1 that computers use to connect to each other. Amazon Route 53 is fully compliant with IPv6 as well.
CloudFront: Amazon CloudFront is a fast content delivery network (CDN) service that securely delivers data, videos, applications, and APIs to customers globally with low latency, high transfer speeds, all within a developer-friendly environment. CloudFront is integrated with AWS — both physical locations that are directly connected to the AWS global infrastructure, as well as other AWS services.
Amazon Certificate Manager(ACM): AWS Certificate Manager is a service that lets you easily provision, manage, and deploy public and private Secure Sockets Layer/Transport Layer Security (SSL/TLS) certificates for use with AWS services and your internal connected resources. SSL/TLS certificates are used to secure network communications and establish the identity of websites over the Internet as well as resources on private networks.
Let’s do without wasting time!!!
- Create S3 Bucket for our domain name
=> Login to AWS console using https://console.aws.amazon.com/
=> Click on the Service option at the top of the bar and search service s3 bucket in the search box and click on it.
=>Click on the create bucket button and you will get one pop up to create the bucket.
=>Enter Detail as mention below:
* Bucket name: yourdomainname.com
* Region: choose a region near to your customer. (I have chosen Asia Pacific (Mumbai)) and click on next.
* Keep Configure options as default don’t change it and click on next.
* Set permission section to uncheck Block all public access
* Review and click the Create bucket button.
=>repeat the same step and create the second bucket with bucket name as www.yourdomainname.com
=> Now you have two buckets available yourdomainname.com and www.yourdomainname.com.
2. Upload your static site file content in “yourdomainname.com ”s3 bucket
=> Click on the yourdomainname.com and enter to s3 bucket console GUI.
=> Using the upload & create a folder buttons upload your static site content.
3. Enable Static Web Hosting in s3 bucket for “yourdomainname.com”
=> Click on the properties option & click on the static website hosting box.
* Select the radio button with the name “Use this bucket to host a website”
* Index Document: enter your home page file name with path if it is not in the root directory(ex: index.html)
* Error document: Enter your error page path(ex: error.html)
* copy the “Endpoint” URL of the s3 bucket for yourdomainname.com
* Click on the Save button.
4. Enable Static Web Hosting in s3 bucket for www.yourdomainname.com and redirect the request to yourdomainname.com
=> Go to the www.yourdomainname.com s3 bucket console.
=> Click on the properties option & click on the static website hosting box.
* Select the radio button with the name “Redirect requests”
* Target bucket or domain: Enter “yourdomainname.com” as s3 bucket name
* protocol: http(For not secure web app) & https(for the secure app). we go with https to secure our site.
* Copy the “Endpoint” URL of the s3 bucket for www.yourdomainname.com
* Click on the Save button.
5. Create Certificate on AWS Certificate manager
=>Click on the Service option at the top of the bar and search service Certificate Manager in the search box and click on it
=> In the certificate manage console screen click on “Request certificate”.
=> Choose the radio button named “Request a public certificate” and click on button name “Request certificate” below of the screen
* Step 1: Add domain names :
Domain name: “yourdomainname.com” and click next
* Step 2: Select validation method
Select the DNS Validation method & click on next
* Step 3: Add tags
Add a tag if you want to manage the resource(optional) & click on the review button
* Step 4: Review
Review your certificate detail & click on the confirm and request button
* Step 5: Validation
=>Click on the DNS name on the screen and you will get the name and value. Create a CNAME record in the DNS configuration for each of the domains listed below with the value you will get. You must complete this step before AWS Certificate Manager (ACM) can issue your certificate, but you can skip this step for now by clicking Continue. To return to this step later, open the certificate request in the ACM Console.
=>If you are using AWS Route53 to manage your domain, ACM will automatically create the record for you automatically if you choose the DNS validation method for validation.
* Repeat the same step with the domain name as “*.yourdomainname.com”
6. Create CloudFront Distribution for “yourdomainname.com”
=>Click on the Service option at the top of the bar and search service CloudFront in the search box and click on it.
=>Click on the “Create Distribution” button.
Step 1: Select delivery method
* Click on the get started button of the Web delivery method
Step 2: Create distribution
* Origin Domain Name: Endpoint of the yourdomainname.com bucket(we have a copy of that endpoint URL in the “third step” and don’t choose the suggested name of s3 bucket by amazon)
* Viewer Protocol Policy: select the option Redirect HTTP to HTTPS.
* Alternate Domain Names(CNAMEs): yourdomainname.com
* SSL Certificate: choose custom SSL and in the box select certificate for “yourdomainname.com”.
“keep other things as default. If you want to more configure you can check the document and do it.”
*Click on the “Create Distribution” button.
* Copy the Cloudfront Distribution Domain name for yourdomainname.com in the general tab of the CloudFront console. (Format like XXXXX.cloudfront.net)
7. Create CloudFront Distribution for “www.yourdomainname.com” (***Make sure use www.yourdomainname.com certificate and s3 bucket endpoint***)
=>Click on the Service option at the top of the bar and search service CloudFront in the search box and click on it.
=>Click on the “Create Distribution” button.
Step 1: Select delivery method
* Click on the get started button of the Web delivery method.
Step 2: Create distribution
* Origin Domain Name: Endpoint of the “www.yourdomainname.com” bucket(we have a copy of that endpoint URL in the “fourth step” and don’t choose the suggested name of s3 bucket by amazon)
* Viewer Protocol Policy: select the option Redirect HTTP to HTTPS.
* Alternate Domain Names(CNAMEs): yourdomainname.com
* SSL Certificate: choose custom SSL and in the box select certificate for “*.yourdomainname.com”.
“keep other things as default. If you want to more configure you can check the document and do it.”
*Click on the “Create Distribution” button.
* Copy the Cloudfront Distribution Domain name for www.yourdomainname.com in the general tab of the CloudFront console. (Format like XXXXX.cloudfront.net)
8. Register Domain Route 53
=>Click on the Service option at the top of the bar and search service Route 53 in the search box and click on it.
=> Left side panel click on “Hosted zones”
=> Assume That you have created a hosted zone with the domain name as yourdomainname.com and click on it. if not then try to create it first.(https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/migrate-dns-domain-in-use.html)
=> Update the “A” record of “yourdomainname.com” with the value as CloudFront distribution domain name of the “yourdomainname.com”.(From the sixth step we have copy cloud front domain name like XXXXX.cloudfront.net).
=>Update the “A” record of “www.yourdomainname.com” with the value as CloudFront distribution domain name of the “www.yourdomainname.com”.(From the seventh step we have copy cloud front domain name like XXXXX.cloudfront.net).
9. Finally, Try in your favorite browser
=> Try to access your site in your browser with yourdomainname.com or www.yourdomainname.com For both URL is converted to Https request and secure your site. Sometimes it takes a minute to update so wait and try again.
Congratulation, you have successfully hosted a static website using Amazon S3 bucket, CloudFront, AWS Certificate Manager, and Route 53.
You can comment if you faced any issues and share if you liked it.
Connect with me on social media and other platforms:
- Portfolio: https://www.patelchirag.in/
- LinkedIn: https://www.linkedin.com/in/chiragpatel1499/
- Twitter: https://twitter.com/chiragpatel1499
- Facebook: https://www.facebook.com/chiragpatel1499
