AWS Cloud Series: A Beginner's guide to hosting a static website on Amazon S3!
What it Amazon S3 & how is it useful ?
Amazon S3 (Simple Storage Service) is a scalable, high-speed, web-based cloud storage service offered by Amazon Web Services (AWS). It allows developers to store and retrieve any amount of data at any time, from anywhere on the web. S3 is highly durable and reliable, making it ideal for storing a wide range of data, from backups to large media files. Developers find it useful because it provides easy integration with other AWS services, automatic scaling, and cost-effective storage options, allowing them to focus on building applications without worrying about infrastructure management.
How are we using Amazon S3 ?
Like the title implies, we are going to be using the Amazon S3 service to host a static website. This will be done in such a way to make the website publicly available. This entire process takes less than hour but is not inclusive of the time it takes you to set up your AWS account.
Pre-requisites
No previous knowledge of AWS and its related services are required but it is recommended that for this and subsequent AWS projects you set up an AWS free-tier account and delete all of the AWS resources after completion of the project. This is so that you avoid the possibility of incurring any sort of charges on your AWS account that you will have to pay for. You would also be needing a sample static website which you will be hosting on the S3 service. This resource is arguably harder to come about unless you have experience as a developer or just have sample websites sitting on your laptop for some reason. For this, I highly recommend signing up to NextWork.org and taking their free DevOps course where they will essentially provide you with all of the resources you need to complete AWS projects. It is hands down one of the more convenient project-based learning platforms for aspiring AWS cloud/DevOps engineers.
Step 1: Create an S3 Bucket The first step in hosting a static website would be to create the an S3 bucket on the AWS Management Console.
a. On the search bar to the top left corner of your AWS console, type "S3".
b. On the options returned, select "S3 (Scalable Storage in the Cloud)".
c. Select "Create Bucket".
d. On the "Create bucket" screen, you can see some of the configurations we can create for our S3 bucket and I'll just run you through some of the most important ones you'll need to create your first S3 bucket.
i) The "General configuration" segment contains information such as the "AWS region" which is the AWS region closest to you which you preselect when creating your AWS account.
ii) There is also the "Bucket type" which is "General purpose" or "Directory - New"; you can select either depending on the nature of your project but right now, either of the two is fine.
iii) The bucket name is essentially the name you want to call your project. No two projects on AWS can share the same bucket name at the same point so the name selected has to be somewhat unique. You can view more information on bucket names in AWS by clicking the "see rules for bucket naming" link.
iv) Object Ownership basically refers to how you want the objects/contents within the bucket to be accessed and by whom. It is recommended that you disable ACLs. This means that the contents of your S3 bucket are owned and accessed only by your AWS account.
v) Next you will see the "Block Public Access settings for this bucket" segment. If you want your static website to be accessible to the rest of the internet, uncheck this box.
vi) The last configuration you want to be concerned with is the "Bucket Versioning" configuration. This setting allows you to have multiple versions of whatever content you have in your S3 bucket. This allows you to preserve, retrieve and restore every version of every object stored in your Amazon S3 bucket so it is recommended that you enable this feature.
Step 2: Uploading the contents of your S3 bucket When you click on the name of your bucket, you get a screen that allows you to upload files and folders for your static website to your S3 bucket by clicking on the "Upload" button. The "index.html" file along with all of the other CSS and JavaScript files for your static website are uploaded to the S3 bucket. Without all of the relevant files, the website would not be displayed correctly or function as intended.
Before we proceed further, I want to give a brief description of static web hosting on S3 is. It is essentially the storage of web files on a server that makes them accessible to users over the internet. To enable website hosting, you should do the following;
a. Configured the S3 bucket: Enable static website hosting for your S3 bucket in the AWS Management Console.
b. Set the index document to "index.html".
c. Once static website hosting is enabled, S3 produces a bucket endpoint URL. This URL is the web address where users can access your static website. It allows browsers to fetch and display your website files directly from the S3 bucket, effectively hosting your website. This url should be present at the bottom of the properties page within the "Static website hosting" segment.
Now initially when click this url, you should get a "403 forbidden" error message as indicated by the screenshot below.
This error is as a result of the "index.html" that we uploaded not being made public. You can resolve this error by ensuring that your objects are made publicly available via ACLs selecting the resources you wish to make public, clicking on the "Actions" dropdown and selecting "Make public using ACL" as demonstrated by the screenshot below.
The static website should be displayed if you refresh the url at this point.
If for any reason the "Make public using ACL" link is unresponsive, this is likely because ACLs were disabled when configuring your bucket. You can fix this by clicking on the "Permissions" tab, as shown in the screenshot below, scrolling down to "Object Ownership" and clicking the "Edit" button. On the "Edit Object Ownership" screen, click on "ACLs enabled", click on "Save changes"; refresh the url and that should resolve the issue.
This error is as a result of the "index.html" that we uploaded not being made public. We can rectify navigating back to the objects tab and selecting the index.html file as well as the other folder uploaded before clicking the "Actions" dropdown button and selecting this by making the index.html public
And that's it; you have now successfully hosted a static website on the Amazon S3 service.
Key Takeaways
Static website hosting means storing and serving website files (HTML, CSS, JavaScript, images, etc.) from a server to make them accessible to users over the internet.
The initial configurations defined on the S3 bucket especially configurations for bucket permissions are essential in making the contents of your S3 bucket publicly available. Such a mistake in the configuration set up resulted in the endpoint URL initially returning a 403 error because the S3 bucket permissions were set to deny public access, resulting in an "Access Denied" message. This was resolved by updating the bucket policy or access control list (ACL) to allow public read access to the objects in the bucket.
Step 3: Delete the S3 bucket.
Now that we have completed the project, we can delete the S3 bucket so we don't get charged for storing any of the resources on our account. However, it is important to note that attempting to delete the S3 bucket directly will return an error as referenced by the screenshots below.
To do this successfully, we must first empty the contents of the bucket by typing the phrase "permanently delete" on the screen that appears right after you click "Empty bucket" and then clicking the "Empty" button as illustrated by the screenshots below
With the contents of the bucket successfully emptied, selecting the "Delete" action on the bucket navigates the user to the screen below where they are required to enter the name of the bucket before clicking on the "Delete bucket" button.
Side Note: There are some other cool things you can do with projects you have on an S3 bucket and some of these include;
a. Creating/sharing a pre-signed URL that grants access to a recipient for a specific period of time and expires after that time period has elapsed.
b. Using a bucket policy to secure your bucket by denying "delete" privileges to individuals who have access to your bucket on certain files such as your "index.html" file within the S3 bucket.
c. Updating the contents of your static website after it has been uploaded. But when you do this, it is important to re-enable the necessary permissions required for the content of the website to be publicly accessible.
d. Bucket versioning.
e. Hosting your website on your own domain.