On continuation to my previous documentation regarding S3 services and their usage, we'll discuss about static website hosting using s3 services.
The first step to hosting a static website on AWS S3 is to create an S3 bucket in your account.
After creating the bucket, we will upload the website contents and files in our bucket. The website content will then be assigned specific permissions to be accessible to the public.
- create the bucket and the bucket name should be unique for all AWS accounts around the world:
- Since we want the website to be publicly accessible, we need to grant the public access to the objects of this S3 bucket. For that, uncheck the Block all public access checkbox in the “Block Public Access setting for this bucket” section.
After configuring the public access settings, a section will appear to acknowledge the S3 bucket and its content being made public. Check the box to acknowledge it.
Now download a sample website. Extract it and copy the contents of the folder into your TNT drive folder you created earlier.
Go to the Objects section, and then Click on the upload button. Now, browse your system for the directory you want to upload into the S3 bucket. Select the static website directory and upload it to the S3 bucket.
- Uploading the static site content may take some time depending upon the size of the folder:
After a successful upload, click close at the right corner. You will be directed back to the object section.
Now go to AWS S3 console. Select your bucket and select all objects, make them public.
After uploading the static site content, enable hosting on your S3 bucket. In order to allow static website hosting on your S3 bucket, go to the properties tab from the top menu in the S3 bucket.
Scroll down in properties tab and look for the Static Website Hosting section.
Click on the Edit button in the Static website hosting section and enable the hosting.
After enabling static website hosting, specify the index file of your project (the opening page of your website or webapplication). In this case, it is index.html.
Also, if there is an error file in your project, you must specify it in the error document field. This will appear in case your actual web page is not reachable. Now. click on the Save changes button to apply the changes to your S3 bucket.
Now, our S3 bucket is hosting the website content uploaded to it and is publicly accessible. In order to access the website, we need a public URL that AWS itself provides. This URL can be seen in the static website hosting section of the S3 bucket.
- To make our content accessible publicly, we need to add a bucket policy for which we have to go to the permissions tab of our S3 bucket to make some changes to the permissions of our S3 bucket.
- Paste the following JSON in the editor to allow the public to read files from the bucket:
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicRead",
"Effect": "Allow",
"Principal": "",
"Action": [
"s3:GetObject",
"s3:GetObjectVersion"
],
"Resource": "arn:aws:s3:::YOUR-S3-BUCKETNAME/"
}
]
}
-Make sure to replace “YOUR-S3-BUCKETNAME” with your S3 bucket name in the JSON policy.
After setting the permissions for the bucket, it’s time to access the webpage through the URL. For this, go to the Objects tab of the S3 bucket and go to the static site directory.
Look for the index.html file in the folder, which you defined as the index document for this project. Click on the index.html file.
- Now, in the object overview section under the properties tab, you can find the URL of the static website.
- Go to this URL, and the static website hosted on the AWS S3 bucket will be accessible via browser.
In this article, we went through the configuration of a static website using the AWS S3 bucket. We can use a custom domain to launch the static website via configuration using AWS Route 53 services.
You can create the website pages, upload them into an S3 bucket, and users can access the website. You do not require to maintain any backend servers. It is a serverless architecture, and AWS manages them for you automatically.
Thank you!! Stay tuned for more exciting stuff on AWS services and provide your feedback in the comments.
Top comments (0)