How to Deploy a static Website to AWS S3 and front it with DNS/CloudFront

This step can be useful if you are doing the cloud resume challenge or have a React app or an HTML website to deploy. If it is a React project, remember to run npm build; after running, it is the file in the build folder you are deploying.

1. Get your Static website ready

   A static website consists of fixed content, typically HTML, CSS, and JavaScript files. If you don’t have a static website, go to GitHub for a simple HTML website or CodePen. I went to Codepen and I found a website. So I edited it and used it to create a resume for the cloud resume challenge.

2. Create an AWS account:

   AWS is a popular cloud computing platform that offers a wide range of services. I have multiple AWS accounts, and use AWS Organization to manage them. If you don’t have an AWS account, register here to get access to their free tier.

3. Registering a custom domain:

   Amazon Route 53 is a highly available and scalable domain name system that you use to register and manage domain names. You can learn more here about Route 53 and here to register a custom domain with Route 53. It was the same way I did mine, which is supercleanevents.com.

4. S3 static website hosting

   a. S3 is a cloud storage service that allows you to store and retrieve data over the Internet. It can also be used for website hosting. search for S3 in your console, ensure you have the right region selected, for me, I selected us-east-1, Northern Virginia.

   b. Click on Create bucket. I use my domain name as the name of the bucket, this will make linking easier. But if you don’t have one, you don’t need to worry; use any name. The naming rules are specified below. Now go below and uncheck the block public access. This is important because we are using it to create a static website that will be accessed by the public. But doing that doesn’t mean it will be granted access to the public automatically.

   

   c. Enable static website hosting: When you have the bucket created, click on the bucket properties tab, scroll down, and click on static website hosting and enable it. leave it at the host a static website, then go to the homepage entry, and write ‘index.html’. The index page is used as the entry point of the website by default when you browse the bucket. The error document is used when you try to retrieve an object from the bucket that does not exist.

   

   d. Upload object to bucket: go to the object tab, then click on upload. Click on Add folders to add all the folders. For me, I added my image folders, then clicked on add files to add my HTML, CSS documents, and ensured that you have an error and index.html page. So, click on upload, and that will add all that.

   e. Permit unauthenticated user to access bucket content: Now, after that, go to the properties tab, go all the way down, and click on the URL of the S3 bucket, you will see it is showing a 403 forbidden error, this is because access is denied. S3 is private by default, so just because the static website is enabled doesn’t mean it will just work. At the moment, we are accessing the bucket as an anonymous or unauthenticated user. Use the bucket policy to do this. Go to the permission tab, now click on edit, then add a bucket policy. Here is the bucket policy.

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

   Copy into there. And change the “examplebucket” to the name of your bucket. The effect ‘allows’ is that it grants access to any user to read the content of the bucket. Now, refresh the bucket URL and see that the website is showing.

   f. Create a record in Route 53 to point to the S3 bucket: go back to Route 53, where you registered your domain. Click on hosted zones. Then you will see your hosted zones. Then click on create record, ensure it is simple routing, then click on create record. For me, I left it empty. Then select the alias to S3 endpoint, and also select the right region, record is A. Then click on the website, and it works.

   

5. Setting up an SSL Certificate

   Search for the certificate manager on your console, ensure the right region is selected. We use this to issue an SSL certificate. Then do the following

   - Request a certificate

   - Request a public certificate

   - include your domain names, for me I included two names ‘supercleanevent.com’ and ‘www.superclenevent.com’

   -Then select DNS Validation

   So basically, the above will create a request for us, so now the request has been issued, you need to create a record in Route 53, click on the certificate, then click on create records in Route 53

6. Creating CloudFont Distribution

   CloudFront is a content delivery network (CDN) service that AWS provides. It provides SSL/TLS encryption. If you notice, the website isn’t secure. We are going to create a cloudfont distribution. Search for CloudFont on your console and click on Create Distribution. Use the bucket domain URL, which is listed in the properties tab of your S3 bucket down below. Copy it and paste it in the origin tab. for the views protocol policy. I used a redirect HTTP to HTTPS and added my CNAME, which is ‘www.superclean.com’ & ‘superclean.com’. Then added the custom SSL I set up, left the others at default, and clicked on create distribution

7. Hooking up our CloudFont Distribution to the Domain

   for us to do this, I went to my hosted zone in my domain in Route 53. Click on it and click on create record, the record type should be A. the value/route traffic is ‘Alias to Cloudfont distribution’ . and also select the cloud distribution created. then create records.

In Conclusion

you've successfully hosted your static website on AWS!