sampathshivakumar/Deploy Static Website to AWS S3 with HTTPS using CloudFront.md

## Deploy Static Website to AWS S3 with HTTPS using CloudFront.md

      
    Raw
  

              Deploy Static Website to AWS S3 with HTTPS using CloudFront.md
            
          
    Deploying a Static Website to AWS S3 with HTTPS using CloudFront.


Prerequisites.


You should have a domain name already purchased to link with your Static Website.
Some Web content to display on your domain.

By the end of this post you will be able to:


Create an S3 bucket and Configure it for static website hosting.
Create a record in Route 53.
Create a CloudFront distribution and link it with your custom domain.
Create Certificates in AWS Certificate Manager.
Then Finally Link the CloudFront CDN, S3, Custom Domain and SSL Certificate via Route 53 To securly access your webpage.

I have created a simple index.html file.


index.html
<html>
<body>

<h1> "Be A Better Version of Yourself".</h1>

<img src="image/image.jpg" alt="Be-a-Better-Version-of-Yourself">

</body>
</html>

Your webpage will look like this.


Open Amazon S3 in your aws console and click on Create bucket.


Name your bucket it should be unique, so i am giving my domain name to s3 bucket.


In Block Public Access settings for this bucket, uncheck "Block all public access" and select the acknowledge at the end.


Rest of all settings are fine, click on create bucket at bottom.


Once done you should be able to see your bucket.


Now go inside the s3 bucket and upload the web content you have.


Select upload once your done.

Once files are uploaded you can see the status "Succeeded".

Now go to "Properties" tab and enable "Static website hosting" enter index.html in index document section and save changes.


Now go to "Permissions" tab and enter bucket policy and save chnages.


{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::learnwithsampath.world/*"
            ]
        }
    ]
} 


This policy will grants public read access to all objects within the "learnwithsampath.world" S3 bucket.
Now you can see bucket access as "public" previously it was "object can be public".


Now open index.html in s3 bucket.


You can see your website, but it is not your custome domain url.


Now we have to redirect the click to learnwithsampath.world to this s3 bucket.
I have already purchased a domain name "learnwithsampath.world" with godaddy Internet domain registrar.


Now go to Route 53 Dashboard and click on "create hosted zone".


Enter your Domain name, type "public hosted zone" is fine click "create hosted zone"


Once your done, you should see one hosted zone created in your Route53 console.


To manage godaddy domain name using AWS Route-53 we have to copy nameservers created in Route53 to godaddy.


Now you can manage your domain from Route-53 by creating records in it.
Now lets create a simple record in Route-53.


Select "Alias", Route traffic to "S3 website endpoint" and select location of your s3 bucket.


Now you can access your website on your domain learnwithsampath.world


But it's still "Not secure" its http://learnwithsampath.world/  not https://learnwithsampath.world/
Now lets make it using AWS Certificate Manager, go to AWS Certificate Manager console.

Note: You have to select the AWS North Virginia region(US-East-1). As CloudFront recognizes only this region as it's ACM certificates.


Select Certificate type "Request a public certificate" and click on next.


Provide your Domain names, select a Validation method rest all are fine click on request.


Once you click request, you need to add the given record in Route 53 by clicking on Create records in Route 53.


It will take some time for records to be updated for me it took few seconds.


After the certificate is issued, we can set up a CloudFront distribution. Open Amazon CloudFront in aws console and click on "Create a CloudFront distribution"


Select Origin domain from drop down.


In Viewer protocol policy select to Redirect HTTP to HTTPS


Add Custom SSL certificate.


Select Web Application Firewall (WAF). You can select as per your requirment.


Mention Default root object and Click on Create distribution .


**It will take few minutes.
you can check with Distribution domain name.


Now we can point our domain to Distribution domain name in Route 53.

Previously we have created A-record in Route 53 pointing to "S3 website endpoint" you delete/edit that A-record to point to Distribution domain name and save record.

Wait for some time for changes to apply
Now you can access the website securely over "https".


Even you time http://learnwithsampath.world/ also it will redirect to https://learnwithsampath.world/
We have successfully Deployed a Static Website to AWS S3 with HTTPS using CloudFront.

Thank you for reading this post! I hope you found it helpful. If you have any feedback or questions,Please connect with me on LinkedIn at https://www.linkedin.com/in/sampathsivakumar-boddeti-1666b810b/. Your feedback is valuable to me. Thank you!