Easier than you think.
Amazon S3 can be used to host a static website. Let’s walk through these simple processes.
Required Bucket Configuration
The following properties are required to make an s3-bucket
to host a static site
Enable Static Site Hosting
Need public access to the bucket along with the objects
A bucket policy to enable
Get Object
permissionBucket name should be the same as a domain name
We will walk through the following steps to match with all the required configurations.
Step 01: Create a Bucket
Go to
AWS Console
and openS3 service
Create a bucket and Uncheck Public Access
Bucket name should be the same as your website domain
If we consider the website should be www.my-site.com
then, the bucket name should be my-site.com
If we plan to use the site domain [www.sub-domain.my-site.com
](sub-domain.my-site.com) then the bucket name should be the same [www.sub-domain.my-site.com
](sub-domain.my-site.com)
While creating a bucket, ensure you uncheck the Block all public access
Also, acknowledge the public access
Step 02: Enable Static Website Hosting
To enable `static website hosting
Select the bucket and go to the
properties
tabNow you will find an option to edit
Static website hosting
and click theEdit
buttonEnable the hosting
For a react app the
index document
should beindex.html
We can create an error file and put it in the
Error document
section. Alternatively, we can use a dummy file name, even though it does not exist.Now save the changes
Step 03: Update Bucket Policy
To update bucket-policy
select the bucket and go to the Permissions
tab.
Select
bucket-policy
and clickedit
Bucket policy be
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::bucket-name/*"
}
]
}
Here, Resource
is the bucket arn
This policy implies that the bucket's object will be accessed publicly.
- Save the
bucket-policy
Step 04: Upload Static Files
Before uploading files to the bucket, build the react app and ensure build
the directory is available in the react-app
- Now select the bucket and upload all the files and directories inside the
build
directory
Now the site is ready and you can find the URL in the following section
Select the bucket and go to the
properties
sectionIn properties, under the
static site hosting
you will find the URL for the site.
Step 05: Setup Domain Using Route 53
To use the domain from Route 53
.
Go to the hosted zone and create a new recordset with the following properties
Route name should be the same as the bucket name
Alias should be toggled in
As a value, from the dropdown select the
s3 website endpoint
Also, select the region and bucket name from the value dropdown
Route type should be
A
record (IPv4)Routing policy for the static site can be
Simple Routing Policy
We Are Done
For further investigation, you can follow the Official doc by AWS.
Let me know of any queries, and I’ll reply ASAP.