Creating a Static Website Using Amazon S3 and CloudFront
For this project, our cohort (Blue_Team) @ LUIT, we are given the following scenario: “Your team wants you to serve up a static page through S3 that is able to be cached at a Content Delivery Location for cost optimization.”
The objectives were:
1. Create an S3 bucket
2. Create an index.html document to upload to serve your end-users
3. Serve your end-users through a CloudFront endpoint
Additional tasks provide answers for the questions below in both this article and to our coaches:
1. Why would we use S3 to serve a static site?
2. How does CloudFront help with cost optimization?
3. How would we make sure our content that is cached with CloudFront is secure?
- Create an AWS S3 bucket
a. Sign into AWS Management Console
b. Access the Amazon S3 section
c. Click the button labeled Create bucket and name your bucket
d. Accept the default settings for the remaining options unless instructed otherwise
e. Click the create bucket button
f. If successfully created, you will receive this message for the newly created S3 bucket
g. Click the Upload button to select files on your computer and upload them into the bucket
h. Accept the default settings and proceed to the bottom of the page and click the upload button at the bottom of the screen to complete the process
i. If upload was successful, you will see this banner:
2. Create an index.html document to upload to serve your end-users
This can be accomplished by using a program that offers saving a file using the .html format.
3. Serve your end-users through a CloudFront endpoint
a. Search for and select CloudFront
b. Click the button to create a new distribution
c. Update the below fields in the Origin section:
d. Select the distribution created in step 3.b
Both the Origin domain (first field) and Name (third field) contain the name of your S3 bucket, the AWS Region and .amzonaws.com
On the S3 bucket access option, select Yes, update the bucket policy
In the Default cache behavior section under Viewer, select Redirect HTTP to HTTPS, then go to the bottom of the page and click the Create distribution button
e. After successfully creating the distribution, it may take several minutes for the process to complete and be fully deployed
f. Copy the distribution name shown in the Details section above
g. Paste that name in the address bar of your browser and add: /index.html at the end of the name and press enter
h. If all the above steps were followed correctly, you should be directed to the new static website that you just created using AWS’ S3 and CloudFront
Additional tasks provide answers for the questions below in both this article and to our coaches:
1. Why would we use S3 to serve a static site? The Amazon S3 (Simple storage service) is object storage service that offers industry-leading scalability, data availability, security, and performance. A customer’s business size and/or data can take advantage of AWS’ S3 object storage service. Please follow this link for additional information (Amazon S3). Additionally, maintaining and hosting a static website is simple, the user uploads files to a bucket which has been configured for web hosting.
2. How does CloudFront help with cost optimization? With Amazon CloudFront, you can use an AWS origin (Amazon S3, EC2, etc.) or your origin servers, which can be from different providers. When using an AWS origin, all data transferred from origin to edge locations will be free. There are other ways that CloudFront can help with cost optimization, such as price classes: Use all edge locations (best performance); Use only North America and Europe and/or North America, Europe, Asia, Middle East, and Africa.
3. How would we make sure our content that is cached with CloudFront is secure? CloudFront comes with native HTTPS support. You can configure it to deliver content via HTTPS from viewer to origin, end to end. (For additional info click here) CloudFront also provides several methods to help protect content from unwanted access, for example: geographically-based restrictions.
