How to host a static website with https using amazon s3

You might have your application running in Java, PHP, or Ruby but you might not want to convert and include your static content for a specific module into your application by varieties of reason. In my case, I have a sample landing page for my company’s product that has nothing to do with dynamic content which makes Amazon S3 the best place to host it to save my time.

Requirement:

  • You must have your static website ready
  • You must have an AWS account
  • Amazon services: Amazon S3, Amazon Cloudfront, Amazon Certificate Management (ACM)
  • A valid domain and DNS management access

Tip

  • Before you have your static website uploaded to with S3, make sure your static website works correctly. You can use Node package http-server from NPM to run your static website to check the functionality.

Amazon S3 setup

Go to amazon web service console here: https://aws.amazon.com/console/, then choose : Sign In to the Console button on the top right.

  • In effect chose Allow
  • In Principal enter * ( * = anything ).
  • In Action select s3:GetObject (Files uploaded to s3 are considered as objects, thus GetObject here means allow to read files )
  • In ARN (Amazon Resource Name ) enter your bucket name. In my case bmb-site/*. Every resource in Amazon has a unique ARN as an Identifiers for Amazon services to communicate. For S3 service, the ARN starts with arn:aws:s3:::[your_bucket_path_to_resources]. e.g: arn:aws:s3:::bmb-site/*
  • Click on Add Statement and then it will show a result summary of the policy.
  • If everything is ok then Click Generate Policy button and then it pops up the policy like this:
  • If you wanna handle the error document enter your HTML file. In my case, I just send it to index.html too.
  • Before you click on button Save, don’t forget to copy the Endpoint for your website. It is the URL you will use to access your website. In my example http://bmb-site.s3-website-ap-southeast-1.amazonaws.com

ojo

Testing the Website

Enter your website endpoint in the browser

Link to your Domain and secure it with a valid https cert

I will show you how to link this with domain registered with Godaddy, however, it can be any domain from any registrar.

  • Cloudfront will be used to serve the traffics accessed through your domain.

Generate SSL Cert for your domain

Go back again to the Services menu item on the top and type ACM

ojo

OJO

Create Distribution in Cloudfront

Now it is time to link the cert with S3. Go back to Services and search for Cloudfront and click on the result to go to the Cloudfront page.

  • Origin ID: it will be auto-filled after choosing the first step. No need to change.
  • Click on Redirect HTTP to HTTPS to have just one domain avoiding duplicate content with non-http and https.
  • Choose Custom SSL and select your Certs from the list generated by ACM. Be careful here, Cloudfront might not support certs generated by ACM in your region.
  • Enter index.html in Default Root Object
  • And last enter a name in the Comment.

Setting DNS to point to your website

Go to your domain manager and create a CNAME point to the Cloudfront URL from the previous step.

dig product1.mydomain.com

Prevent public/direct access to S3 (optional)

Now you have Cloudfront working, you might want to make sure your contents can only be served from your domain only. To do this we need to disable direct access to S3.

0j0

  • In the Origin Access Identity, select Use an Existing Identity
  • In the Grant Read Permission on Bucket, Select Yes

Conclusion

It is very easy to deploy a static website with S3 and with more advanced domain and SSL cert with the help of Amazon Cloudfront and Amazon ACM. Amazon S3 is very cheap and easy to set up without worries about the server infrastructure and after all, you win time and resource so your teams can focus more on building great things for your apps.

A Software engineer and an Agile practitioner. My daily tasks: nodejs, rubyonrails, TDD, SQL, Bash, AWS, Circleci Js and more.