How to create and configure an AWS S3 bucket to host a static website and serve content through an AWS Cloudfront endpoint.
First, login using the AWS Console and the admin credentials you have created. Next, we will navigate to Storage and S3 as seen below.
Below we you will need to create a unique Bucket name.
Next, we will leave all ACL’s unchecked.
On the properties tab we will now setup our S3 bucket to be a static website host. We will also, designate the home of the default website as index.html.
When designating the index.html file we must create the file and make note of where index.html has been saved.
Scroll to bottom of the window and click on save changes.
Next, choose permissions and goto Update bucket policy, click edit.
copy & paste the bucket policy update below:
Now we will upload our our index.html file associated with the project.In this case it is index.html which was created and stored on my local PC using MS Word and saving in html format. The upload was successful as evidence at bottom of screen of upload date, time and size of file.
Next choose properties at top of window and scroll to bottom of page for the Static website hosting option. Click on url at bottom of page your index.html file will load.
You completed step one of our process of making a S3 bucket a static host. But if you notice this is not a secure method of access the S3 bucket as all of it contents are exposed to the public which is very scary.
We will now create a Cloudfront to securely serve our end users through a Content Delivery System, providing user access via AWS Edge locations. Navigate to the AWS Management Console and type Cloudfront in the search bar.
Click on Create Distribution.
Click on the Origin domain drop down and the listing will appear choose it.
Choose Yes use OAI (bucket can restrict access to only Cloudfront)
Next enter the name of the root URL (index.html)
Next you will access Cloudfront you will see the Distribution that you just created, choose it and copy & paste the url provided under Distribution Domain name in to your web browser.
Next to test the new secure Cloudfront website access click the Distribution domain name link at top left corner of the window.